最佳的UI体验—— Material Design

Source

最佳的UI体验—— Material Design

1 什么是 Material Design

Material Design是由谷歌的设计工程师基于优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,包含了视觉、运动、互动效果等特性。

2 Toolbar

虽然对于Toolbar你暂时应该还是比较陌生的,但是对于ActionBar,你就应该有点熟悉了,由于其设计的原因,被限定只能位于活动的顶部,从而不能实现一些 Material Design 的效果,因此官方已不建议使用 ActionBar 了,而推荐使用 Toolbar。
ActionBar来自哪里?其实这是根据项目中指定的主题来显示的,打开 AndroidManifest.xml文件
在这里插入图片描述
可以看到android:theme属性制定了一个AppTheme的主题
这个主题定义在哪里呢?
打开res/values/styles.xml文件,代码如下所示:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

这里定义了一个叫AppTheme的主题,然后指定它的parent主题是Theme.AppCompat.Light.DarkActionBar
。这个DarkActionBar是一个深色的ActionBar主题,之前所有项目中自带的ActionBar就是因为制定了这个主题才出现的。而我们现在准备使用Toolbar来替代ActionBar,需要指定一个不带ActionBar的主题。通常有Theme.AppCompat.Light.NoActionBar
和 Theme.AppCompat.NoActionBar这两个主题可选,其中没有light的表示为深色主题,它会将界面的主题颜色设成深色,陪衬颜色设成淡色。而含有light的表示为淡色主题,它会将界面的主题颜色设成淡色,陪衬颜色设置成深色。修改res/values/styles.xml文件

<!-- Base application theme. -->  
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

理解见图:
在这里插入图片描述
除了以上三个属性,我们还可以通过textColorPrimary、windowBackground和navigationBarColor等属性来控制更多位置的颜色。不过唯独colorAccent这个属性不只是用来指定这样一个按钮的颜色,而更多表达了一个强调的意思,比如一些控件的选中状态也会使用colorAccent的颜色。
接下来修改activity_main.xml文件的代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--2行使用xmlns:app指定一个新的命名空间
正式由于每个布局文件都使用xmlns:android来指定命名空间,我们才能一直使用android:id等写法
这里指定了xmlns:app,也就是说现在可以使用app:attribute这样的写法了
为了能让Toolbar单独使用深色主题,这里我们是用android:theme属性
为了能让弹出的菜单项指定为淡色主题,使用app:属性popupTheme
-->
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

/>

</FrameLayout>

接下来,学习Toolbar的一些常用功能,修改标题栏上显示的文字,AndroidManifest.xml文件
在这里插入图片描述
添加一些action按钮,右击 res 目录→New→Directory,提前准备几张图片作为按钮的图标,并将他们放在drawable-xxhdpi目录下。创建一个 menu 文件夹。然后右击 menu 文件夹→New→Menu resource file,创建一个toolbar.xml 文件:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
android:id="@+id/backup"
android:icon="@mipmap/ic_backup"
android:title="Backup"
app:showAsAction="always"
/>
<item
android:id="@+id/delete"
android:icon="@mipmap/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"
/>
<item
android:id="@+id/settings"
android:icon="@mipmap/ic_setting"
android:title="Settings"
app:showAsAction="never"
/>
</menu>

通过标签定义action按钮,android:id 用于指定按钮的id;android:icon 用于指定按钮的图标;android:title 用于指定按钮上的文字
app:showAsAction来设置按钮的显示i位 置:always表示永远显示在Toolbar中,如果屏幕空间不够则不显示;idfRoom表示屏幕空间足够的情况下显示在Toolbar中,不够则显示在菜单栏;never表示永远显示在菜单当中
注意: Toolbar中的action按钮只会显示图标,菜单中的action按钮只会显示文字

修改MainActivity中的代码:

package com.example.wanghui.materialtest;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar1 = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar1);
}

/**
* 在onCreateOptionsMenu()方法中加载toolbar.xml文件
* */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}

