Android中导航栏之Toolbar的使用

2024-02-26 22:10:34

我们做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(); // 结束当前页面
            }
        });
    }
}

码农公寓

1.Toolbar引入方法

2.Toolbar常用属性

3.Toolbar使用示例

相关文章