Android 之 史上最细 Material Design

版权声明：转发请标明原著 https://blog.csdn.net/weixin_39460667/article/details/82148228

Material Design

Material Design是谷歌新的设计语言，谷歌希望寄由此来统一各种平台上的用户体验，Material Design的特点是干净的排版和简单的布局，以此来突出内容。今天试了几个比较Support包中比较典型的Material Design控件，后期会在学习下Material Design的设计思想和理念。

Android Design Support 库依赖

    compile 'com.android.support:design:24.2.1'

 

cardview

依赖：

    compile 'com.android.support:cardview-v7:24.2.1'

效果图

代码（案例）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp" />
    </LinearLayout>

</android.support.v7.widget.CardView>

Floating Action Button 与 Snackbar

效果图（悬浮框按钮）

代码  （可以通过更改资源文件更改图形按钮图片）

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

按钮事件

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();
            }
        });

以使用app:elevation来表示空闲状态高度，app:pressedTanslationZ为按下状态的高度

按钮的颜色一般为主题的强调色，也可以使用 ”app:backgroundTint“修改

snackbar

 Snackbar.make(view, "Data deleted", Snackbar.LENGTH_SHORT)
                        .setAction("Undo", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
                            }
                        })
                        .show();

 

AppBarLayout

当滑档内容时，为了腾出跟多的空间展示内容可以将AppBarLayout隐藏

效果

 

 

 

 

 

 

 

 

代码

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

Toolbar

Toolbar 比传统的 ActionBar 更灵活，功能也更多，我们可以看到现在市面上很多的 APP 已经用 Toolbar 替代了 actionbar，在 Desgin Support 的组件中，很多设计都可以和 Toolbar 协同工作，而不是和 actionbar，所以还是建议使用新的 toolbar 替换以前的 actionbar

去除actionbar

android:theme="@style/Theme.AppCompat.Light.NoActionBar">

代码

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap" />

通知系统使用 toolbar

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

一般我们都会把 toolbar 和 AppBarLayout 一起协同起来使用如下

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap" />
        </android.support.design.widget.AppBarLayout>

要想达到Toolbar隐藏的效果，看以上的布局文件，有几点说明：

1、首先顶层布局必须是CoordinatorLayout

2、给需要隐藏的组件设置 app:layout_scrollFlags滚动标志，比如这里的Toolbar。这个标志有四种，如下所示：

scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如TabLayout 没有设置这个值，将会停留在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

toolbar事件

  /**
     * 重写父类的一个方法为toolbar引入图标
     * @param menu
     * @return
     */
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);
        return true;
    }
    //toolbar 的监听事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                //打开左侧栏
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.backup:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

AppBarLayout当中嵌套CollapsingToolbarLayout

效果如下，这种效果在详情页面用的比较多，展现个性化内容，图像具有很强的吸引力。当往下滚动RecyclerView的时候，CollapsingToolbar会自动扩展自AppBarLayout的高度，当往上滚动的时候，CollapsingToolbar又会折叠，最终固定为Toolbar的高度，在CollapsingToolbarLayout当中放了一个ImageView，用于承载一张图片。

代码

<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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruit_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                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:orientation="vertical"

            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBar"
        app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>

要想达到隐藏的效果，必须跟上面的说明一样：

1、首先顶层布局必须是CoordinatorLayout。

关于CollapsingToolbarLayout，有几个属性说明：

1、Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。 
2、Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。

3、如果我们把CollapsingToolbarLayout的layout_scrollFlags的exitUntilCollapsed标志去掉，那么CollapsingToolbarLayout里面的控件在折叠的时候都不会显示在顶端，都会隐藏起来，忽略控件的折叠模式。

4、同时标志exitUntilCollapsed本身就包含Toolbar折叠到顶端，如果此时把Toolbar的app:layout_collapseMode设置为"parallax"，那么Toolbar在折叠到顶端的时候，图标和菜单都不会显示出来，这个需要注意一下，所以一般把Toolbar的app:layout_collapseMode设置为"pin"。

CoordinatorLayout

在Material Design当中存在很多组件之间的交互，一般是以动画的形式呈现。在Design library当中引入了组件CoordinatorLayout，它是一个布局，继承自FrameLayout，通过协调调度子视图布局的形式来产生动画效果，来达到子控件之间的交互效果

通过上面 Floating Action Button ，AppBarLayout，Toolbar以及 控件的使用我们发现了一个问题

可以看到，Snackbar 遮挡住了我们的 view，这时候需要一个CoordinatorLayout来协调 view 布局，当我们把Snackbar依附于CoordinatorLayout的时候，当点击FloatingActionButton弹出Snackbar的时候，FloatingActionButton会自动上移，然后隔一段时间Snackbar消失后，FloatingActionButton就会自动归位。

在一系列隐藏中都需要使用到他作为外部控件

注意

根据官方的谷歌文档，AppBarLayout目前必须是第一个嵌套在CoordinatorLayout里面的子view

在 toolbar 中加入属性，app:layout_collapseMode=”pin”，使得 Toolbar 中的按钮能固定在顶部

侧滑菜单  NavigationView

效果如下

代码

<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.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

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

nav_header

圆形库 

    compile 'de.hdodenhof:circleimageview:2.1.0'

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Tony Green"
        android:textColor="#FFF"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/username"
        android:text="[email protected]"
        android:textColor="#FFF"
        android:textSize="14sp" />

</RelativeLayout>

nav_menu

<?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_call"
            android:icon="@drawable/nav_call"
            android:title="Call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="Location" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="Tasks" />
    </group>
</menu>

侧滑菜单事件

打开事件

左滑

 mDrawerLayout.openDrawer(GravityCompat.START);

右滑

 mDrawerLayout.openDrawer(GravityCompat.END);

关闭事件

       navView.setCheckedItem(R.id.nav_call);
        //为左边的栏框的每一个item设置一个点击事件
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                //关闭左侧栏
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

到此结束我的讲解，喜欢的点个赞 谢谢！