Material Design——控件大汇总(二)

我尽量不打错别字，用词准确，不造成阅读障碍。

本篇继续对常用MD控件及效果进行汇总，如果没有看到你想要了解的控件使用方法，请阅读我的另一篇文章Material Design——控件大汇总(一)

本篇文章涉及：NavigationView、SwipeRefreshLayout、ToolBar、AppBarLayout、CollapsingToolbarLayout、Bottom Sheet

NavigationView：

继承自FrameLayout，感觉NavigationView配合DrawerLayout作为侧滑菜单的情况比较多，所以以此举例：

代码部分：

headerLayout：表示头部布局，布局方式与普通布局一致
menu：表示底部选项列表布局
itemIconColor：表示设置选项列表图片的颜色，因为选项的图片是画出来的，也可以放图片
itemTextColor：表示设置选型列表文字的颜色
itemBackground：表示设置选项列表区域的背景色

创建项目时可以选择布局样式，这里给出默认选项布局样式：

<?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_camera" android:icon="@drawable/ic_menu_camera"            android:title="Import" />        <item android:id="@+id/nav_gallery" android:icon="@drawable/ic_menu_gallery"            android:title="Gallery" />        <item android:id="@+id/nav_slideshow" android:icon="@drawable/ic_menu_slideshow"            android:title="Slideshow" />        <item android:id="@+id/nav_manage" android:icon="@drawable/ic_menu_manage"            android:title="Tools" />    group>    <item android:title="Communicate">        <menu>            <item android:id="@+id/nav_share" android:icon="@drawable/ic_menu_share"                android:title="Share" />            <item android:id="@+id/nav_send" android:icon="@drawable/ic_menu_send"                android:title="Send" />        menu>    item>menu>

代码处理item点击：

NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);navigationView.setNavigationItemSelectedListener(this);

//实现NavigationView.OnNavigationItemSelectedListener接口   @SuppressWarnings("StatementWithEmptyBody")    @Override    public boolean onNavigationItemSelected(MenuItem item) {        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camera) {            // Handle the camera action        } else if (id == R.id.nav_gallery) {        } else if (id == R.id.nav_slideshow) {        } else if (id == R.id.nav_manage) {        } else if (id == R.id.nav_share) {        } else if (id == R.id.nav_send) {        }        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        drawer.closeDrawer(GravityCompat.START);        return true;    }

SwipeRefreshLayout

继承自ViewGroup，下拉刷新的控件，挺喜欢的，主要是简单易用，样式美观，可惜没有配套的上拉加载控件。

代码设置属性：

//更改刷新的内部圆圈颜色 swiperefreshlayout.setColorSchemeColors(ContextCompat.getColor(this,R.color.colorPrimaryDark));//监听刷新swiperefreshlayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {            @Override            public void onRefresh() {                //刷新数据具体操作            }        });//根据数据刷新结果更改控件显示状态if (swiperefreshlayout.isRefreshing()) {    swiperefreshlayout.setRefreshing(false);}

将SwipeRefreshLayout包裹住想要触发刷新的内容布局，一般只有一个子布局，类似RecyclerView等。

ToolBar

ToolBar是可以顶替ActionBar的一个顶部导航栏；

toolbar = (Toolbar) findViewById(R.id.bt_tool_bar);setSupportActionBar(toolbar);toolbar.setTitle("toolbar");//设置titletoolbar.setNavigationOnClickListener(new View.OnClickListener() { //返回按钮的点击事件    @Override    public void onClick(View v) {        finish();    } }); getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示返回按钮} @Override public boolean onCreateOptionsMenu(Menu menu) {   // Inflate the menu; this adds items to the action bar if it is present.   getMenuInflater().inflate(R.menu.main, menu);   return true; } //处理菜单的点击事件 @Override public boolean onOptionsItemSelected(MenuItem menuItem) {     return super.onOptionsItemSelected(menuItem); }

menu文件夹下文件main，没有请创建：

<menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item android:id="@+id/action_settings" android:orderInCategory="100"        android:title="Settings" app:showAsAction="never" />menu>

AppBarLayout

讲到Toolbar就必须要讲AppBarLayout，有个很常见的效果是靠它实现的：

AppBarLayout继承自LinearLayout，默认垂直方向，这点可以在开发时使用上，在ToolBar下面放一个不会随着ToolBar一起滚动消失的View，在ToolBar滚动消失后可以继续留在屏幕上。

这个效果的实现有几个必要条件：

内容可以滚动
外部包裹CoordinatorLayout。

