Android Material Design 兼容库控件使用(二)
学习完上一篇后,再来学习剩余的4个常用控件。一般情况下,都是将其组合使用的,所以这一篇自然也是通过一个实例来整体学习它们。那么它们内部之间有什么关联呢?我们一起来看看。
1.CoordinatorLayout
个人觉得Design 兼容库的核心就是CoordinatorLayout,大部分控件都是围绕它来使用的。为什么这么说呢?还记得上一篇中FloatingActionButton和Snackbar的效果吗?FAB随着Snackbar的移动而同步平移,这个就是CoordinatorLayout带来的。
其实CoordinatorLayout是一个增强版的FrameLayout,主要是协调子View之间的交互行为。它能协同其子View的原理是什么呢?主要依赖于NestedScrolling,它包括NestedScrollingParent及NestedScrollingChild这两个接口。CoordinatorLayout实现了前者,而滑动控件就需要去实现后者,这样才能产生交互,就像后面实例中会使用到的RecyclerView。我们要做的就是在子View中添加一个属性 layout_behavior
,可以使用系统定义好的固定字符串 @string/appbar_scrolling_view_behavior
。
当然,系统已经有了一些behavior,我们自然可以参照它去实现自己的behavior。不过,感觉真正要理清其中的原理还需要些时日,要系统的去学习它,那么只能过段时间再来补充了。好吧,又给自己挖了一个坑。
2.AppBarLayout
AppBarLayout其实是一个垂直的LinearLayout。为什么会有它的出现?我们都知道Toolbar吧,将它放在CoordinatorLayout中会毫无改变,也无法去操控Toolbar,所以就有了AppBarLayout的出现。AppBarLayout就是为了让Toolbar这样的子布局在CoordinatorLayout产生交互动画,使之更加灵活。
我们该如何去使用它呢?只需要在AppBarLayout的子View中添加属性 app:layout_scrollFlags
即可。它包括scroll,enterAlways,enterAlwaysCollapsed,snap,exitUntilCollapsed五个值。不过呢,scroll是必须要有的,再搭配其他四个值才能产生效果。想了解这几个值的具体含义,请看这里。
当然,也可以给AppBarLayout添加滑动偏移监听事件,代码如下。
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(verticalOffset <= -mImageView.getHeight()/2) {
mCToolbarLayout.setTitle("萤火之森");
}else {
mCToolbarLayout.setTitle("");
}
}
});
这里是滑动到图片的一半时才显示Title。
3.CollapsingToolbarLayout
CollapsingToolbarLayout继承于Framelayout,可以做到折叠appbar的效果。所以,通常与AppBarLayout及Toolbar一起使用。先来看下它常用的属性。
属性 | 功能 |
---|---|
title | 布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧,如无该属性时,默认为Toolbar的title |
statusBarScrim | 顶部视图折叠状态下,状态栏的遮罩色 |
contentScrim | 内容遮罩,上下滚动时图片上面显示和隐藏的遮罩色,Toolbar位置的的背景色 |
layout_collapseMode | 折叠模式,设置其他控件滚动时自身的交互行为。parallax:折叠视差效果;pin:固定别针效果。作用于子View中 |
layout_collapseParallaxMultiplier | 不折叠视差系数,配合parallax模式使用,默认值为0.5。作用于子View中 |
expandedTitleMarginStart | 设置扩张时title向左填充的距离 |
expandedTitleMarginEnd | 设置收缩时title向左填充的距离 |
效果等会下面一起展示,就不细展开了,可以自行简单增减属性测试下。
4.TabLayout
过去我们用tab页还需要自己定制或者使用第三方指示器,如今有了TabLayout ,再也不怕了。那我们就来了解下它吧。
添加Tab项。
mTabLayout.addTab(mTabLayout.newTab().setText("Tab1"));
设置Tab项的模式:MODE_SCROLLABLE,可滚动;MODE_FIXED,固定。
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
设置Tab项Title的颜色,前者为普通Title,后者为选中Title。
mTabLayout.setTabTextColors(ContextCompat.getColor(this, R.color.gray), ContextCompat.getColor(this, R.color.white));
设置Tab项指示器颜色。
mTabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.white));
一般情况下,TabLayout 都是和ViewPager一起使用的。所以TabLayout 提供了一个方法 setupWithViewPager
用来和ViewPager绑定在一起。同时需要重写ViewPager的 getPageTitle
方法,是为了设置Tab项的Title。
这样,它们四个控件的基本使用方法就介绍完了,下面来看下它们能组合成什么样的效果。
5.综合实例
这个实例中还涉及到了Fragment以及RecyclerView的相关知识,比较基础点的,如有需要,可以查看鸿洋的相关文章。这里就不多说了,看下主布局文件吧。
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/coordinator_layout"
tools:context=".MDActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/appbar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/toolbar_layout"
app:title="萤火之森"
app:expandedTitleMarginStart="50dp"
app:expandedTitleMarginEnd="64dp"
app:statusBarScrim="?attr/colorPrimaryDark"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="@+id/head_image"
android:src="@mipmap/head_image"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/tool_bar"
app:title="MDDemo22"
app:titleTextColor="#000000"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_layout"
android:background="@color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rp_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fab"
android:layout_margin="16dp"
android:src="@mipmap/icon_share"
app:layout_anchor="@id/rp_content"
app:layout_anchorGravity="bottom|right"
app:backgroundTint="?attr/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>
如有不懂,可以对照上面介绍中的属性。终于可以看整个的效果图了,满满的期待啊!!!
从效果图中可以看出来,这个并不完美,就是在瀑布流中横竖间距不相等,但是我在真机上显示是相等的,具体原因我还不太清楚。还有一个问题,就是当我先将瀑布流滑下去,再将Tab页切换至“电影”页,最后再切换回来滑动至最上时,瀑布流会重新初始化,即重新排列。但是滑到“图书”页就不会出现此现象。由于能力有限,这两个问题还没解决,如有知道者,麻烦告诉我下。后面看有没时间,再回头仔细研究下。问题二可以看下面的演示效果。
又收获了点知识(其实花的时间有点多),掌握了几个控件的基本使用。马上进入下个知识点的学习,看了些,感觉基础用法都有些难度,那是什么呢,先不剧透啦。
Demo下载请看这里。
PS:本人水平实在有限,如有错误之处,还望不吝赐教!
参考:
Android Material Design 兼容库的使用详解
Android CoordinatorLayout 实战案例学习《二》
Android TabLayout 分分钟打造一个滑动标签页