Material Design 下 Toolbar 中如何实现标题居中显示-JavaScript中文网-JavaScript教程资源分享门户

在移动应用程序中，Toolbar是一个非常常用的控件，它作为应用程序的导航栏和工具栏。在Material Design中，Toolbar被重点推荐使用，并且应用于大量的界面设计中。其中，一个常见的问题是如何使得标题能够居中显示，这里通过具体的代码展示如何实现。

1. 使用AppCompatActivity

在实现Toolbar中标题居中显示之前，我们需要先确保我们使用的是AppCompatActivity。

public class MainActivity extends AppCompatActivity {
  //... 省略代码
}

2. 定义Toolbar

在xml文件中，定义我们的Toolbar布局

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>

3. 实现标题居中显示

无论是在Toolbar的xml布局中还是代码中，都很难实现标题居中显示的效果。因此，我们需要添加样式来实现这一目标。

<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textAppearance">@style/ToolbarTitleTextAppearance</item>
  </style>

  <style name="ToolbarTitleTextAppearance">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@android:color/white</item>
  </style>

在styles.xml文件中定义我们的样式。

4. 在代码中实现

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Objects.requireNonNull(getSupportActionBar()).setDisplayHomeAsUpEnabled(true);
toolbar.setTitleTextColor(Color.WHITE);
toolbar.setTitle("");
TextView toolbarTitle = findViewById(R.id.toolbar_title);
toolbarTitle.setText(R.string.app_name);
toolbarTitle.setTextSize(18);
toolbarTitle.setTextColor(Color.WHITE);

在代码中找到我们定义的Toolbar，设置我们的样式和属性。在这里，我们通过Toolbar.setTitle方法配合在xml中定义的样式来隐藏原生的标题，然后定义一个新的TextView来替代之前的标题，并通过在xml中定义的样式来实现居中显示。

5. 示例代码

完整的示例代码如下所示：

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary">

  <TextView
    android:id="@+id/toolbar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center" />

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

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);
    Objects.requireNonNull(getSupportActionBar()).setDisplayHomeAsUpEnabled(true);
    toolbar.setTitleTextColor(Color.WHITE);
    toolbar.setTitle("");

    TextView toolbarTitle = findViewById(R.id.toolbar_title);
    toolbarTitle.setText(R.string.app_name);
    toolbarTitle.setTextSize(18);
    toolbarTitle.setTextColor(Color.WHITE);
  }
}

6. 总结

本文对Material Design下Toolbar中如何实现标题居中的细节进行了详细的讲解，并且通过具体代码完成了如何居中显示标题的实现。读者可以直接使用本文的代码示例应用于自己的项目中。同时，也可以通过本文中的思路进行修改和优化，实现更符合自己实际需要的效果。

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