代码如下：

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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"    android:orientation="vertical"    tools:context="com.clone.surpassli.mddemo.ToolBarActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">              <android.support.v7.widget.Toolbar            android:id="@+id/bt_tool_bar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="@color/colorAccent"            app:layout_scrollFlags="scroll" />    android.support.design.widget.AppBarLayout>          <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginBottom="15dp"                android:text="这里面的文字应该特别长，引起屏幕滚动" />        LinearLayout>    android.support.v4.widget.NestedScrollView>android.support.design.widget.CoordinatorLayout>

NestedScrollView其中有一个layout_behavior属性，这里为了效果选择appbar_scrolling_view_behavior，这是系统自带的。

layout_scrollFlags的值有以下几个：

scroll：是让ToolBar随着屏幕滚动而滚动，如上图。
enterAlways：只要滚动内容开始向下滚动ToolBar就开始向下滚动，而不是等内容滚动到顶部才开始滚动，单独设置无效，需与scroll一起设置，如：scroll|enterAlways。
enterAlwaysCollapsed：当ToolBar的高度比较高的时候使用，结合CollapsingToolbarLayout，下面讲。
enterUntilCollapsed：当ToolBar的高度比较高的时候使用，结合CollapsingToolbarLayout，下面讲。

CollapsingToolbarLayout

继承自FrameLayout，是ToolBar的再一层封装，主要用于实现顶部伸缩效果，看图吧：

代码：

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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="com.clone.surpassli.mddemo.ToolBarActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:id="@+id/main.backdrop"                android:layout_width="match_parent"                android:layout_height="250dp"                android:scaleType="centerCrop"                android:src="@mipmap/ic_launcher"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:id="@+id/bt_tool_bar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin" />        android.support.design.widget.CollapsingToolbarLayout>    android.support.design.widget.AppBarLayout>    <android.support.v4.widget.NestedScrollView        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical">            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:layout_marginBottom="15dp"                android:text="川师大所大所多撒多" />                     ......                  LinearLayout>    android.support.v4.widget.NestedScrollView>android.support.design.widget.CoordinatorLayout>

比较眼熟的效果，exitUntilCollapsed是指优先获取滑动权，滑动完了才是ScrollView的滑动，layout_collapseMode：仔细看，你会发现图片的回收速度比CollapsingToolbarLayout要慢一些，可能我这个gif太慢了看不出来，这是设置了layout_collapseMode为parallax，如果设置为pin，就是相同速度了，只是感官不好看。

enterAlwaysCollapsed：一般和enterAlways，scroll合用，“scroll|enterAlways|enterAlwaysCollapsed”，当ToolBar已经显示到最小高度时，暂时随着手指向下滚动，直到scrollView滑动到顶部时才继续滑动，看图，中间有放慢的地方：

Bottom Sheet

bottom sheet 谈不上控件什么的，就是一种提供选项给用户的方式，底部弹出选项栏：

代码：

    <TextView        android:layout_width="match_parent"        android:layout_height="300dp"        android:gravity="center"        android:text="正常页面" />    <android.support.v4.widget.NestedScrollView        android:id="@+id/asv_bottom_sheet"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/colorAccent"        app:behavior_hideable="false"        app:behavior_peekHeight="50dp"        app:layout_behavior="@string/bottom_sheet_behavior">          android.support.v4.widget.NestedScrollView>android.support.design.widget.CoordinatorLayout>

NestedScrollView bottomSheet = (NestedScrollView) findViewById(R.id.asv_bottom_sheet);final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {     @Override     public void onStateChanged(@NonNull View bottomSheet, int newState) {          //这里是bottomSheet 状态的改变，根据slideOffset可以做一些动画          Toast.makeText(ToolBarActivity.this, "onStateChanged", Toast.LENGTH_SHORT).show();     }      @Override      public void onSlide(@NonNull View bottomSheet, float slideOffset) {          //这里是拖拽中的回调，根据slideOffset可以做一些动画          Toast.makeText(ToolBarActivity.this, "onSlide", Toast.LENGTH_SHORT).show();      }});

behavior_hideable：表示当下拉时bottom_sheet是否全部可见。
behavior_peekHeight：表示默认情况下bottom_sheet的显示高度。

主要涉及分享、细节选择等地方，代码上没什么难度，但是设计上有些要求：

底部不可过高留白。
高度不宜遮挡ToolBar。

先到这里。请移步下一遍文章：
Material Design——控件大汇总(三)

参考文章(感谢)：

http://www.cnblogs.com/syjhsgcc/p/4771931.html
https://blog.csdn.net/johnny901114/article/details/51918436