欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar基础用法

程序员文章站 2022-03-13 17:20:35
1动画效果如图所示,简单地说就是一个可以伸缩折叠的Toolbar 2用到的控件,一个一个说,CoordinatorLayout是最外层的布局,AppBarLayout是绿色+红色部分,CollapsingToolbarLayout是绿色部分,Toolbar是返回键那一行,至于下面来回切换的页面,就是 ......

1动画效果如图所示,简单地说就是一个可以伸缩折叠的Toolbar

Android CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+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