Android多个toolbar,Android CollapsingToolbarLayout 和ToolBar多种实践

最新推荐文章于 2024-04-09 04:01:56 发布

水精灵琼子

最新推荐文章于 2024-04-09 04:01:56 发布

阅读量464

点赞数

文章标签： Android多个toolbar

项目原因导致关于Toolbar的实践笔记一拖再拖…都快忘记实现的过程了( - - ! )。之前粗略用过CollapsingToolbarLayout 记录自己实现的简便版的RecyclerView,不过项目中再次用到的时候还有不少磕磕绊绊。

效果：

c6b4e85cac76

first.gif

布局

头部背景是我随便切的一个图片。首先明确一点：整体伸缩布局是包裹在CoordinatorLayout中的，并且非头部的部分，不论是FrameLayout还是RecyclerView或者其他的View，都需要添加属性：app:layout_behavior="@string/appbar_scrolling_view_behavior"

这里展开一点题外话,我们在网上寻找到的CoordinatorLayout的相关资料，可能一般看到的基本XML布局是这样的：

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:fitsSystemWindows="true"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/AppTheme.AppBarOverlay">

其中CoordinatorLayout用到的属性：

android:fitsSystemWindows="true"

需要注意使用场景。

可以看到图中我用了多个Fragment，其他的部分Fragment的布局中我也同样使用了android:fitsSystemWindows="true"这个属性，但是在项目全局的主题中，我已经设置了"no titlebar"。设置以上属性以后，会导致状态栏会自动调整view的padding以便给system windows留出空间，多个同级布局使用此参数，将导致切换过程布局抖动。

我建议如已经隐掉系统的titlebar的布局或者Activity，就无需设置这个属性了。

这里有个关于设置android:fitsSystemWindows属性的效果图，可以看一下：fitsSystemWindows

我们接着来看整体布局:

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:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#66ffffff">

android:id="@+id/recyclerview"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_width="match_parent"

android:layout_height="match_parent"

不论主题布局的层级如何，设置app:layout_behavior="@string/appbar_scrolling_view_behavior"就可以使CoordinatorLayout计算滑动子view了。

toolbar

toolbar 中的头部布局，要控制哪块布局是需要滑动效果，哪些是不需要的，这里有个XML对属性的说明比较清晰:

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/main_content"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:layout_scrollFlags="scroll|enterAlways" />

android:id="@+id/tabs"

app:tabIndicatorColor="@color/white"

app:tabSelectedTextColor="@color/gray"

app:tabTextColor="@color/white"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior" />

图中我的实例中头部有三个布局：

android:id="@+id/appbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#66ffffff"

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

android:layout_width="match_parent"

android:layout_height="match_parent"

app:contentScrim="?attr/colorPrimary"

app:layout_scrollFlags="scroll|exitUntilCollapsed"

app:expandedTitleMarginStart="48dp"

android:background="@mipmap/rectangle"

app:expandedTitleMarginEnd="64dp">

android:id="@+id/tab"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabTextColor="#ffffff"

app:layout_collapseMode="parallax"

app:layout_collapseParallaxMultiplier="0.8"

android:layout_marginTop="120dp"

android:paddingBottom="15dp"

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:contentInsetLeft="0dp"

app:contentInsetStart="0dp"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

app:layout_collapseMode="pin">

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/toolbar1"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/layout1_tv"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="布局一"

android:textColor="#ffffff"

android:textSize="20sp"/>

android:id="@+id/toolbar2"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal"

android:visibility="gone">

android:id="@+id/layout2_tv1"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:text="布局二"

android:textColor="#ffffff"

android:textSize="20sp"/>

android:id="@+id/layout2_tv2"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:gravity="center"

android:text="布局二"

android:layout_marginLeft="20dp"

android:textColor="#ffffff"

android:textSize="20sp"/>

TabLayout中的第三个布局是我需要实现滑动效果的

c6b4e85cac76

布局三

设置的layout_scrollFlags有如下几种选项：

scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

接着基本头部布局设置完成，需要完成的是头部滑动完成以后，布局一和布局二的显隐。我们实现Appbarlayout的addOnOffsetChangedListener监听：

/** appbarLayout **/

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

@Override

public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

if(verticalOffset == 0){

view1.setVisibility(View.VISIBLE);

view2.setVisibility(View.GONE);

//alpha 变化

setToolbar1Alpha(255);

}else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){

view1.setVisibility(View.GONE);

view2.setVisibility(View.VISIBLE);

//alpha 变化

setToolbar2Alpha(255);

}else{

int alpha=255-Math.abs(verticalOffset);

if(alpha<0){

//收缩toolbar

view1.setVisibility(View.GONE);

view2.setVisibility(View.VISIBLE);

setToolbar2Alpha(Math.abs(verticalOffset));

}else{

//张开toolbar

view1.setVisibility(View.VISIBLE);

view2.setVisibility(View.GONE);

setToolbar1Alpha(alpha);

}

});

布局是图片的话，alpha变化就会有了。