Android之Material Design风格相关控件小结

2021-04-03 21:32:49 阅读：259 来源： 互联网

标签：控件 AppBarLayout layout app Material Design 滚动 Toolbar View

要使用Material Design风格控件，首先需要在Gradle中加入Support Design Library，例如：

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

1.CoordinatorLayout

1.1.CoordinatorLayout+AppBarLayout

布局文件代码：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/t_main_content">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/t_appbar"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="MdView"
            android:id="@+id/t_toolbar" />
        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/t_tablayout"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/t_viewPager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/t_fab"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share"
        />
</android.support.design.widget.CoordinatorLayout>

效果图：

配合CoordinatorLayout、AppBarLayout，我们实现了这样的效果，向上滚动列表时，Toolbar隐藏，TabLayout置顶，Toolbar之所以可以滚动隐藏、显示，是通过如下属性实现的：

app:layout_scrollFlags="scroll|enterAlways"

代码设置方式：

Toolbar toolbar = ... // your toolbar within an AppBarLayout
AppBarLayout.LayoutParams params = 
    (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
    | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

1.2界面组成结构说明

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/t_main_content">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/t_appbar">
        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways"
            android:id="@+id/t_toolbar" />
        <android.support.design.widget.TabLayout
            android:id="@+id/t_tablayout"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/t_viewPager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
    <android.support.design.widget.FloatingActionButton
        />
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout布局下包含两部分AppBarLayout+ViewPager，第一步AppBarLayout下需要滚动隐藏的设置app:layout_scrollFlags属性(app:layout_scrollFlags="scroll|enterAlways")，第二部ViewPager下包含滚动视图RecyclerView，同时ViewPager设置app:layout_behavior属性(app:layout_behavior="@string/appbar_scrolling_view_behavior")；

1.3app:layout_scrollFlags属性说明

ScrollFlags共有五种常量值供AppBarLayout的Children View使用，在xml布局文件中通过app:layout_scrollFlags设置，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；也可以在代码中通过setScrollFlags(int)方法使用，比如：

Toolbar toolbar = ... // your toolbar within an AppBarLayout
AppBarLayout.LayoutParams params = 
    (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
    | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

1.3.1scroll

Child View 伴随着滚动事件而滚出或滚进屏幕。注意两点：第一点，如果使用了其他值，必定要使用这个值才能起作用；第二点：如果在这个child View前面的任何其他Child View没有设置这个值，那么这个Child View的设置将失去作用。

<android.support.design.widget.AppBarLayout
        android:id="@+id/t_appbar">
        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll"
            android:id="@+id/t_toolbar" />
        <android.support.design.widget.TabLayout
            android:id="@+id/t_tablayout"
            />
    </android.support.design.widget.AppBarLayout>

1.3.2enterAlways

快速返回模式。其实就是向下滚动时Scrolling View和Child View之间的滚动优先级问题。对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动。简单理解就是设置enterAlways属性的视图优先滚出或者滚入屏幕，设置行为behavior再滚动；

app:layout_scrollFlags="scroll|enterAlways"

1.3.3enterAlwaysCollapsed

enterAlways的附加值。这里涉及到Child View的高度和最小高度，向下滚动时，(设置enterAlwaysCollapsed属性的视图)Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。

...
android:layout_height="@dimen/dp_200"
android:minHeight="@dimen/dp_56"
...
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
...

1.3.4exitUntilCollapsed

这里也涉及到最小高度。发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。

...
android:layout_height="@dimen/dp_200"
android:minHeight="@dimen/dp_56"
...
app:layout_scrollFlags="scroll|exitUntilCollapsed"
...

1.3.5snap

简单理解，就是Child View滚动比例的一个吸附效果。也就是说，Child View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕，有点类似ViewPager的左右滑动。

...
android:layout_height="@dimen/dp_200"
...
app:layout_scrollFlags="scroll|snap"
...

1.4TabLayout使用

//设置TabLayout可滚动，保证Tab数量过多时也可以正常显示
        tablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //两个参数分别对应tab未选中文字颜色和选中文字颜色
        tablayout.setTabTextColors(Color.WHITE, Color.RED);
        //绑定ViewPager
        tablayout.setupWithViewPager(viewpager);
        //设置tablayout的布局方式GRAVITY_FILL，GRAVITY_CENTER
        tablayout.setTabMode(TabLayout.MODE_FIXED);
        tablayout.setTabGravity(TabLayout.GRAVITY_FILL);
        //设置TabLayout的选择监听
        tablayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewpager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            //重复点击回调
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                scrollToTop(mFragments.get(tab.getPosition()).getTypeList());
            }
        });

