『Material Design 入门学习笔记』CollapsingToolbarLayout 与 AppBarLayout（附 demo）

这篇文章中，介绍到的其它组件有TextInputLayout，FloatingActionButton，Snackbar，CoordinatorLayout。
该专题的其它文章：
『Material Design入门学习笔记』前言
『Material Design入门学习笔记』动画（含demo）
『Material Design 入门学习笔记』主题与 AppCompatActivity（附 demo）
『Material Design入门学习笔记』RecyclerView与CardView（附demo）
demo下载

组件介绍

CoordinatorLayout

这一篇讲的组件有些多，因此要从头提及，头是哪呢？就是布局文件，布局文件的头是哪呢？就是CoordinatorLayout。
CoordinatorLayout被誉为超级FrameLayout。
主要是实现两个功能：

• 做为顶层布局
• 调度协调子布局
  好比说，接下来会讲到的Snackbar，就只有依靠CoordinatorLayout才能实现一些特殊操做，这个后面会讲到。
  CoordinatorLayout功能强大，主要是依靠一个Behavior对象。CoordinatorLayout本身并不控制View，全部的控制权都在Behavior。
  这个Behavior能够经过自定义的方式来实现本身的逻辑。写到这里，我忽然发现后面无法介绍了，由于介绍Behavior的功能须要依赖其它组件，那就放在后面再介绍Behavior吧。
  这里强调一下，接下来介绍的全部组件，都会用到这个库：

  compile 'com.android.support:design:22.2.1'复制代码

  AppBarLayout

  AppBarLayout继承自LinearLayout，布局方向为垂直方向。可是它内部封装了一些手势变换的动画。
  首先它须要依赖CoordinatorLayout做为父容器，同时也要求一个具备能够独立滚动的子View。
  他的子View会有一个设置参数 app:layout_scrollFlags有一下几种设置：
• scroll:设为scroll的View会跟随滚动事件一块儿发生移动， 全部想滚动出屏幕的view都须要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。
• enterAlways:设为enterAlways的View,当ScrollView往下滚动时，该View会直接往下滚动，而不用考虑ScrollView是否在滚动，这个flag让任意向下的滚动都会致使该view变为可见，如启用快速“返回模式”。
• exitUntilCollapsed:值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。简而言之，滚动退出屏幕，最后折叠在顶端。
• enterAlwaysCollapsed:是enterAlways的附加选项，通常跟enterAlways一块儿使用，它是指，View在往下“出现”的时候，首先是enterAlways效果，当View的高度达到最小高度时(注意你的view须要设置minHeight属性)，View就暂时不去往下滚动，直到ScrollView滑动到顶部再也不滑动时，View再继续往下滑动，直到滑到View的顶部结束。
  须要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用。

  CollapsingToolbarLayout

  CollapsingToolbarLayout继承自FrameLayout，做用是为Toolbar提供了折叠功能。
  下面介绍一些参数：
  app:contentScrim这个参数可让CollapsingToolbarLayout在收缩的时候，背景图片消失的时候，指定一个颜色。
  app:collapsedTitleGravity 指定折叠状态的标题如何放置，可选值:top、bottom等
  app:collapsedTitleTextAppearance指定折叠状态标题文字的样貌
  app:expandedTitleTextAppearance指定展开状态标题文字的样貌
  app:expandedTitleGravity 展开状态的标题如何放置
  app:titleEnabled指定是否显示标题文本
  app:toolbarId指定与之关联的ToolBar，若是未指定则默认使用第一个被发现的ToolBar子View
  app:expandedTitleMarginStart指定展开状态标题距离开始位置的高度
  app:expandedTitleMarginBottom指定展开状态标题距离底部的距离
  app:expandedTitleMarginEnd指定展开状态标题距离结束位置的高度
  app:layout_collapseParallaxMultiplier="0.7"设置视差的系数，介于0.0-1.0之间。
  app:layout_collapseMode“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。
  app:layout_anchor``app:layout_anchorGravity两个属性连同一块儿，与某一个AppBarLayout控件相关联，肯定位置。

  TextInputLayout

  TextInputLayout控件和LinearLayout彻底同样，它只是一个容器。跟ScrollView同样，TextInputLayout只接受一个子元素。子元素须要是一个EditText元素。
  EditText中有一个参数hint，这个你们都不陌生，可是若是EditText放在TextInputLayout中，则会让hint变成一个在EditText上方的浮动标签，同时还包括一个material动画。

  FloatingActionButton

  FloatingActionButton是一个圆形的按钮，跟Button同样会有点击事件。不一样的是，能够设置阴影，能够设置反馈动画。并且若是你设置的背景图片是一个方形的，会在圆形按钮中间显示。

  布局文件

  上面介绍了一些基本属性，如今看一下总体的布局文件

<?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:id="@+id/main_content"
                                                 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="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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



    <android.support.design.widget.TextInputLayout
        android:id="@+id/inputwrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <EditText
            android:id="@+id/input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="输入内容"/>

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/btn_ok"
        />

</android.support.design.widget.CoordinatorLayout>复制代码

