MaterialDesign5.0详解

来源：互联网发布：淘宝商城家具沙发编辑：程序博客网时间：2024/06/03 18:16

自从看了谷歌2014年的I/O大会上呈现出来一套新的界面设计风格，简直了，二话不说先上我的效果图：

这里写图片描述

首先，由于产生该效果的控价都是v7和design包的东西，所以必须导入这两个包进行依赖：

    compile 'com.android.support:appcompat-v7:25.2.0'    compile 'com.android.support:design:25.2.0'

首先看一下第一页的带有滑动菜单的布局：

<?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/mDrawer"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <android.support.design.widget.CoordinatorLayout        android:layout_width="match_parent"        android:layout_height="match_parent">        <android.support.design.widget.AppBarLayout            android:layout_width="match_parent"            android:layout_height="wrap_content">            <android.support.v7.widget.Toolbar                android:id="@+id/tool_bar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"                android:fitsSystemWindows="true"                android:popupTheme="@style/Theme.AppCompat.Light"                app:layout_scrollFlags="scroll|enterAlways|snap"                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                app:title="球星集锦"                app:titleTextColor="#ffffff"/>        </android.support.design.widget.AppBarLayout>        <android.support.v4.widget.NestedScrollView            android:layout_width="match_parent"            android:layout_height="wrap_content"            app:layout_behavior="@string/appbar_scrolling_view_behavior">            <android.support.v7.widget.RecyclerView                android:id="@+id/mRecycleView"                android:layout_width="match_parent"                android:layout_height="wrap_content" />        </android.support.v4.widget.NestedScrollView>    </android.support.design.widget.CoordinatorLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigationView"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="left"        app:headerLayout="@layout/draw_header_layout"        app:menu="@menu/nav_menu">    </android.support.design.widget.NavigationView></android.support.v4.widget.DrawerLayout>

这个布局最外层是v4包下的DrawerLayout该布局继承ViewGroup并且实现了DrawerLayoutImpl接口，DrawerLyout中只有两个布局CoordinatorLayout和NavicationView（侧边划出的导航栏），先来说一下NavigationView，可以看到里面有三个特别重要的属性：

        android:layout_gravity="left"//设置导航栏在该抽屉布局的方向        app:headerLayout="@layout/draw_header_layout"//是指导航栏中的头布局        app:menu="@menu/nav_menu"//设置导航栏中每个导航选项

下面着重讲一下CoordinatorLayout这是一个能够产生魔法的布局，但是必须和AppBarLayout、CollaspingLayout（非充要条件）、Toolbar(v7包)一起使用，对于CoordinatorLayout的子布局想要产生滑动的效果必须要(除AppBarLayout)实现NestedScrollViewChild接口的控件，比如RecycleView，对于ListView、GridView这些均没有实现该接口所以也不会产生上面的滑动效果。说实话，如果现在了你还在用ListView和GridView，你确实老了，技术一直在更新，RecycleView就是谷歌为了统一表布局而产生的，其强大程度超乎你的想想。上面这个布局便是利用了AppBarLayout、ToolBar组合使用，CoordinatorLayout是继承自FrameLayout所以在该布局下的子布局是会重叠展示的，而AppBarlayout是继承自LinearLayout方向Vertical的，而AppBar内部自动设置了Coordinator对子View的layout_behavior属性，所以不必在AppBarLayout下设置Layout
_behavior属性，但是在AppBarLayout下的布局必须设置另个属性（滑动标志）：

 app:layout_scrollFlags="scroll|enterAlways|snap"

如果设置该属性将不会产生toolbar上滑隐藏下滑显示的炫酷效果，那么这scrollFlags都有那些属性呢？

scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩
scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来
如果不设置改属性,则改布局不能滑动
下面再看一下第二个界面的布局：

<?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:fitsSystemWindows="true">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fitsSystemWindows="true">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="250dp"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"//ToolBar折叠时的渐变颜色            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">            <ImageView                android:id="@+id/iv_header"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                android:scaleType="centerCrop"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:id="@+id/mToolBar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:titleTextColor="@color/colorAccent"                app:layout_collapseMode="pin"                     app:navigationIcon="@drawable/ic_action_name"                app:title="球星"                app:titleTextColor="#ffffff">            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_recycle"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp"        android:background="#ffff"        app:layout_behavior="@string/appbar_scrolling_view_behavior">    </android.support.v7.widget.RecyclerView></android.support.design.widget.CoordinatorLayout>

该布局其实就是再AppBarLayout中填充了一个CollaspingToolBarLayout看名字就知道是个特殊的ToolBar布局，没错，她就是一个可以进行滑动显示和隐藏的ToolBar布局，它也是继承自FrameLayout，可以给它的子布局设置Gravity，而对于它的子布局有一个非诚重要的属性：* app:layout_collapseMode=”” *该属性表示折叠的模式，有三种设置方式：

pin: 在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
1. parallax: 视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
2. 不设置: 跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离
  好了，就说这么多了，以后再慢慢发现。
  源码下载

1 0