Android中导航栏之Toolbar的使用

Toolbar系列文章导航

Android中导航栏之Toolbar的使用

Android中导航栏之溢出菜单OverflowMenu

Android中导航栏之搜索框SearchView

Android中导航栏之自定义导航布局

Android中导航栏之标签导航暨TabLayout用法

我们做APP页面的时候往往需要在头部的位置加一个导航栏，显示一下页面的标题，返回按钮，或者右侧还有有一些别的按钮。当然了，还会出现比如标签，搜索等比较高级一点的内容。如果开发时间较长的同学应该知道ActionBar，但这个已经过时了，因为定制难，长得丑都是它存在的问题。后来我们习惯了自己写一个布局去替代它，使用include的方式引入，但是这样要么就是所有页面都要自己写一套，要么就是每种长得都不一样不好兼容。再后来我们学会了自定义控件写这个导航，这时就高级一些了，但很考量我们的技术功底。不过现在不用担心了，官方有了Toolbar，基本可以满足我们的导航栏需求了。下面我们就介绍一下Toolbar的一些基本用法。

1.Toolbar引入方法

• 在styles.xml中定义一个不包含ActionBar的风格样式，代码如下：
   

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>

   当然我们还可以使用如下代码隐藏Actionbar

  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
      <item name="colorPrimary">@color/colorPrimary</item>
      <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
      <item name="colorAccent">@color/colorAccent</item>
      <item name="windowNoTitle">true</item>
  </style>

  和新建项目自带的相比就是加了windowNoTitle这行。我一般喜欢用第二种。

• 不管用哪种，接下来我们需要把这个AppTheme主题配置给AndroidManifest.xml的application节点下

  android:theme="@style/AppTheme">

   

• 接着我们要在布局中添加一个ToolBar控件。由于要用到Toolbar，所以外层布局要用线性布局，并设置为垂直方向，代码如下 
   

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">
      
      <androidx.appcompat.widget.Toolbar
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:id="@+id/tl_head"/>
  </LinearLayout>

  这里我使用的是androidx，如果还没有升级到androidx的同学，引入的是android.support.v7.widget.Toolbar，不过直接打Toolbar就能出来，只要看好是哪个就可以了。

• 最后我们的Activity要继承自AppCompatActivity，新建项目一般默认继承自AppCompatActivity，大家确定一下就好。接着我们初始化我们的Toolbar控件，这个不上代码了。然后调用setSupportActionBar进行设置。万整的Activity代码如下：
   

  public class MainActivity extends AppCompatActivity {
  
      private Toolbar tl_head;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          tl_head = findViewById(R.id.tl_head);
          setSupportActionBar(tl_head);
      }
  }

  这样我们的Toolbar就显示出来了 。

2.Toolbar常用属性

此时大家如果照着上面的代码编写后运行，会发现虽然Toolbar成功显示出来了，但是除了一行文字什么都没有。那是因为我们什么都没有设置的缘故。Toolbar为我们提供了很多属性，常用的属性和方法如下：

XML中的属性	Toolbar类的设置方法	说明
Logo	setLogo	设置工具栏图标
Title	setTitle	设置标题文字
titleTextColor	setTiitleTextColor	设置标题的文字颜色
titleTextAppearance	setTitleTextAppearance	设置标题的文字风格。风格定义在styles.xml中
subtitle	setSubtitle	设置副标题文字。副标题在标题下方。
subtitleTextColor	setSubtitleTextColor	设置副标题的文字颜色
subtitleTextAppearance	setSubtitleTextAppearance	设置副标题的文字风格
navigationIcon	setNavigationIcon	设置左侧导航图标
无	setNavigationOnClickListener	设置导航图标的点击监听器

3.Toolbar使用示例

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 从布局文件中获取名叫tl_head的工具栏
        Toolbar tl_head = findViewById(R.id.tl_head);
        // 设置工具栏左边的导航图标
        tl_head.setNavigationIcon(R.mipmap.ic_back);
        // 设置工具栏的标题文本
        tl_head.setTitle("工具栏页面");
        // 设置工具栏的标题文字颜色
        tl_head.setTitleTextColor(Color.RED);
        // 设置工具栏的标题文字风格
//        tl_head.setTitleTextAppearance(this, R.style.TabButton);
        // 设置工具栏的标志图片
        tl_head.setLogo(R.mipmap.ic_launcher);
        // 设置工具栏的副标题文本
        tl_head.setSubtitle("Toolbar");
        // 设置工具栏的副标题文字颜色
        tl_head.setSubtitleTextColor(Color.YELLOW);
        // 设置工具栏的背景
        tl_head.setBackgroundResource(R.color.blue_light);
        // 使用tl_head替换系统自带的ActionBar
        setSupportActionBar(tl_head);
        // 给tl_head设置导航图标的点击监听器
        // setNavigationOnClickListener必须放到setSupportActionBar之后，不然不起作用
        tl_head.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish(); // 结束当前页面
            }
        });
    }
}

4.标题和左侧返回按钮中间空隙解决问题

上面就是一个常规应用的方法。但是可能有同学跟我一下，要求很简单但就是强迫症。我们只要一个返回按钮和标题，其他的不要。但返回按钮和标题之间竟然有空隙。经过研究后主要是加上app:contentInsetStartWithNavigation="0dp"属性和tl_head.setTitleMargin(0,0,0,0);代码设置。具体代码如下：

    <androidx.appcompat.widget.Toolbar
        app:contentInsetStartWithNavigation="0dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tl_head"/>

        // 从布局文件中获取名叫tl_head的工具栏
        Toolbar tl_head = findViewById(R.id.tl_head);
        // 设置工具栏左边的导航图标
        tl_head.setNavigationIcon(R.mipmap.ic_back);
        // 设置工具栏的标题文本
        tl_head.setTitle("工具栏页面");
        // 设置工具栏的标题文字颜色
        tl_head.setTitleTextColor(Color.RED);
        tl_head.setTitleMargin(0,0,0,0);
        // 设置工具栏的背景
        tl_head.setBackgroundResource(R.color.blue_light);
        // 使用tl_head替换系统自带的ActionBar
        setSupportActionBar(tl_head);
        // 给tl_head设置导航图标的点击监听器
        // setNavigationOnClickListener必须放到setSupportActionBar之后，不然不起作用
        tl_head.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish(); // 结束当前页面
            }
        });

这样就可以实现我们想要的一个效果。