如何在支持操作栏中添加后退按钮的同时将文本视图对齐在工具栏的中心

时间:2017-09-09 13:57:16

标签: android android-layout android-actionbar

我创建了自定义工具栏作为我的活动的操作栏。我希望标题标签显示在我的工具栏的中心。

工具栏布局资源文件是

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_toolbar_select"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="15dp"
            android:layout_marginTop="20dp"
            android:src="@drawable/ic_menu_camera" />

            <TextView
                android:id="@+id/text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:singleLine="true"
                android:text="sample text"
                android:textColor="@color/progressWhite"
                android:textSize="14sp" />

            <TextView
                android:id="@+id/text2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:text="Heading"
                android:layout_gravity="center"
                android:textColor="@color/progressWhite"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/text3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center|center_horizontal"
                android:singleLine="true"
                android:text="second line heading"
                android:textColor="@color/progressWhite"
                android:textSize="12sp"
                android:layout_marginBottom="15dp"/>


    </LinearLayout>


</android.support.v7.widget.Toolbar>

我的活动包含,

Toolbar toolbar = (Toolbar) findViewById(R.id.my_toolbar_select_seat);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);

我想将所有三个TextView对齐到工具栏的中心,但无法在工具栏的正中心对齐。当我在我的设备中运行应用程序时,它未正确对齐。我怎么能解决这个问题?

1 个答案:

答案 0 :(得分:1)

来自Toolbar文档:

  

一个或多个自定义视图。应用程序可能会向工具栏添加任意子视图。它们将出现在布局中的这个位置。如果子视图的Toolbar.LayoutParams指示CENTER_HORIZONTAL的重力值,则在测量完所有其他元素后,视图将尝试以工具栏中剩余的可用空间为中心。

因此,您希望工具栏中的视图center_horizontal,在本例中为LinearLayout。您可以将其设为wrap_content,这样它就会在工具栏中居中,只占用所需的空间。然后将其gravity设置为center_horizontal,使其内容居中。然后,您可以删除所有子项上的所有gravity_属性,因为它们现在已根据LinearLayout进行对齐。我调整了你的样本:

<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
  android:id="@+id/my_toolbar_select"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="?attr/colorPrimary"
  app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <LinearLayout
      android:gravity="center_horizontal"
      android:layout_gravity="center_horizontal"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:orientation="vertical">

        <ImageView
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/cmn_add" />

        <TextView
          android:id="@+id/text1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:singleLine="true"
          android:text="sample text"
          android:textColor="@color/white"
          android:textSize="14sp" />

        <TextView
          android:id="@+id/text2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:singleLine="true"
          android:text="Heading"
          android:textColor="@color/white"
          android:textSize="18sp"
          android:textStyle="bold" />

        <TextView
          android:id="@+id/text3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:singleLine="true"
          android:text="second line heading"
          android:textColor="@color/white"
          android:textSize="12sp"
          android:layout_marginBottom="15dp"/>

    </LinearLayout>

</android.support.v7.widget.Toolbar>

这给了我这样的东西:

Layout Preview

希望有所帮助!

P.S。 - 当发布有关布局不正确的问题时,发布您正在获取的布局的屏幕截图以及模拟或您真正想要的内容将非常有用。否则,人们必须根据您的描述进行猜测。