CoordinatorLayout的使用-白红宇

CoordinatorLayout的使用

阅读量：6121 次

发布时间：2019-06-21

本文共 3841 字，大约阅读时间需要 12 分钟。

官方文档中对CoordinatorLayout有如下的描述：

CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:

As a top-level application decor or chrome layout

As a container for a specific interaction with one or more child views

即，可以作为顶层布局，或者协调子布局的容器。

与snackbar的配合使用。

先看一个效果图。当弹出snackbar之后，floatbutton的位置会相应向上提升一个snackbar的高度。并且，通过右滑操作，可以删除这个snackbar。这在普通的Layout容器中无法实现。

CoordinatorLayout与Snackbar

显示SnackBar的代码：

Snackbar.make(view, "Hello. I am Snackbar!", Snackbar.LENGTH_SHORT).setAction("OK", null).show();

在显示snackbar的时候，需要传入一个view，snackbar会从view开始向上寻找父view，直到找到一个顶级view或者CoordinatorLayout，然后显示在这个view的底部。如果是CoordinatorLayout，则会有上述的高级效果。

上述的页面布局代码：

Activity中的java代码：

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view,"FAB",Snackbar.LENGTH_LONG)                        .setAction("cancel", new View.OnClickListener() {                            @Override                    c void onClick()                        }.show();            }        });    }}

CoordinatorLayout实现可隐藏的Toolbar

首先要说明的是，老旧的ActionBar并不能与CoordinatorLayout兼容。需要使用较新的Toolbar。

先看效果图：

（向下滑动列表时）

（向上滑动列表时）

这里需要使用AppBarLayout讲Toolbar包裹起来：

注意，在比较旧的版本中，AppBarLayout必须作为CoordinatorLayout的第一个子元素，但是现在好像可以只作为AppBarLayout的直接子元素就可以了。

为了实现向上滑动时能够隐藏Toolbar，需要在Toolbar中添加如下的属性：

app:layout_scrollFlags="scroll|enterAlways"。

要实现滑动的高级效果，Scroll标志是必须的。flags还有几个取值：

scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。

enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。

enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

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

与AppBarLayout同级，作为CoordinatorLayout的另一个直接子元素的则是产生滑动事件的view。这里ListView并不兼容，可以使用RecycledView。RecycledView是一个高度解耦的列表视图，提供子视图的回收功能。并且，布局方式高度可定制。对控件的操作变成了面向ViewHolder的操作。

布局文件：

注意，列表视图中有这样一个属性：app:layout_behavior="@string/appbar_scrolling_view_behavior"，这个属性告诉CoordinateLayout，我希望我的滑动操作能够引起Toolbar的变化。CoordinatorLayout就会去检查Toolbar的scrollFlags，并在滑动时作出相应的调整。

同时，这个属性还可以让下方的视图顶端保持在Toolbar的下方，而不是被Toolbar覆盖。