Android材料设计库之折叠式布局你应该知道的一切

github源码地址：https://github.com/geduo83/AndroidMaterialDesign/tree/master/module_drawerlayout_coordinatorlayout

在Android5.0之后，Android给我们提供了非常丰富关于UI设计的材料设计库，其中就有非常实用的折叠式布局

常见问题：

1. ToolBar中自定义的title不能居中

 设置CollapsingToolbarLayout的app:titleEnabled="false"即可

背景图片没有完全沉浸在状态栏里边

设置即可

常见模板布局1：

效果图：

image image.gif

布局代码：

<?xml version="1.0" encoding="utf-8"?>

image.gif

常见模板布局2：

效果图：

image image.gif

布局代码：

<?xml version="1.0" encoding="utf-8"?>

image.gif

1.CoordinatorLayout

 根布局必须使用CoordinatorLayout，即协调式布局，用来协调AppBarLayout和Scrollview之间的滚动关系

2.AppBarLayout

AppBarLayout必须依赖父控件CoordinatorLayout，AppBarLayout为ChildrenView提供了一个`app:layout_scrollFlags属性来设置ScrollView滚动时Childview的滚动模式`，ScrollFlags共有五种常量值，对应的值为：scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed；

2.1 app:layout_scrollFlags="scroll" :往下滚ScrollView优先滚动

` image image.gif

2.2 app:layout_scrollFlags="scroll|enterAlways" :往下滚ChildView优先滚动

` image image.gif

2.3 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"：往下滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView，直到ScrollView滚动完毕再开始滚动ChildView

` image image.gif

2.4 app:layout_scrollFlags="scroll|exitUntilCollapsed"：往上滚动ChildView优先滚动，且滚动到指定的最小高度，然后开始滚动ScrollView

` image image.gif

2.5 app:layout_scrollFlags="scroll|snap"：往下滚ScrollView优先滚动，然后ChildView开始滚动，但是ChildView必须滚动到一定的比例才能继续往下滚，否则ChildView滚动没有到达一定比例，手松了之后就会回弹回去，类似ViewPager左滑右滑的那种效果

` image image.gif

3.CollapsingToolbarLayout

CollapsingToolbarLayout必须依赖父控件AppBarLayout，其中非常重要的几个属性如下

3.1 title
标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。注意，没有设置这个属性时，默认使用Toolbar的标题；
3.2 statusBarScrim
顶部视图折叠状态下，状态栏的遮罩色。通常这样设置：app:statusBarScrim="?attr/colorPrimaryDark"，即style样式中定义的沉浸式状态栏颜色。这个属性要和getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；
3.3 contentScrim
内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；
3.4 layout_collapseMode：ChildView使用
折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果，比如上述效果图中的图片；pin，固定别针效果，比如上图中的Toolbar；
3.5 layout_collapseParallaxMultiplier：ChildView使用
不折叠视差系数，配合parallax模式使用，取值有点类似alpha（不透明度），在0.0 ～ 1.0之间，默认值为0.5。当设置为1.0，滚动列表时图片不会折叠移动；

4.Toolbar

4.1Toolbar初始设置

Toolbar toolbar = findViewById(R.id.toolbar);setSupportActionBar(toolbar);getSupportActionBar().setDisplayShowTitleEnabled(false);toolbar.setNavigationOnClickListener(new View.OnClickListener(){    @Override    public void onClick(View v) {        onBackPressed();    }});

image.gif

4.2 Activity样式设置：

image.gif

问题反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

QQ：303704981
email：geduo_83@163.com
weibo：@geduo_83

关于作者

var geduo_83 = {    nickName  : "geduo_83",    site : "http://www.weibo.com/geduo83"}

image.gif

常见问题：

常见模板布局1：

常见模板布局2：

1.CoordinatorLayout

2.AppBarLayout

3.CollapsingToolbarLayout

4.Toolbar

问题反馈

关于作者

更多相关文章

随机推荐