Material Design（一）

Material Design是在2014年Google I/O大会上重磅推出的一套全新的界面设计语言，是由谷歌的设计工程师们基于传统优秀的设计原则，结合丰富的创意和科学技术所发明的一套全新的界面设计语言，包含了视觉、运动、互动效果等特性。

为支持Material Design UI设计风格，谷歌在2015年的Google I/O大会上推出了一个Design Support库，这个库将Material Design中最具代表性的一些控件和效果进行了封装，使得开发者在即使不了解Material Design的情况下也能非常轻松地将自己地应用Material化。

1.FloatingActionButton

FloatingActionButton就是一个漂亮的按钮，其本质是一个ImageVeiw。有一点要注意，Meterial Design引入了Z轴的概念，就是所有的view都有了高度，他们一层一层贴在手机屏幕上，而FloatingActionButton的Z轴高度最高，它贴在所有view的最上面，没有view能覆盖它。

<?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.xiaoyehai.materialdesign.fab.FabActivity">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|right"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_launcher" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start|bottom"
        android:layout_margin="16dp"
        app:fabSize="mini"
        android:backgroundTint="#f00" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp" />

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

2.CoordinatorLayout

又名协调者布局，它是support.design包中的控件.它是一个 FrameLayout

CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果.

简单来说就是

作为最上层的View
作为一个 容器与一个或者多个子View进行交互

CoordinatorLayout各种特效

CoordinatorLayout实现浮动操作按钮效果：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.xiaoyehai.materialdesign.coordinatelayout.CoordinatorLayoutActivity1">

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

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

 mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "点击了悬浮按钮", Snackbar.LENGTH_SHORT).show();
            }
        });

只要使用CoordinatorLayout作为基本布局，将自动产生向上移动的动画。浮动操作按钮有一个 默认的 behavior来检测Snackbar的添加并让按钮在Snackbar之上呈现上移与Snackbar等高的动画。

CoordinatorLayout+AppBarLayout+Toolbar：

上滑隐藏Toolbar，下滑显示Toolbar

<?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.xiaoyehai.materialdesign.coordinatelayout.CoordinatorLayoutActivity2">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <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="15dp" />


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

AppBarLayout属性：

1.layout_scrollFlags=scroll的时候，这个View会跟着滚动事件响应,设置这个flag后就会随着滑动而滚出屏幕，没有设置这个flag的view将被固定在屏幕顶部。

2.layout_scrollFlags=“enterAlways”的时候 这个View会响应下拉事件，向下的滚动都会导致该view变为可见

3.layout_scrollFlags=“enterAlwaysCollapsed”的时候 当你的视图已经设置最小高度属性（minHeight）再设置该属性，那么你的视图只能以最小高度进入，仅当滚动视图到达顶部时才扩大到完整高度。

4.layout_scrollFlags=“exitUntilCollapsed”的时候 从大慢慢滚动变小，最后折叠在顶端。

TabLayout+ViewPager：

布局：

<?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.xiaoyehai.materialdesign.coordinatorlayout.CoordinatorLayoutActivity3">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="?attr/colorPrimary"
            android:scaleType="fitXY"
            android:src="@drawable/tangyan"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <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="15dp" />


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

activity：

/**
 * 案例：
 * CoordinatorLayout+AppBarLayout+TabLayout+ViewPager
 */
public class CoordinatorLayoutActivity3 extends BaseActivity {

    @BindView(R.id.tablayout)
    TabLayout mTabLayout;
    @BindView(R.id.viewpager)
    ViewPager mViewpager;
    @BindView(R.id.fab)
    FloatingActionButton mFab;

    private List<Fragment> mFragmentList = new ArrayList<>();

    private String[] tableTitle = {"主页", "微博", "相册"};

    @Override
    protected int getLayoutID() {
        return R.layout.activity_coordinator_layout3;
    }

    @Override
    protected void initView() {

        for (int i = 0; i < tableTitle.length; i++) {
            mFragmentList.add(new ListFragment(tableTitle[i]));
        }

        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), mFragmentList, tableTitle);
        mViewpager.setAdapter(myViewPagerAdapter);

        mTabLayout.setupWithViewPager(mViewpager);
    }

    @Override
    protected void initListener() {
        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "点击了悬浮按钮", Snackbar.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    protected void initData() {
    }
}

