coordinatorlayout toolbar title居中并且返回按钮变换样式

最近开发一个特效需要使用 Coordinatorlayout+AppBarLayout+CollapsingToolbarLayout+Toolbar 实现一个吸顶的效果。

其中有个需求是toolbar的title居中。

第一步：需要在CollapsingToolbarLayout添加app:collapsedTitleGravity="center"；设置收起时CollapsingToolbarLayout的title在toolbar中居中显示。

第二步：app:collapsedTitleTextAppearance="@style/Toolbar.TitleText"设置收起时title文本样式。

第三步：给toolbar设置

app:contentInsetLeft="0dp"

app:contentInsetStart="0dp"

第三步是隐藏的一个坑。一开始没有设置这个title总是中间偏右一些。因为toolbar的center是把左侧的navigater刨除后开始计算的。所以需要设置开始的其实位置。

 

下面一个坑是有个需求，返回按钮上滑到一定位置的时候改变样式，把一个×换成<的图标。

首先因为有要求要title居中，又不想自定义个ToolBar所以直接放弃了使用原生的toolbar的返回按钮。

第二，经过调研发现使用一个和AppBarLayout平级的ImageView也无法满足这个需求。因为当CollapsingToolbarLayout折叠起来以后会覆盖掉返回按钮的ImageView，所以也放弃了。

最后想起来了FloatingActionButton传说这个控件一直在Z轴最上层。最后使用该控件的确实现了需求。布局文件如下。记录下。

<?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:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".ui.mine.MinePageActivityNew">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="260dp"
            app:collapsedTitleGravity="center"
            app:collapsedTitleTextAppearance="@style/Toolbar.TitleText_collapsed"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleTextAppearance="@style/Toolbar.TitleText_expanded"
            app:expandedTitleGravity="bottom"
            app:expandedTitleMarginBottom="100dp"
            app:contentScrim="@color/white"
            app:expandedTitleMarginStart="30dp"
            app:title=""
            >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                style="@style/Toolbar.TitleText_expanded"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                app:contentInsetLeft="0dp"
                app:contentInsetStart="0dp"
                app:titleTextColor="@color/black"
                android:background="@color/white"
                app:layout_collapseMode="parallax"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
            <ImageView
                android:layout_marginTop="55dp"
                android:layout_alignParentRight="true"
                android:id="@+id/iv_mine_page_activity_head"
                android:layout_width="@dimen/spacing_40"
                android:layout_height="@dimen/spacing_40"
                android:layout_gravity="right"
                android:layout_marginEnd="@dimen/spacing_26" />

            <TextView
                android:id="@+id/tv_mine_page_activity_follow_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/spacing_30"
                android:layout_marginTop="95dp"
                android:textColor="@color/grey_999999"
                android:textSize="@dimen/font_11"
                tools:text="" />

                <ImageView
                    android:layout_below="@+id/iv_mine_page_activity_head"
                    android:id="@+id/iv_mine_page_activity_setting"
                    android:layout_width="@dimen/spacing_40"
                    android:layout_height="20dp"
                    android:layout_gravity="right"
                    android:layout_marginTop="120dp"
                    android:layout_alignParentEnd="true"
                    android:layout_marginEnd="@dimen/spacing_26"
                    android:scaleType="centerInside"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.5"
                    android:src="@drawable/icon_mine_setting" />

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginTop="190dp"/>


        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:tabTextColor="@color/grey_686868"
            app:tabMode="fixed"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/grey_656565"
            app:tabSelectedTextColor="@color/black_111111"
            android:background="@color/white"
            android:layout_gravity="bottom" >

        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="12dp"
        android:elevation="0dp"
        android:translationZ="0dp"
        app:rippleColor="@color/transparent"
        app:layout_collapseMode="pin"
        app:backgroundTint="@color/transparent"
        android:background="@color/transparent"
        app:fabSize="normal"
        app:borderWidth="0dp"
        android:outlineAmbientShadowColor="@color/transparent"
        android:outlineSpotShadowColor="@color/transparent"
        app:layout_behavior="com.xxx.xxxxx.xxxxx.utils.behavior.TranslucentBehavior"/>


</android.support.design.widget.CoordinatorLayout>

app:fabSize="normal" ：控件间大小，最后自定义了个<dimen name="design_fab_size_normal" tools:ignore="PrivateResource">30dp</dimen>覆盖原有的属性，可以达到自定义该控件大小，设置的值是该控件的直径。

app:borderWidth="0dp"：边线宽度

android:outlineAmbientShadowColor="@color/transparent"：周围的阴影颜色

app:rippleColor="@color/transparent"：点击的边缘阴影颜色

android:elevation="0dp" :用户设置正常显示的阴影大小

android:translationZ="0dp"击时显示的阴影大小

//android 8.0以后增加两个api可以修改阴影的颜色 8.0一下无效
android:outlineAmbientShadowColor ：照射光的颜色 一般没什么作用
android:outlineSpotShadowColor：阴影颜色

下面对应的Behavior文件：

/**
 * Created by Lt on 2020/1/10 14:11.
 * Des：根据AppBarLayout的高度改变返回按钮FloatingActionButton的图标
 */
public class ChangeIconBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {

    /**标题栏的高度*/
    private int mToolbarHeight = 0;

    public ChangeIconBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    //绑定观察控件的方法
    public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull FloatingActionButton child, @NonNull View dependency) {
        return dependency instanceof AppBarLayout;
    }

    //根据绑定控件的位置变化来改变观察者控件的背景图片
    @Override
    public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull FloatingActionButton child, @NonNull View dependency) {


        if(mToolbarHeight == 0){
            mToolbarHeight = child.getBottom();
        }

        //计算toolbar从开始移动到最后的百分比
        float percent = Math.abs(dependency.getY()) / mToolbarHeight;

        if(percent > 2.5){
            child.setImageResource(R.drawable.icon_left_back);
        }else{
            child.setImageDrawable(parent.getContext().getDrawable(R.drawable.icon_black_close));
        }
        return true;

    }
}

 

 

心得：

app:layout_behavior这个属性设置的是观察者的控件，就是需要作出变化的那个控件。而且它需要是coordinatorlayout的子标签。被观察者的控件是空过设置描点或者在Behavior文件的layoutDependsOn方法中绑定的。