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

最新推荐文章于 2024-05-16 22:33:58 发布

小龙surpass

最新推荐文章于 2024-05-16 22:33:58 发布

阅读量5.3k

点赞数 5

分类专栏： Android日常开发知识点文章标签： Android Material Design

本文链接：https://blog.csdn.net/Fly_li_sir/article/details/79716898

版权

Android日常开发知识点专栏收录该内容

17 篇文章 2 订阅

订阅专栏

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

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

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

NavigationView：

继承自FrameLayout，感觉NavigationView配合DrawerLayout作为侧滑菜单的情况比较多，所以以此举例：
这里写图片描述
代码部分：

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/red"
        app:itemIconTint="@color/red"
        app:itemBackground="@color/colorAccent"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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的一个顶部导航栏；
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，有个很常见的效果是靠它实现的：
这里写图片描述
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">
      
		<!--设置layout_scrollFlags属性-->
        <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>
  
    <!--设置layout_behavior属性-->
    <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的再一层封装，主要用于实现顶部伸缩效果，看图吧：
collapsing
代码：

<?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滑动到顶部时才继续滑动，看图，中间有放慢的地方：
collapsing2

Bottom Sheet

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

代码：

<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:"@+id/cl_root"                                             
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.clone.surpassli.mddemo.ToolBarActivity">

    <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

小龙surpass

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Material Design——控件大汇总(二)

我尽量不打错别字，用词准确，不造成阅读障碍。本篇继续对常用MD控件及效果进行汇总，如果没有看到你想要了解的控件使用方法，请阅读我的另一篇文章https://blog.csdn.net/fly_li_sir/article/details/79704021本篇文章涉及：NavigationView、SwipeRefreshLayout、ToolBar、AppBarLayout、Col...
复制链接

扫一扫