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

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

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

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

NavigationView:

继承自FrameLayout,感觉NavigationView配合DrawerLayout作为侧滑菜单的情况比较多,所以以此举例:
Material Design——控件大汇总(二)_第1张图片
代码部分:


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

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


<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,下拉刷新的控件,挺喜欢的,主要是简单易用,样式美观,可惜没有配套的上拉加载控件。
Material Design——控件大汇总(二)_第2张图片
代码设置属性:

//更改刷新的内部圆圈颜色 
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的一个顶部导航栏;
2018-03-27_143825

toolbar = (Toolbar) findViewById(R.id.bt_tool_bar);
setSupportActionBar(toolbar);
toolbar.setTitle("toolbar");//设置title
toolbar.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,有个很常见的效果是靠它实现的:
Material Design——控件大汇总(二)_第3张图片
AppBarLayout继承自LinearLayout,默认垂直方向,这点可以在开发时使用上,在ToolBar下面放一个不会随着ToolBar一起滚动消失的View,在ToolBar滚动消失后可以继续留在屏幕上。

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

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

代码如下:


<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的再一层封装,主要用于实现顶部伸缩效果,看图吧:
Material Design——控件大汇总(二)_第4张图片
代码:


<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滑动到顶部时才继续滑动,看图,中间有放慢的地方:
Material Design——控件大汇总(二)_第5张图片

Bottom Sheet

bottom sheet 谈不上控件什么的,就是一种提供选项给用户的方式,底部弹出选项栏:
Material Design——控件大汇总(二)_第6张图片

代码:



    <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

你可能感兴趣的:(Android,Material,Design,Android日常开发知识点)