Tablayout选中与否的颜色也可以在xml文件中配置：

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/c1" //tab指示条颜色
        app:tabSelectedTextColor="@color/c1" //选中的tab文字颜色
        app:tabTextColor="@color/c11" /> //tab文字默认颜色

注意添加命名空间：

xmlns:app="http://schemas.android.com/apk/res-auto"

2.CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fitsSystemWindows="true"
    android:id="@+id/detail_content"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:id="@+id/appbar"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                android:id="@+id/detail_img"/>
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                android:id="@+id/toolbar" />
        </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">
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>

效果图：

结合CollapsingToolbarLayout，我们向上滑动时ImageView隐藏、Toolbar显示，向下滑动则反之，类似折叠展开的效果。
在CollapsingToolbarLayout中通过app:contentScrim="?attr/colorPrimary"属性设置Toolbar折叠到顶部的背景，同时设置了app:layout_scrollFlags="scroll|exitUntilCollapsed"属性，其中scroll的含义已经解释过了，exitUntilCollapsed的含义如下：

exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端

同时AppBarLayout的高度需要时第一个固定值，这样CollapsingToolbarLayout就有了折叠的效果。

折叠后Toolbar可以固定在顶部是因为使用了app:layout_collapseMode="pin"属性，属性值除了pin还有一个parallax：

pin：固定模式，在折叠的时候最后固定在顶端
parallax：视差模式，在折叠时会有个视差折叠的效果

同时在ImageView中使用了app:layout_collapseMode="parallax"属性，来产生视差渐变的效果，使用app:layout_collapseParallaxMultiplier="0.7"可以控制视差的变化，属性值的范围是[0.0, 1.0]，值越大视察越大。

最后还需要在NestedScrollView中设置app:layout_behavior="@string/appbar_scrolling_view_behavior属性。

2.1界面组成结构说明

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>
            <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton/>
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout由AppBarLayout+NestedScrollView组成，AppBarLayout下包含CollapsingToolbarLayout，CollapsingToolbarLayout包含ImageView+ToolBar；

1）AppBarLayout固定高度；

2）CollapsingToolbarLayout指定app:contentScrim和app:layout_scrollFlags属性；

3）ImageView指定app:layout_collapseMode="parallax"和app:layout_collapseParallaxMultiplier="0.7"；

4）Toolbar指定app:layout_collapseMode="pin"

5）NestedScrollview指定app:layout_behavior="@string/appbar_scrolling_view_behavior"；

3.CoordinatorLayout + FloatingActionButton

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    .......................
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share" />

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

FloatingActionButton的父View是CoordinatorLayout，在屏幕右下角显示，在java代码中我们可以这样使用：

mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(mCoordinatorLayout, "点我分享哦！", Snackbar.LENGTH_SHORT).show();
            }
        });

效果图：

在Snackbar展示的时候FloatingActionButton上移，隐藏时下移。如果FloatingActionButton的父View是RelativeLayout或其它Container则FloatingActionButton不会上移而导致被Snackbar覆盖。

在CoordinatorLayout_2的gif效果中，我们上滑时FloatingActionButton会折叠消失，其实只需要如下两个属性就可以

app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"

第一个属性使FloatingActionButton显示在AppBarLayout的区域，第二个属性确定显示的具体位置。

