CoordinatorLayout控件的使用
##CoordinatorLayout与AppBarLayout
###注意点
发现TabLayout遮挡了ViewPager,ViewPager在Toolbar的下面
通过添加app:layout_behavior="@string/appbar_scrolling_view_behavior"
修改
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
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:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.fj.second.AppBarLayoutActivity"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_app_bar_layout"/>
<!--"@string/appbar_scrolling_view_behavior"系统的-->
<!--不加app:layout_behavior="@string/appbar_scrolling_view_behavior"
会导致RecyclerView在Toolbar下面,被TabLayout遮盖-->
##CardView
###步骤
1.添加compile 'com.android.support:cardview-v7:24.2.1'
2.布局中使用
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
android:layout_height="wrap_content">
<!--xmlns:cardview="http://schemas.android.com/apk/res-auto"和xmlns:app="http://schemas.android.com/apk/res-auto"效果一样-->
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="4dp">
<!--不加android:layout_margin,CardView全部紧凑在一起,看不到效果,而且必须加载CardView上,不能加在外层RelativeLayout-->
<!--cardview:cardElevation增加CardView的海拔高度,如果使用xmlns:app的命名空间要使用app:cardElevation-->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/item_list_iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/desc"
tools:src="@drawable/icon_01"/>
<TextView
android:id="@+id/item_list_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_toEndOf="@id/item_list_iv_icon"
android:layout_toRightOf="@id/item_list_iv_icon"
android:textSize="20sp"
android:textStyle="bold"
tools:text="图片描述"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
###注意点
- CardView使用失效:需要在CardView的标签中添加layout_margin,不然不能显示出来海拔效果,在CardView的外层使用layout_margin也不会显示
- 使用上面的修改,会在SDK低于21的手机上,出现浪费空间问题,参照关于使用 CardView 开发过程中要注意的细节进行修改
我们需要自定义一个 dimen 作为 CardView 的 Margin 值:
1.创建 /res/value 和 /res/value-v21 资源文件夹于项目对应 Module 目录下,前者放置旧版本/通用的资源文件(了解的可以跳过),后者放置 21 及更高 SDK 版本的资源文件。
2.在 value 内的 dimen.xml 创建一个 Dimension ( 属性),随便命个名(如 xxx_card_margin)并填入数值 0dp。
3.接着在 value-v21 文件夹内的 dimen.xml 创建名字相同的 Dimension,并填入你期望的预留边距(一般和 CardElevation 阴影大小相同)
4.最后,在你布局中的 CardView 中设置android:layout_margin="@dimen/xxx_card_margin"
这样依赖就解决了低版本中边距过大或者视觉效果不统一的问题了。
- CardView点击效果
如果你是用了 AppCompat v7 支持库:
那么你可以直接给 CardView 加上 android:foreground="?attr/selectableItemBackground" 这个属性会在 Lollipop 上自动加上 > Ripple 效果,在旧版本则是一个变深/变亮的效果。
- 使用app:cardElevation增加CardView的海拔高度,需要引入命名空间
##CollapsingToolbarLayout
###注意点
-
Collapsing title:ToolBar的标题,当CollapsingToolbarLayout全屏没有折叠时,title显示的是大字体,在折叠的过程中,title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title
-
Content scrim:ToolBar被折叠到顶部固定时候的背景,你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim="?attr/colorPrimary"来改变背景
-
Status bar scrim:状态栏的背景,调用方法setStatusBarScrim(Drawable)。还没研究明白,不过这个只能在Android5.0以上系统有效果
-
Parallax scrolling children:CollapsingToolbarLayout滑动时,子视图的视觉差,可以通过属性app:layout_collapseParallaxMultiplier="0.6"改变
-
CollapseMode :子视图的折叠模式,有两种"pin":固定模式,在折叠的时候最后固定在顶端;"parallax":视差模式,在折叠的时候会有个视差折叠的效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用
使用app:layout_collapseMode="pin"
不使用app:layout_collapseMode="pin"
-
Toolbar 的高度layout_height必须固定,不能 "wrap_content",否则Toolbar不会滑动,也没有折叠效果
-
为了能让FloatingActionButton也能折叠且消失出现,我们必须给FAB设置锚点属性
app:layout_anchor="@id/appbar"
意思是FAB浮动按钮显示在哪个布局区域 且设置当前锚点的位置app:layout_anchorGravity="bottom|end|right"
意思FAB浮动按钮在这个布局区域的具体位置。两个属性共同作用才是的FAB 浮动按钮也能折叠消失,出现 -
给需要有折叠效果的组件设置 layout_collapseMode属性
firstapp:
secondapp:
Android M新控件之AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout的使用