美文网首页
Material Design: CollapsingToolb

Material Design: CollapsingToolb

作者: 747a945a4501 | 来源:发表于2016-05-04 11:48 被阅读652次

简述


今天来给大家讲一讲CollapsingToolbarLayout的使用,网上有很多的例子,但是讲的都比较浅显。

怎么导入?


AppBarLayout是Support包里面提供的一个控件。所以要使用这个控件,就要引用Support包。引入比较简单,就是在你的运行module里面的Gradle文件,添加如下的一行代码:

dependencies{

........

compile'com.android.support:design:23.3.0'

}

Sync Project with Gradle 一下,然后在你的布局文件里面,即可使用。

它是什么?


首先看名字,可伸缩折叠的Toolbar。 看类的注释:

上面说,它是实现了可折叠的app bar。他只能是AppBarLayout的子控件。他有如下的特性:

1. Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。

2. Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。

3. Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。还没研究明白,不过这个只能在Android5.0以上系统有效果。

4. Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。

5. CollapseMode :子视图的折叠模式,有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

它有什么?


我们继续往下看他的代码,看看有哪些对我们有用。

他本身接受那些xml的属性?看它的代码,我们发现有很多,如下图。

看名称就知道, 设置展开和收缩时候抬头的位置 抬头前后左右的margin值 设置标题的文字 设置相应的背景

那它的子控件有接受哪些xml属性呢?他既然是ViewGroup,我们看看LayoutParams:

collapseParallaxMultiplier:来设置视差因子

collapseMode:上面已经有介绍,pin or PARALLAX, 默认是COLLAPSE_MODE_OFF

/**

* The view will act as normal with no collapsing behavior.

*/

public static final int COLLAPSE_MODE_OFF=0;


怎么使用?


这个布局文件

1. 父容器依然是CoordinatorLayout.

2. CollapsingToolbarLayout 必须是AppBarLayout的子容器。所以结果就是<AppBarLayout><CollapsingToolbarLayout></CollapsingToolbarLayout> </AppBarLayout>

3. Toobar不要设置背景色,不然就不能实现Material的效果。

4. 在Scroll的控件上面 设置行为 behavior.

今天就写到这。










相关文章

网友评论

      本文标题:Material Design: CollapsingToolb

      本文链接:https://www.haomeiwen.com/subject/tpxrrttx.html