Material Design（一）_material design 1

Material Design（一）

一.标题栏ToolBar

一个用来替代ActionBar的控件。

(1)隐藏原本的ActionBar

注册文件的application中有

android:theme="@style/AppTheme">
1

theme在res/style中定义

<resources>

    <!-- 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>

</resources>
1
2
3
4
5
6
7
8
9
10
11

有不同的可选值，带ActionBar就是在这里定义的.DarkActionBar是深色主题，

没有ActionBar可以这样 Theme.AppCompat.Light.NoActionBar和Theme.AppCompat.NoActionBar，有Light是浅色主题，陪衬颜色是深色，没有就是主体颜色是深色，陪衬颜色是浅色。这里有很多可选值，根据需求选择，什么透明窗口啥的都有。

（2）布局文件引进控件

 <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"
        ></androidx.appcompat.widget.Toolbar>
1
2
3
4
5
6
7
8

（3）res目录下新建一个menu文件夹，然后新建menu，定义一个 菜单在顶部，丰富控件

<?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:title="BackUp"
    android:icon="@drawable/ic_launcher_foreground"
    app:showAsAction="always"
    />
    <item
        android:id="@+id/delete"
        android:title="Delete"
        android:icon="@drawable/ic_launcher_foreground"
        app:showAsAction="ifRoom"
        />
    <item
        android:id="@+id/setting"
        android:title="Setting"
        android:icon="@drawable/ic_launcher_foreground"
        app:showAsAction="withText"
        />
</menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

app:showAsAction指定按钮的显示位置。withText表示以文字形式显示在菜单中，屏幕不显示；always表示永远显示在Toolbar中，屏幕空间不够则不显示；ifRoom表示屏幕空间足够的情况下显示在Toolbar中，不够的话显示在菜单中；never表示永远显示在菜单中。

Toolbar中只显示图标，菜单中的Action按钮只显示文字

（4）把ToolBar设置一下，将菜单显示进去

然后继续在MainActivity中加入以下内容

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return super.onCreateOptionsMenu(menu);
    }
1
2
3
4
5
6
7
8
9
10
11
12

二.滑动菜单DrawerLayout

将一些菜单隐藏起来，不放在主屏幕上，通过滑动显示出来。

(1)通过DrawerLayout进行简单实现

DrawerLayout是一个布局，允许放入两个直接子控件，一个是主屏幕显示的内容，另一个是滑动菜单中显示的内容，定义一个布局

<?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"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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"
        /></LinearLayout>
    <TextView
        android:id="@+id/drawerTextView"
        android:text="This is a menu"
        android:layout_gravity="start"
        android:background="#FFF"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.drawerlayout.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

这里主布局就是上面那个LinearLayout，滑动的部分是一个TextView，也可以是其他控件。这里layout_gravity属性很重要，一定要加，不然没有效果，可选值，left，right分别是从左向右和从右向左滑动，还有start，会根据系统语言判断，如果是从左向右语言，比如汉语英语就从左向右滑动，否则从右向左滑动。

(2)针对有的人不知道可以滑动，可以设置一个按钮来点击实现效果，在Toolbar中有自带的实现这一个功能的按钮叫HomeAsUp,它默认是一个返回箭头，返回上一个活动。

public class MainActivity extends AppCompatActivity {
    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);
        ActionBar actionBar=getSupportActionBar();
        if(actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return true;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

首先获取actionBar，这里是ToolBar实现的，ActionBar actionBar=getSupportActionBar();

然后具体设置一下

​ if(actionBar!=null){
​ actionBar.setDisplayHomeAsUpEnabled(true);
​ actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);
​ }

setDisplayHomeAsUpEnabled()让导航按钮显示出来

setHomeAsUpIndicator可以设置里面的图标然后重写onOptionsItemSelected()方法来实现这个按钮的点击事件，这个按钮的id永远都是android.R.id.home，然后调用drawerLayout.openDrawer(GravityCompat.START);把滑动菜单展示出来，传入一个Gravity参数，保证这里和XML中行为一致，传入GravityCompat.START。

三.NavigationView

优化滑动菜单界面。

（1）首先引进依赖

在这里可以引进最新Design Support依赖

https://developer.android.com/topic/libraries/support-library/packages#design

图片圆形化工具

https://github.com/hdodenhof/CircleimageView

implementation 'com.android.support:design:28.0.0'
implementation 'de.hdodenhof:circleimageview:3.0.0'
1
2

(2)准备一个menu，在NavigationView显示具体菜单项

<?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:title="Call"
        android:icon="@drawable/ic_launcher_foreground" />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Friends"
            android:id="@+id/nav_friends"
            />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Task"
            android:id="@+id/nav_task"
            />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Mail"
            android:id="@+id/nav_mail"
            />
        <item
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Location"
            android:id="@+id/nav_location" />

    </group>

</menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

里面的checkableBehavior属性定义为single表示每个item只能单选。

再准备headerLayout在滑动页面中显示头部布局,自己随便定义一个就好

（3）修改DrawerLayout中的布局文件代码

<?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"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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"
        /></LinearLayout>
   <com.google.android.material.navigation.NavigationView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/nav_view"
       android:layout_gravity="start"
       app:menu="@menu/nav"
       app:headerLayout="@layout/headerlayout" />

</androidx.drawerlayout.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

（4）在MainActivity中添加以下代码

NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
        navigationView.setCheckedItem(R.id.nav_call);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                drawerLayout.closeDrawers();
                return false;
            }
        });
1
2
3
4
5
6
7
8
9

navigationView.setCheckedItem(R.id.nav_call);设置默认选中选项call。接下来给它添加一个点击事件，这里点击任何菜单项都关闭滑动菜单。

四.悬浮按钮（FloatingActionButton）

Design Support一个控件，使用需要依赖，colorAccent作为按钮颜色。

 <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floatingActionButton"
        android:layout_gravity="bottom|end"
        android:layout_margin="5dp"
        android:src="@drawable/ic_launcher_foreground"
        app:elevation="8dp"
        />
1
2
3
4
5
6
7
8
9

elevation表示投影，数字越大，投影区域越大，颜色越浅。

然后在MainActivity中设置该按钮点击事件

FloatingActionButton floatingActionButton=(FloatingActionButton)findViewById(R.id.floatingActionButton);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this,"Clicked",Toast.LENGTH_SHORT).show();
            }
        });
1
2
3
4
5
6
7

五.SnackBar

类似于Toast的提示工具，在提示中加入一个交互按钮，点击按钮可以进行一些额外操作

 FloatingActionButton floatingActionButton=(FloatingActionButton)findViewById(R.id.floatingActionButton);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               // Toast.makeText(MainActivity.this,"Clicked",Toast.LENGTH_SHORT).show();
                Snackbar.make(view,"Data Delete",Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this,"Data Restore",Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

不同的地方是Snackbar第一个参数是View，只要是当前页面任意一个View就可以，Snackbar会使用这个View自动查找最外层布局。

六.CoordinatorLayout

依然是Design Support里面的，是一个加强版FrameLayout，可以监听其所有子控件的各种事件，自动做出最为合理的相应。比如进行偏移，确保控件不会遮挡。

将之前项目的FrameLayout替换成CoordinatorLayout就可以了。

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/floatingActionButton"
        android:layout_gravity="bottom|end"
        android:layout_margin="5dp"
        android:src="@drawable/ic_launcher_foreground"
        app:elevation="8dp"
        />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以看到现在Snackbar弹出来的窗口与按钮不遮挡了