在该布局文件中使用了Toolbar，关于它的相关属性，能够参考我以前的文章，这里再也不重复介绍。
TextInputLayout有人会问为何TextInputLayout使用app:layout_behavior="@string/appbar_scrolling_view_behavior",其实为了适配好位置，最好在外面加一层NestedScrollView，由于涉及到滑动嘛，可是这里暂时不用，由于那是下一篇文章的内容。

代码

下面贴出相关的代码：

public class CollapsingActivity extends AppCompatActivity {
    private FloatingActionButton okBtn;
    private EditText editText;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing);
        initToolBar();
        TextInputLayout inputWrapper = (TextInputLayout) findViewById(R.id.inputwrapper);
        editText = (EditText)findViewById(R.id.input);
        okBtn = (FloatingActionButton)findViewById(R.id.btn_ok);
        okBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                hideKeyboard();
                Snackbar mySnackbar = Snackbar.make(findViewById(R.id.main_content),editText.getText().toString(),Snackbar.LENGTH_SHORT);
                mySnackbar.setAction(editText.getText().toString(), new OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(CollapsingActivity.this,"click Snackbar",Toast.LENGTH_LONG).show();
                    }
                });
                mySnackbar.show();

            }
        });
        okBtn.setCompatElevation(0);
        inputWrapper.setHintAnimationEnabled(true);
        inputWrapper.setHint("请输入内容");
    }
    private void hideKeyboard() {
        View view = getCurrentFocus();
        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }
    private void initToolBar(){
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        setTitle("CollapsingActivity");//设置标题
        toolbar.setNavigationIcon(R.mipmap.ic_launcher_round);//设置返回键，我这里没有，就有icon代替吧
        toolbar.setNavigationOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });//返回监听
        toolbar.setSubtitle("by deep");//设置副标题
    }
}复制代码

简单说一下代码的逻辑，在界面上有个输入框，输入内容，点击FloatingActionButton，会将内容作一个Snackbar的展现，这是在底部会有一个Snackbar，Snackbar能够经过setAction方法设置点击事件，它的第一个参数是按钮显示的文字，第二个参数是点击事件，我这里是点击Snackbar会再弹出一个Toast。
关于Snackbar的初始化，可使用make方法，这里须要注意它的参数：

• 第一个参数是一个view，我试过，能够设置界面任何一个View，可是最好设置为父容器CoordinatorLayout，这样的话，会有一个滑动消除的手势。
• 第二个参数是显示的内容，第三个参数是显示时长。

  自定义behavior

  在上文中提到过CoordinatorLayout功能如此强大，全依赖于Behavior对象。
  咱们先看一下源码，Behavior是一个抽象类，public static abstract class Behavior<V extends View>,咱们能够根据View随意去实现。
  源码中的实现这个抽象类的有如下几个：

1. AppBarLayout.Behavior;
2. AppBarLayout.ScrollingViewBehavior;
3. FloatingActionButton.Behavior;
4. Snackbar.Behavior;
5. BottomSheetBehaviro;
6. SwipeDismissBehavior;
7. HeaderBehavior;
8. ViewOffsetBehavior;
9. HeaderScrollingViewBehavior;
   其中也有抽象类。
   上面咱们用到的就有ScrollingViewBehavior和FloatingActionButton.Behavior，因为FloatingActionButton.Behavior默认就是设置好的，因此咱们没有在布局文件中写。
   那么咱们如今能够从新写一个FloatingActionButton的Behavior。
   在写以前最好去读一下Behavior这个抽象类，其中不少概念和关联须要弄明白。
   其中重要的两个概念

• child 它是一个View， 是该Behavior的关联对象，也即Behavior所要操做的对象
• dependency ，也是个View，是 child的依赖对象，同时也是Behavior对child进行操做的根据
  例如咱们上面那个布局文件中child就是FloatingActionButton，dependency就是AppBarLayout。
  还有一些方法：
  layoutDependsOn用来肯定依赖关系，原文是：

  Determine whether the supplied child view has another specific sibling view as a layout dependency.
  意思是，这个view有没有兄弟view。

onDependentViewChanged

Respond to a change in a child's dependent view
当咱们的 dependency 发生改变的时候，这个方法会调用，而咱们在 onDependentViewChanged 方法里根据需求作相应的界面处理便可。
咱们简单写一个FloatingActionButton跟随AppBarLayout移动的例子：
```
public class CustomBehavior extends CoordinatorLayout.Behavior {

public CustomBehavior() {
}

public CustomBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
   return dependency instanceof AppBarLayout;
}

@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    float translationY = Math.abs(dependency.getTop());
    Log.e("xxxxxx ","translationY="+translationY);
    child.setY(800-translationY);
    return true;
}复制代码

}

而后设置到布局文件的对应位置：复制代码

```
自定义Behavior的方式就介绍到这。

总结

原本想在文章中插图，可是因为动图过大，上传老是失败，因此，仍是请感兴趣的朋友运行demo看一下效果便可。后面的文章仍是对本文的延伸，增添了一些新的组件，敬请关注。
有问题能够给我留言，或者关注个人公众号留言。