CollapsingToolbarLayout 中的Toolbar Title 居中

ToolBar Title 居中

网上有很多教程都有关于使用Toolbar如何将title设置居中的方案,主要就是在Tollbar控件的XML布局中添加一个居中的TextView ,代码如下.

<android.support.v7.widget.Toolbar android:id="@+id/toolbar" app:layout_collapseMode="pin" android:layout_width="match_parent" android:layout_height="?android:actionBarSize" android:background="?attr/colorPrimary" app:navigationIcon="@drawable/selector_back" app:popupTheme="@style/ToolbarPopupTheme" app:contentInsetStart="0dp" android:gravity="center"> <TextView android:id="@+id/toolbar_title" style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawablePadding="5dp" android:ellipsize="end" android:gravity="center" android:lines="1" android:scrollHorizontally="true" android:textColor="@android:color/white" android:text="挂号" /> </android.support.v7.widget.Toolbar>

使用CollapsingToolbarLayout

但是如果使用了CollapsingToolbarLayout实现那个收缩效果.结果就不正确了,代码如下

<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:orientation="vertical"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" > <ImageView android:id="@+id/logo" android:layout_width="match_parent" android:layout_height="120dp" android:contentDescription="@null" android:fitsSystemWindows="true" android:scaleType="fitXY" android:src="@mipmap/registry_banner" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.6" android:layout_marginTop="?android:actionBarSize"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" app:layout_collapseMode="pin" android:layout_width="match_parent" android:layout_height="?android:actionBarSize" android:background="?attr/colorPrimary" app:navigationIcon="@drawable/selector_back" app:popupTheme="@style/ToolbarPopupTheme" app:contentInsetStart="0dp" android:gravity="center"> <TextView android:id="@+id/toolbar_title" style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawablePadding="5dp" android:ellipsize="end" android:gravity="center" android:lines="1" android:scrollHorizontally="true" android:textColor="@android:color/white" android:text="挂号" /> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/registryRecycler" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/optionsLayout" android:layout_below="@+id/appBarLayout" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>

然后就发现,使用ToolBar居中Title的方案竟然让Title,到了最右侧……

解决Title不居

其实是因为CollapsingToolbarLayout中有一个关于title的动画,有兴趣的,可以不用居中方案看一下,就是那个title从下方收起的动画.关闭掉那个动画效果,让title一直保持在ToolBar上,这样就可以继续使用居中方案了. 关键点:在CollapsingToolbarLayout中设置属性app:titleEnabled=”false” 即可.

<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" //这一句,关闭title动画,即可继续使用那个title居中的代码 app:titleEnabled="false">

ok ,完美解决!(只是没有那个title过渡效果了T_T)