发表于: 2018-11-29 21:30:27

0 718


一、今天完成的事情

CoordinatorLayout、AppBarLayout 、CollapsingToolBarLayout

1.CoordinatorLayout由Design Support库提供,简单来说就是一个加强版的FrameLayout,它可以监听所有子控件的各种事件,然后自动做出合理的响应,View的具体响应动作是由Behavior来指定的,Google为我们内置了一些Behavior,比如"appbar_scrolling_view_behavior"用来协调AppBaralyout和ScrollView滑动的Behavior,如果有特殊需求,也可以自定义

Behavior。


2.AppBarLayout

AppBarLayout继承自LinearLayout,它是一个垂直方向的LinearLayout,在LinearLaout的基础上添加了一些Material Design的设计概念和特性,即滑动手势。它可以定制某个可滑动的View(比如:ScrollView、ListView、RecyclerView...)滑动手势发生改变时,内部的子View该做什么动作。子View需要提供滑动时他们期望的响应动作Behavior,在xml中设置属性

app:layout_scrollFlags或者在代码中使用setScrollFlags(int)方法来指定Behavior。

注意:AppbarLayout依赖于CoordinatorLayout,必须将其用于CoordinatorLayout的直接子View,如果将AppBarLayout放在其他ViewGroup中,那么它的特殊功能无法生效,就是一个普通的LineaLayout。

用法示例

<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
          ......
           app:layout_scrollFlags="scroll|enterAlways|snap"/>  <!--Behavior-->

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

   <android.support.v4.widget.SwipeRefreshLayout
        ......
       app:layout_behavior="@string/appbar_scrolling_view_behavior" <!--Behavior-->

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

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

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

AppBarLayout的子View有如下5种动作,通过app:layout_scrollFlags属性来设置

scroll,enterAlways,enterAlwaysCollapsed,exitUntilCollapsed,snap

scroll

子View会随着可滚动的ScrollView一起滚动

enterAlways

配合scroll一起使用app:layout_scrollFlags=“scroll | enterAlways”

当ScrollView向下滚动时,子View会立刻向下滚动显示出来,而不是像scroll那样等到滑动到子view本来的位置才会显示。

enterAlwaysCollapsed 

 enterAlwaysCollapsed 是对enterAlways 的补充,当ScrollView 向下滑动的时候,滑动View(也就是设置了enterAlwaysCollapsed 的View)下滑至折叠的高度,当ScrollView 到达滑动范围的结束值的时候,滑动View剩下的部分开始滑动。这个折叠的高度是通过View的minimum height (最小高度)指定的。

exitUntilCollapsed

也是配合scroll使用当ScrollView向上滑出屏幕时,滑动View先响应滑动事件,滑动至折叠高度,也就是通过minimum height 设置的最小高度后,就固定不动了,再把滑动事件交给 scrollview 继续滑动。

snap

在滚动结束后,如果view只是部分可见,它将滑动到最近的边界。比如,如果view的底部只有

25%可见,它将滚动离开屏幕,而如果底部有75%可见,它将滚动到完全显示。


3.CollapsingToolBarLayout

CollapsingToolbarLayout 是对Toolbar的包装并且实现了折叠appbar效果,使用时,要作为 AppbarLayout 的直接子View。

特性

(1) Collapsing title(折叠标题) 当布局全部可见的时候,title 是最大的,当布局开始滑出屏幕,title 将变得越来越小,你可以通过setTitle(CharSequence) 来设置要显示的标题。

注意:Toolbar 和CollapsingToolbarLayout 同时设置了title时,不会显示Toolbartitle而是显示CollapsingToolbarLayout 的title,如果要显示Toolbar 的title,可以在代码中添加如下代码:

collapsingToolbarLayout.setTitle("");

(2)Content scrim(内容纱布) 当CollapsingToolbarLayout滑动到一个确定的阀值时将显示或者隐藏内容纱布,可以通过setContentScrim(Drawable)来设置纱布的图片。

提醒:纱布可以是图片也可以是颜色色值,如果要显示颜色,在xml 布局文件中用contentScrim属性添加,如下:

app:contentScrim="@color/colorPrimary"

(3)Status bar scrim(状态栏纱布) 当CollapsingToolbarLayout滑动到一个确定的阀值时,状态栏显示或隐藏纱布,可以通过setStatusBarScrim(Drawable)来设置纱布图片。

同内容纱布一样,状态栏纱布可以是图片也可以是一个颜色值,如果要显示颜色值,在xml 中用statusBarScrim 属性指定。

(4)Parallax scrolling children(有视差地滚动子View) 让CollapsingToolbarLayout 的子View 可以有视差的滚动,需要在xml中用 添加如下代码:

app:layout_collapseMode="parallax"

(5)Pinned position children(固定子View的位置)子View可以固定在全局空间内,这对于实现了折叠并且允许通过滚动布局来固定Toolbar 这种情况非常有用。在xml 中将collapseMode设为pin,代码如下:

 app:layout_collapseMode="pin"


二、明天的计划

安卓的缓存机制


三、遇到的问题    

如何实现在RecyclerView中插入日期,日期下是当天的新闻,效果如下

四、收获

CollapsingToolbarLayout 、AppbarLayout、CoordinatorLayout 3个View的使用,总的来说,CoordinatorLayout 是协调子View的,通过Behavior指定子View动作。AppbarLayout就是一个竖直方向的LinearLayout,只不过它添加了一些材料的概念和特性,可以定制子View的滑动。CollapsingToolbarLayout 是对Toolbar 的包装,它有5个特性,Collapsing title、Content scrim、Status bar scrim、Parallax scrolling children、Pinned position children。这个三个View配合使用,可以做出一些很炫酷的UI效果。需要注意的是:AppbarLayout 要作为CoordinatorLayout 的直接子View使用,而CollapsingToolbarLayout 要作为AppbarLayout 的直接子View 使用,否则,上面将的特性是没有效果的。




返回列表 返回列表
评论

    分享到