Material Design 中 Toolbar 的标题居中显示的实现方法

在 Material Design 中，Toolbar 是一个重要的 UI 元素，它通常用于顶部导航栏，并且包含应用程序的标题和操作按钮。其中，标题的居中显示是一个非常基础但又非常重要的功能。本文将介绍如何在 Material Design 中实现 Toolbar 标题的居中显示。

基本思路

要实现 Toolbar 标题的居中显示，需要在布局中使用一个 TextView 控件来显示标题，并设置其居中对齐。具体步骤如下：

1. 在布局文件中添加 Toolbar 控件，并设置其高度和其他属性。

// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:titleTextColor="@android:color/white"
    app:titleMarginStart="16dp"
    app:titleMarginEnd="16dp"
    app:title="@string/app_name"/>

1. 在 Activity 或 Fragment 中获取 Toolbar 对象，并调用 setSupportActionBar() 方法将其设置为当前 Activity 或 Fragment 的 ActionBar。

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

1. 在 Toolbar 中添加一个 TextView 控件，并设置其居中对齐。

// javascriptcn.com 代码示例
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    app:titleTextColor="@android:color/white"
    app:titleMarginStart="16dp"
    app:titleMarginEnd="16dp"
    app:title="">
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:layout_gravity="center"/>
        
</androidx.appcompat.widget.Toolbar>

通过上述步骤，就可以实现 Toolbar 标题的居中显示了。

示例代码

下面是一个完整的示例代码，展示如何在 Material Design 中实现 Toolbar 标题的居中显示。

activity_main.xml

// javascriptcn.com 代码示例
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:titleTextColor="@android:color/white"
            app:titleMarginStart="16dp"
            app:titleMarginEnd="16dp"
            app:title="">
            
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textColor="@android:color/white"
                android:textSize="18sp"
                android:layout_gravity="center"/>
                
        </androidx.appcompat.widget.Toolbar>

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

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/demo_text"/>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.java

// javascriptcn.com 代码示例
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

总结

通过本文的介绍，我们了解了如何在 Material Design 中实现 Toolbar 标题的居中显示。这是一个非常基础但又非常重要的功能，对于开发 Material Design 风格的应用程序非常有用。希望本文对您有所帮助，谢谢阅读！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658125add2f5e1655dc58445