Fragment:

/**
 * Created by xiaoyehai on 2018/7/24 0024.
 */

@SuppressLint("ValidFragment")
public class ListFragment extends Fragment {

    @BindView(R.id.recycleview)
    RecyclerView mRecycleview;

    Unbinder unbinder;

    private String title;

    private List<String> dataList;

    public ListFragment(String title) {
        this.title = title;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragmett_list, container, false);
        unbinder = ButterKnife.bind(this, view);

        initData();

        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(getActivity());
        //分割线
        DividerItemDecoration itemDecoration = new DividerItemDecoration(getActivity(), LinearLayoutManager.VERTICAL);
        mRecycleview.addItemDecoration(itemDecoration);
        mRecycleview.setLayoutManager(layoutManager);

        RecycleAdapter adapter = new RecycleAdapter(getActivity(), dataList, R.layout.item_recyclerview);
        mRecycleview.setAdapter(adapter);

        return view;
    }

    private void initData() {
        dataList = new ArrayList<>();

        for (int i = 0; i < 50; i++) {
            dataList.add(title + i);
        }
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
}

这里需要注意的是：滚动控件必须实现NestedScrollingChild接口（如RecyclerView，NestedScrollView），而没有实现该接口的滚动控件如ScrollView、WebView、ListView是全部都没有作用的。后面CollapsingToolbarLayout也同样遵循该规则。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycleview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>
</LinearLayout>

3.AppBarLayout

继承了LinearLayout(默认的AppBarLayout是垂直方向)，它是为了Material Design设计的App Bar，
它的作用是把AppBarLayout包裹的内容都作为AppBar。说白了它的出现就是为了和CoordinatorLayout搭配使用， 实现一些炫酷的效果的。没有CoordinatorLayout，它和Linearlayout没区别。

4.CollapsingToolbarLayout

CollapsingToolbarLayout继承与FrameLayout.可折叠的toolbar布局。

简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。主要实现以下功能

Collapsing title（可以折叠 的 标题 ）
Content scrim（内容装饰），当我们滑动的位置 到达一定阀值的时候，内容 装饰将会被显示或者隐藏
Status bar scrim（状态栏布）
Parallax scrolling children，滑动的时候孩子呈现视觉特差效果
Pinned position children，固定位置的 孩子

结合ViewPager的视觉特差:

<?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.xiaoyehai.materialdesign.coordinatorlayout.CoordinatorLayoutActivity4">


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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            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="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/tangyan"
                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"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <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="15dp" />


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

/**
 * CollapsingToolbarLayout里面 包含ImageView 和ToolBar，
 * ImageView的app:layout_collapseMode="parallax"，表示视差效果，
 * ToolBar的 app:layout_collapseMode="pin"，当这个TooBar到达 CollapsingToolbarLayout的底部的时候，会代替整个CollapsingToolbarLayout显示
 */
public class CoordinatorLayoutActivity4 extends BaseActivity {

    @BindView(R.id.tablayout)
    TabLayout mTabLayout;
    @BindView(R.id.viewpager)
    ViewPager mViewpager;
    @BindView(R.id.fab)
    FloatingActionButton mFab;
    @BindView(R.id.toolbar)
    Toolbar mToolbar;

    private List<Fragment> mFragmentList = new ArrayList<>();

    private String[] tableTitle = {"主页", "微博", "相册"};

    @Override
    protected int getLayoutID() {
        return R.layout.activity_coordinator_layout4;
    }

    @Override
    protected void initView() {

        mToolbar.setTitle("唐嫣");
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        for (int i = 0; i < tableTitle.length; i++) {
            mFragmentList.add(new ListFragment(tableTitle[i]));
        }

        MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), mFragmentList, tableTitle);
        mViewpager.setAdapter(myViewPagerAdapter);

        mTabLayout.setupWithViewPager(mViewpager);
    }

    @Override
    protected void initListener() {
        mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "点击了悬浮按钮", Snackbar.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    protected void initData() {
    }
}