4.ToolBar

使用Toolbar首先要隐藏原有的ActionBar，我们可以增加一个主题

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

也可以扩展原有的主题,

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

colorPrimary：对应ActionBar的颜色。
colorPrimaryDark：对应状态栏的颜色
colorAccent：对应EditText编辑时、FloatingActionButton背景等颜色。

在布局文件中的用法可以参考上边的代码，之后在java代码中得到Toolbar，通过setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar。

接下来看一张图：

ToolBar

标出了一些Toolbar常用的扩展方法，这样我们可以更好的根据需求定制我们的Toolbar了。具体的实践可参考源码。

5.NavigationView

效果图：

其实NavigationView就是用来实现我们常见的侧滑菜单的效果的。
在布局文件中的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include
        layout="@layout/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <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:menu="@menu/menu_drawer"
        app:headerLayout="@layout/nav_head_main" />

</android.support.v4.widget.DrawerLayout>

以DrawerLayout作为根布局，content_main作为主界面布局，最后是NavigationView，通过android:layout_gravity="start"设置为左侧滑菜单，同理android:layout_gravity="end"代表右侧滑菜单。
其中

app:menu="@menu/menu_drawer"
app:headerLayout="@layout/nav_head_main"

两个属性分别代表NavigationView的顶部header布局以及下边的menu item布局，具体可以参考源代码。
准备好了布局文件，接下来就是初始化工作：

private void initNavigationView() {
        //初始化NavigationView顶部head的icon和name
        ImageView icon = (ImageView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_icon);
        icon.setImageResource(R.mipmap.ic_launcher);
        TextView name = (TextView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_name);
        name.setText("VipOthershe");
        //设置NavigationView对应menu item的点击事情
        mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_item1:
                        break;
                    case R.id.nav_item2:
                        break;
                    case R.id.nav_set:
                        break;
                    case R.id.menu_share:
                        break;
                    case R.id.nav_about:
                        break;
                }
                //隐藏NavigationView
                mDrawerLayout.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }

很简单，就是初始化NavigationView的顶部header和Menu Item。

接下来看一下如何将右滑菜单和Toolbar结合使用：

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        mDrawerLayout.addDrawerListener(toggle);
        //设置左上角显示三道横线
        toggle.syncState();

通过设置将两者绑定在一起，同时Toolbar左上角显示三道横线，左上角可打开左滑菜单。

还可以采用另外一种方式：

 //设置Toolbar左上角图标
        mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDrawerLayout.openDrawer(GravityCompat.START);
            }
        });

先设置Toolbar左上角图标，并绑定事件，通过mDrawerLayout.openDrawer(GravityCompat.START);打开左滑菜单。

以上两个方法，分别对应打开和关闭左滑菜单：

mDrawerLayout.openDrawer(GravityCompat.START);
mDrawerLayout.closeDrawer(GravityCompat.START);

如果使用右滑菜单则将GravityCompat.START改成GravityCompat.END，即可实现右滑菜单的开关。

参考下载资源：https://download.csdn.net/detail/shehuan320_/9590530

参考：

https://www.jianshu.com/p/5e6f2ae1d2ec

https://www.jianshu.com/p/7caa5f4f49bd?ddd

标签：控件,AppBarLayout,layout,app,Material,Design,滚动,Toolbar,View
来源： https://blog.csdn.net/ahou2468/article/details/114678291

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Android之Material Design风格相关控件小结

1.CoordinatorLayout

1.1.CoordinatorLayout+AppBarLayout

1.2界面组成结构说明

1.3app:layout_scrollFlags属性说明

1.3.1scroll

1.3.2enterAlways

1.3.3enterAlwaysCollapsed

1.3.4exitUntilCollapsed

1.3.5snap

1.4TabLayout使用

2.CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout

2.1界面组成结构说明

3.CoordinatorLayout + FloatingActionButton

4.ToolBar

5.NavigationView