/**
* 在onOptionsItemSelected()方法中处理各个按钮的点击事件
* */
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this,"You clicked Backup",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this,"You clicked Delete",Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this,"You clicked Settings",Toast.LENGTH_SHORT).show();
break;
default:

}
return true;
}
}

测试结果:

在这里插入图片描述

3 滑动菜单

3.1 DrawerLayout

借助DrawerLayout控件实现滑动菜单,首先它是一个布局,在布局中允许放入两个直接子控件,第一个子控件施主屏幕中显示的内容,第二个子控件是滑动菜单中显示的内容。修改activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context=".MainActivity"
>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!--2行使用xmlns:app指定一个新的命名空间
正式由于每个布局文件都使用xmlns:android来指定命名空间,我们才能一直使用android:id等写法
这里指定了xmlns:app,也就是说现在可以使用app:attribute这样的写法了
为了能让Toolbar单独使用深色主题,这里我们是用android:theme属性
为了能让弹出的菜单项指定为淡色主题,使用app:属性popupTheme
-->
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

/>
</FrameLayout>

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:text="This is menu"
android:background="#FFF"
/>
</androidx.drawerlayout.widget.DrawerLayout>

最外层的控件使用DrawerLayout,DrawerLayout放置了两个直接子控件,一个是TextView,用于作为滑动菜单中显示的内容,其中需要注意的是layout_gravity属性必须指定,因为我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边,left左,right右,这里我们指定了start表示会根据系统语言进行判断;另一个是FrameLayout,用于作为主屏幕中显示的内容。
在这里插入图片描述
防止一些用户不知道屏幕的左侧边缘是可以拖动的,准备一张ic_menu.png,放在drawable-xxhdpi目录下,修改MainActivity中的代码,如下所示:

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar1 = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar1);


//获得DrawerLayout实例
drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);


//调用getSupportActionBar()方法,获得ActionBar实例
ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
//设置导航键
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航键的图片
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}

}

/**
* 在onCreateOptionsMenu()方法中加载toolbar.xml文件
* */
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar,menu);
return true;
}

/**
* 在onOptionsItemSelected()方法中处理各个按钮的点击事件
* */
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()){
//HomeAsUp按钮id永远是android.R.id.home
case android.R.id.home:
Toast.makeText(this,"You clicked Home",Toast.LENGTH_SHORT).show();
//调用DrawerLayout的openDrawer()方法将滑动菜单显示出来
drawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.backup:
Toast.makeText(this,"You clicked Backup",Toast.LENGTH_SHORT).show();
// drawerLayout.openDrawer(GravityCompat.START);
break;
case R.id.delete:
Toast.makeText(this,"You clicked Delete",Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this,"You clicked Settings",Toast.LENGTH_SHORT).show();
break;
default:

}
return true;
}
}

在这里插入图片描述

3.2 NavigationView

在滑动菜单页面定制任意布局,NavigationView是Design Support库中提供的一个控件。
①首先,引入依赖库app/build.gradle文件中:


dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
......

implementation 'com.google.android.material:material:1.0.0'
//circleimageview开源项目,可以轻松实现图片圆形化的功能
implementation 'de.hdodenhof:circleimageview:3.0.0'
}

②准备menu和headerLayout:menu是用来在NavigationView中显示具体菜单项的,headerLayout是用来NavigationView中显示头部布局的。
准备menu:将事先找好的图标放在drawable-xxhdpi目录下,右击menu文件夹/New/Menu resource file,创建一个nav_menu.xml文件


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_call"
android:icon="@drawable/nav_call"
android:title="Call"
/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/nav_friends"
android:title="Friends"
/>
<item
android:id="@+id/nav_location"
android:icon="@drawable/nav_location"
android:title="Location"
/>
<item
android:id="@+id/nav_mail"
android:icon="@drawable/nav_mail"
android:title="Mail"
/>
<item
android:id="@+id/nav_task"
android:icon="@drawable/nav_task"
android:title="Tasks"
/>
</group>
</menu>

首先在

中嵌套了一个标签,然后将group的checkableBehavior属性指定为single,表示组中的所有菜单项只能单选;然后定义5个item即可。

