簡體   English   中英

啟用后退按鈕時工具欄標題不在中心

[英]Toolbar title not in center when Back Button is enable

我試圖在中心顯示我的工具欄標題並使用此答案中給出的方法來做到這一點: -工具欄中心標題

但是,當我通過以下代碼在activity中啟用后退按鈕時:

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mActionBar = getSupportActionBar();
mActionBar.setDisplayHomeAsUpEnabled(true);
mActionBar.setDisplayShowHomeEnabled(true);

工具欄的標題沒有顯示在中間,而是稍微偏右一點。

如何在不受后退按鈕或菜單欄影響的情況下實現居中標題?

在工具欄中添加一個 TextView,不要忘記在 TextView 中設置以下屬性。

android:layout_marginRight="?android:attr/actionBarSize"



android:layout_marginEnd="?android:attr/actionBarSize"

代碼片段:

<android.support.v7.widget.Toolbar
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@android:color/holo_red_dark">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="abc"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:layout_marginRight="?android:attr/actionBarSize"
        android:gravity="center"/>

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

有關更多信息,請參閱教程。

擁有一個與后退箭頭相同大小的占位符圖像,並在后退箭頭未顯示時將其設置為不可見,並在顯示消失,這對我來說很有效。

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="@color/blue"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<ImageView
    android:id="@+id/iv_placeholder"
    android:layout_width="72dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_actionbar_hamburger"
    android:visibility="invisible"/>


<TextView
    android:id="@+id/logo_tv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="?attr/actionBarSize"
    android:gravity="center"
    android:text=""
    android:textColor="@color/white"
    android:textStyle="normal"/>

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

在此處輸入圖片說明

在此處輸入圖片說明

只需將android:paddingEnd="72dp;到工具欄布局。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:contentScrim="@color/colorPrimary"
    app:layout_collapseMode="pin"
    android:paddingEnd="72dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
    app:title="Title"/>

當您使用后退按鈕作為導航圖標時,標題未居中的原因是導航圖標表示為AppCompatImageButton並添加到與標題TextView相同的布局中。 使用Arshak 的答案並不是一個壞主意,但?android:attr/actionBarSize不是定義結束邊距的好方法。 由於操作欄的高度可能與圖標的寬度相同,因此它可能有效,但可能不適用於所有設備。 材料設計指南中指定此尺寸可能是個好主意。

只需將您的內容放在 XML 中 Toolbar 標記內的子視圖中,使用以下屬性:

android:layout_width="wrap_content"
android:layout_gravity="center"

工具欄狀態的官方文檔:

一個或多個自定義視圖。 應用程序可以向工具欄添加任意子視圖。 它們將出現在布局中的這個位置。 如果子視圖的 LayoutParams 指示 Gravity 值為 Gravity#CENTER_HORIZONTAL,則在測量所有其他元素后,視圖將嘗試在工具欄中剩余的可用空間內居中。

這對我有用,使用帶有子視圖的 androidx.appcompat.widget.Toolbar。

在我的例子中,我在工具欄中使用了一個圖像視圖,我不想在活動的片段之間導航時四處移動。 我把它放在工具欄上,讓它居中。 我使用了約束布局

<androidx.constraintlayout.widget.ConstraintLayout 
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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">



</com.google.android.material.appbar.MaterialToolbar>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@id/toolbar"
    app:layout_constraintBottom_toBottomOf="@id/toolbar"
    android:src="@drawable/ic_logo"
    tools:ignore="ContentDescription" />
 ...

</androidx.constraintlayout.widget.ConstraintLayout>

我認為最好和最新的方法是完全控制應用程序欄。 這樣您就可以從 textview 位置更改其他內容。

<androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="@string/app_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textSize="20dp"
                android:textColor="?attr/colorPrimary"
                android:layout_centerInParent="true"
                android:layout_marginEnd="20dp"/>

        </RelativeLayout>

    </androidx.appcompat.widget.Toolbar>

您可以直接在您的活動中使用它。 但是,您可能需要通過在添加此工具欄的活動中進行此類定義來更改活動工具欄。

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

不要設置這樣的屬性

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

這樣做

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        // Title and subtitle
        toolbar.setTitle(R.string.about_toolbar_title);
        toolbar.setSubtitleTextColor(Color.WHITE);
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setBackgroundColor(getResources().getColor(
                R.color.themeToolbarColor));
        toolbar.setNavigationIcon(R.drawable.ic_action_back);
        toolbar.setNavigationOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
               finish();  // to go back  finish() will do your work.
                //mActionBar.setDisplayHomeAsUpEnabled(true);
                //mActionBar.setDisplayShowHomeEnabled(true);
            }
        });

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM