android实现Materia Design风格APP（二）：部分Materia Design风格的控件介绍一

本篇大部分内容学习自第一行代码第二版加上部分自己理解。介绍了，Snakebar、FloatingActionButton、CoordinateLayout、ToolBar四个控件，会的请自行跳过。

首先需要在build.gradle中依赖：

implementation 'com.android.support:design:28.0.0'

1.Snackbar

我感觉是一个增强版的Toast，可以实现Toast的功能的基础上增加了与用户的交互事件，效果如下：

使用方法：

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/root"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity">



</FrameLayout>

 java代码：

public class Main2Activity extends AppCompatActivity {

    @BindView(R.id.root)
    FrameLayout root;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);

        //基本使用方法与Toast类似
        //构建普通不带点击事件的Snakebar
        Snackbar.make(root, "Hello, I am is a Snakebar.", Snackbar.LENGTH_SHORT).show();

        new Thread(new Runnable() {
            @Override
            public void run() {

                SystemClock.sleep(5000);
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //构建带点击事件的Snakebar
                        Snackbar.make(root, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
                                .setAction("确定", new View.OnClickListener() {
                                    @Override
                                    public void onClick(View v) {

                                        Snackbar.make(root, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
                                    }
                                }).show();
                    }
                });
            }
        }).start();
    }
}

 2.FloatingActionButton

立体悬浮按钮是ImageButton的子类，是一个圆形加上点阴影效果的按钮。可以通过style里的colorAccent指定背景颜色，通过src指定图片

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:id="@+id/root"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_delete"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"/>

</FrameLayout>

java代码：

public class Main2Activity extends AppCompatActivity {

    @BindView(R.id.fab)
    FloatingActionButton fab;//悬浮按钮

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);

        //设置悬浮按钮点击事件
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //构建带点击事件的Snakebar
                Snackbar.make(fab, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
                        .setAction("确定", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                                Snackbar.make(fab, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });
    }
}

3.CoordinatorLayout

加强版的FrameLayout，由Design Support库提供，使用方法参照FrameLayout，加强的地方在于可以监听其所有子控件的各种事件，然后自动帮我们做出最为合理的响应。注意layout_behavior这个新的属性，可以让被监听view随着指定该属性的子view做出反应，默认的常用值有@string/appbar_scrolling_view_behavior，大概意思就是指定了这个属性值的view并且这个view支持竖向和嵌套滑动时，appbar就可以自动的跟随view做滑动。可能说了这些还是不明白这个属性到底干什么用的，不过不要紧，那就先忽略这个属性吧，反正后面会用到，看到直观效果你就知道是干嘛用的了，别着急。

先看看CoordinatorLayout的简单用法，就是替代FrameLayout，还记得刚才FloatingActionButton的效果图吧？点击按钮Snakebar会挡住FloatingActionButton一半，而上边我们的xml布局里一直用的都是FrameLayout，现在改为CoordinateLayout我们看看效果吧。

xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/root"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_delete"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"/>

</android.support.design.widget.CoordinatorLayout>

java代码没有改动。

4.Toolbar

大家都很熟悉吧？actionBar的替代，之所以还要写是我之前没怎么用过，记笔记。

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

    <!--showAsAction的值always一直显示，ifRoom如果有地方就显示，没有则隐藏，never一直隐藏-->
    <item android:id="@+id/backup"
        android:title="BackUp"
        android:icon="@drawable/ic_backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/delete"
        android:title="Delete"
        android:icon="@drawable/ic_delete"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/setting"
        android:title="Setting"
        android:icon="@drawable/ic_settings"
        app:showAsAction="never"/>
</menu>

xml布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/root"
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity">

    <!--定义theme指定toolBar中的子view的主题，popupTheme指定toolBar隐藏的menu打开时的主题-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:background="@color/colorPrimary"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_delete"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"/>
</android.support.design.widget.CoordinatorLayout>

java代码：

public class Main2Activity extends AppCompatActivity {

    @BindView(R.id.fab)
    FloatingActionButton fab;//悬浮按钮
    @BindView(R.id.toolBar)
    Toolbar toolbar;//toolBar

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        ButterKnife.bind(this);

        //设置toolBar的title文字
        toolbar.setTitle("ActionBar");
        //将toolBar设置为actionBar
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        //显示返回按钮
        actionBar.setDisplayHomeAsUpEnabled(true);

        //设置悬浮按钮点击事件
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //构建带点击事件的Snakebar
                Snackbar.make(fab, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
                        .setAction("确定", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                                Snackbar.make(fab, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
                            }
                        }).show();
            }
        });
    }

    //设置toolBar上的menu
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }
}