自定义工具栏视图未居中 [英] Custom Toolbar Views not centered
问题描述
将ActionBarDrawerToggle
与我的自定义Toolbar
一起使用时,Toolbar
中的TextView
不再居中.
When using ActionBarDrawerToggle
with my custom Toolbar
, the TextView
s in the Toolbar
are no longer centered.
main_layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/toolbar" />
<FrameLayout
android:id="@+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<TextView
android:id="@+id/tvNavTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorBackgroundBlack"
android:gravity="center"
android:textColor="@color/colorWhite"
android:textSize="@dimen/text_size_large" />
<TextView
android:id="@+id/tvNavDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorBackgroundBlack"
android:gravity="center"
android:textColor="@color/colorWhite"
android:textSize="@dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@mipmap/ic_launcher" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
我尝试在Toolbar
上设置contentInsetStart
和其他属性,但是没有任何变化.
I tried setting the contentInsetStart
and other attributes on the Toolbar
, but nothing changed.
推荐答案
此处的问题是ActionBarDrawerToggle
的图标设置为Toolbar
上的导航按钮.此按钮是Toolbar
的特殊子项,将在布局中优先.添加到Toolbar
的任何其他子View
只会分配放置ImageButton
之后剩余的空间.这会将RelativeLayout
的左侧推向右侧,因此您居中的TextView
不会相对于Toolbar
本身居中.
The problem here is that ActionBarDrawerToggle
's icon is set as the navigation button on the Toolbar
. This button is a special child of Toolbar
that will take precedence in the layout. Any other child View
s added to the Toolbar
will be allotted only the space remaining after that ImageButton
is placed. This is pushing the left side of your RelativeLayout
to the right, so the TextView
s you have centered in that will not be centered with respect to the Toolbar
itself.
幸运的是,Toolbar
的LayoutParams
具有重力属性,我们可以利用它来将LinearLayout
及其TextView
的中心直接定位在Toolbar
中,而不必将它们包装在另一个ViewGroup
中.我们还可以在ImageView
上适当地设置重力,以使其类似地对准右侧.
Fortunately, Toolbar
's LayoutParams
has a gravity property that we can utilize to center the LinearLayout
and its TextView
s directly in the Toolbar
, without having to wrap them in another ViewGroup
. We can also set the gravity appropriately on your ImageView
to similarly align that to the right side.
在此示例中,我们通过将LinearLayout
的layout_gravity
设置为center
来应用该中心重心.确保将layout_width
值也更改为wrap_content
,否则您将和以前一样.此处的ImageView
的layout_gravity
设置为right|center_vertical
,替换了特定于RelativeLayout
的那些layout_*
属性.
In this example, we apply that center gravity by setting the LinearLayout
's layout_gravity
to center
. Be sure to also change the layout_width
values to wrap_content
, or you'll be in the same boat as before. The ImageView
here has its layout_gravity
set to right|center_vertical
, replacing those layout_*
attributes specific to RelativeLayout
.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tvNavTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorWhite"
android:textSize="@dimen/text_size_large" />
<TextView
android:id="@+id/tvNavDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/colorWhite"
android:textSize="@dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="right|center_vertical"
android:src="@mipmap/ic_launcher" />
</android.support.v7.widget.Toolbar>
这篇关于自定义工具栏视图未居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!