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轴最上层。最后使用该控件的确实现了需求。布局文件如下。记录下。

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

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 {

    /**标题栏的高度*/
    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方法中绑定的。