Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar基础用法
程序员文章站
2022-03-13 17:20:35
1动画效果如图所示,简单地说就是一个可以伸缩折叠的Toolbar 2用到的控件,一个一个说,CoordinatorLayout是最外层的布局,AppBarLayout是绿色+红色部分,CollapsingToolbarLayout是绿色部分,Toolbar是返回键那一行,至于下面来回切换的页面,就是 ......
1动画效果如图所示,简单地说就是一个可以伸缩折叠的Toolbar
2用到的控件,一个一个说,CoordinatorLayout是最外层的布局,AppBarLayout是绿色+红色部分,CollapsingToolbarLayout是绿色部分,Toolbar是返回键那一行,至于下面来回切换的页面,就是一个帧布局放了三个fragment,没什么好说的。
3看布局代码
<?xml version="1.0" encoding="utf-8"?>
<!--最外层是CoordinatorLayout,上面已经说过了--> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000"> <!--绿色+红色的部分,一共280dp--> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="280dp"> <!--绿色的部分,240dp,scroll属性就是滑动的,exitUntilCollapsed属性就是保留最小高度值的,可以自己设置也可以不设置(不设置就应该是Toolbar的高度了吧,这一切都是我猜的。。),我就没设置最小高度
title属性不设置也可以,根本不影响--> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="240dp" app:contentScrim="#f00" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:title=" "> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#0f0" /> <!--pin属性就是设置控件不滑动的,所以效果图里绿色的在往上滑,但是返回键三个字不跟着往上滑,原因就在这里--> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="40dp" app:layout_collapseMode="pin"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="返回鍵" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> <!--红色区域,三个按钮那里,同样在AppBarLayout里面,但是他没有设置scroll属性,所以滑到这里的时候就停止了,也就是效果图的效果--> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:background="#f00" android:orientation="horizontal"> <TextView android:id="@+id/tv1" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="1" android:textColor="#fff" /> <TextView android:id="@+id/tv2" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="2" android:textColor="#fff" /> <TextView android:id="@+id/tv3" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="3" android:textColor="#fff" /> </LinearLayout> </android.support.design.widget.AppBarLayout> <!--用来切换fragment的,没什么好说的了--> <FrameLayout android:id="@+id/framelayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" app:layout_behavior="@string/appbar_scrolling_view_behavior"></FrameLayout> </android.support.design.widget.CoordinatorLayout>
4代码地址 https://github.com/wyp780/CoordinatorLayoutToolBar.git