准备headerLayout: 这是一个可随意定制的布局,在此,我们就在headerLayout中放置头像,用户名和邮箱地址3项内容
准备一个图片(最好正方形),放在drawable-xxhdpi目录下,右击layout文件夹/New/Layout resource file,创建一个nav_header.xml文件


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:background="?attr/colorPrimary">

<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/icon_image"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@drawable/icon_image"
android:layout_centerInParent="true"
/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="heretoforeu@163.com"
android:textColor="#FFF"
android:textSize="14sp"
/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/username"
android:text="Wang Hui"
android:textColor="#FFF"
android:textSize="14sp"
/>
</RelativeLayout>

布局文件的最外层是一个RelativeLayout
,将它的宽度设为match_parent,高度设为180dp,这是NavigationView比较适合的高度,然后指定它的背景色为colorPrimary。
RelativeLayout放置3个控件,CircleImageView是一个用于将图片图形化的控件,基本用法和ImageView大同小异,这里指定了一个而图片作为头像,然后设置为居中显示,另外两个TextView分别用于显示用户名和邮箱地址。android:layout_above="@id/username" --将控件置于给定ID控件之上
android:layout_alignParentBottom=“true” --将控件的底边缘和父控件的底边缘对齐
③修改activity_main.xml:


<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context=".MainActivity"
>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!--2行使用xmlns:app指定一个新的命名空间
正式由于每个布局文件都使用xmlns:android来指定命名空间,我们才能一直使用android:id等写法
这里指定了xmlns:app,也就是说现在可以使用app:attribute这样的写法了
为了能让Toolbar单独使用深色主题,这里我们是用android:theme属性
为了能让弹出的菜单项指定为淡色主题,使用app:属性popupTheme
-->
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

/>
</FrameLayout>


<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
/>
</androidx.drawerlayout.widget.DrawerLayout>

这里将之前的TextView换成了NavigationView。app:menu和app:headerLayout属性将我们准备好的menu和headerLayout设置进去,这样NavigationView就定义完成了。

④修改MainActivity.java文件

在这里插入代码片
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar1 = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar1);

drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
//获取NavigationView的实例
NavigationView navigationView = (NavigationView)findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
//设置导航键
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航键的图片
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
//调用setCheckedItem()方法将Call菜单设置为默认选中
navigationView.setCheckedItem(R.id.nav_call);
//调用setNavigationItemSelectedListener()方法来设置一个菜单项选中事件的监听器
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
//当用户点击任意菜单项时,就会回调onNavigationItemSelected()方法中
//我们可以在这个方法中写相应的逻辑处理
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
//这里仅仅调用drawerLayout.closeDrawers()方法将滑动菜单关闭
drawerLayout.closeDrawers();
return true;
}
});

}

测试结果:
在这里插入图片描述

4 悬浮按钮和可交互提示

立体设计是 Material Design 中一条非常重要的思想,也就是说,按照Material Design的理念,应用程序的界面不仅仅是一个平面,而应该是有立体效果的。

4.1 FloatingActionButton

FloatingActionButton 是 Design Support 库中提供的一个控件,可以比较轻松地实现悬浮按钮地效果。它默认使用 colorAccent 作为按钮的颜色。
下面开始具体实现。首先仍需要准备一个图标,放在drawable-xxhdpi目录下,然后修改activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context=".MainActivity"
>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">


<!--2行使用xmlns:app指定一个新的命名空间
正式由于每个布局文件都使用xmlns:android来指定命名空间,我们才能一直使用android:id等写法
这里指定了xmlns:app,也就是说现在可以使用app:attribute这样的写法了
为了能让Toolbar单独使用深色主题,这里我们是用android:theme属性
为了能让弹出的菜单项指定为淡色主题,使用app:属性popupTheme
-->
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
/>
</FrameLayout>

<com.google.android.material.navigation.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"
/>
</androidx.drawerlayout.widget.DrawerLayout>

