自定义工具栏视图未居中 [英] Custom Toolbar Views not centered

问题描述

将ActionBarDrawerToggle与我的自定义Toolbar一起使用时，Toolbar中的TextView不再居中.

When using ActionBarDrawerToggle with my custom Toolbar, the TextViews 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 Views 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 TextViews 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 TextViews 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屋！