可以看到,这里在主屏幕布局中加入FloatingActionButton。layout_gravity="bottom|end"表示指定该控件放置于屏幕的右下角
ayout_margin="16dp"表示给控件四周留点边距。

我们仔细观察,会发现悬浮按钮得下面有一点点阴影,说到悬浮,我们可以指定悬浮高度:


<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_done"
app:elevation="8dp"
/>

接下来,我们来处理FloatingActionButton得点击事件,修改MainActivity.java文件

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar1 = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar1);

drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
//获取NavigationView的实例
NavigationView navigationView = (NavigationView)findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
//设置导航键
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航键的图片
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
//调用setCheckedItem()方法将Call菜单设置为默认选中
navigationView.setCheckedItem(R.id.nav_call);
//调用setNavigationItemSelectedListener()方法来设置一个菜单项选中事件的监听器
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
//当用户点击任意菜单项时,就会回调onNavigationItemSelected()方法中
//我们可以在这个方法中写相应的逻辑处理
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
//这里仅仅调用drawerLayout.closeDrawers()方法将滑动菜单关闭
drawerLayout.closeDrawers();
return true;
}
});
//获取FloatingActionButton实例
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Fab clicked ",Toast.LENGTH_SHORT).show();
}
});

}

测试结果:

在这里插入图片描述

4.2 Snackbar

Snackbar 并不是Toast的替代品,它们两者之间有着不同的应用场景。Toast的作用是告诉用户现在发生了什么事情,但同时用户只能被动接受这个事情,因为没有什么办法能让用户进行选择。而Snackbar则在这方面进行了扩展,它允许在提示当中加入一个可交互按钮,当用户点击按钮的时候可以执行一些额外的逻辑操作。

Snackbar的用法与Toast类似,只不过可以额外增加一个按钮的点击事件,修改MainActivity中的代码:

public class MainActivity extends AppCompatActivity {

private DrawerLayout drawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Toolbar toolbar1 = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar1);

drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
//获取NavigationView的实例
NavigationView navigationView = (NavigationView)findViewById(R.id.nav_view);
ActionBar actionBar = getSupportActionBar();
if(actionBar!=null){
//设置导航键
actionBar.setDisplayHomeAsUpEnabled(true);
//设置导航键的图片
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
}
//调用setCheckedItem()方法将Call菜单设置为默认选中
navigationView.setCheckedItem(R.id.nav_call);
//调用setNavigationItemSelectedListener()方法来设置一个菜单项选中事件的监听器
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
//当用户点击任意菜单项时,就会回调onNavigationItemSelected()方法中
//我们可以在这个方法中写相应的逻辑处理
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
//这里仅仅调用drawerLayout.closeDrawers()方法将滑动菜单关闭
drawerLayout.closeDrawers();
return true;
}
});
//获取FloatingActionButton实例
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
/**
* 调用了 Snackbar.make()方法来创建一个 Snackbar对象
* make()方法的第一个参数需传入一个View,只要是当前界面布局的任意一个View都可以
* Snackbar会使用这个View来自动查找最外层布局,用于展示 Snackbar
* make()方法的第二个参数就是Snackbar中显示的内容,第三个参数时Snackbar显示的时长
*
* 接着调用了setAction()方法来设置一个动作,使得Snackbar不仅仅是一个提示,而是可以和用户进行交互的
* 简单起见,这里弹出一个Toast
*/

Snackbar.make(v,"Data delete",Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"Fab clicked ",Toast.LENGTH_SHORT).show();

}
}).show();

}
});

}

测试结果:
在这里插入图片描述

4.3 CoordinatorLayout

CoordinatorLayout 是 Design Support 库提供的一个加强版的 FrameLayout 布局,它可以监听其所有子控件的各种事件,然后自动帮我们做出最为合理的响应。

修改布局如下:
把第一个主页布局控件FrameLayout 替换成 androidx.coordinatorlayout.widget.CoordinatorLayout
在这里插入图片描述

可以看到悬浮按钮自动向上偏移Snackbar的同等高度,确保不会被遮挡

发布了4 篇原创文章 · 获赞 0 · 访问量 33