组合控件——顶部导航栏——工具栏Toolbar

ゝ一世哀愁。 2023-09-28 23:02 13阅读 0赞

![0c6b8bbcb6d12e353da09b0c7f1322a9.png][]

**工具栏位于页面顶部，引入工具栏的步骤如下：**

(1)在styles.xml中定义一个不包含ActionBar的风格样式；

(2)给activity节点添加android:theme属性，并将属性值设为第一步定义的风格；

(3)将活动页面的XML文件根节点改成LinearLayout，且为vertical垂直方向，然后增加一个Toolbar节点

(4)打开活动页面的Java代码，在onCreate方法中获取布局文件中的Toolbar对象，并调用setSupportActionBar方法设置当前的Toolbar对象；

![4a4494ebd9481ad4e6ef7ef03bc7c88a.png][]

布局：

![45770bfd7bd41871c3a26fe0c916d878.png][]

代码：

package com.example.myapplication;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.view.View;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.appcompat.widget.Toolbar;
    
    public class MainActivity extends AppCompatActivity
    {
        private final static String TAG = "ToolbarActivity";
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar tl_head = findViewById(R.id.tl_head); // 从布局文件中获取名叫tl_head的工具栏
    
            tl_head.setTitle("工具栏页面"); // 设置工具栏的标题文本
    
    //        setSupportActionBar(tl_head); // 使用tl_head替换系统自带的ActionBar
    
            tl_head.setTitleTextColor(Color.RED); // 设置工具栏的标题文字颜色
    
            tl_head.setLogo(R.drawable.ic_app); // 设置工具栏的标志图片
    
            tl_head.setSubtitle("Toolbar"); // 设置工具栏的副标题文本
    
            tl_head.setSubtitleTextColor(Color.YELLOW); // 设置工具栏的副标题文字颜色
    
            tl_head.setBackgroundResource(R.color.blue_light); // 设置工具栏的背景
    
            tl_head.setNavigationIcon(R.drawable.ic_back); // 设置工具栏左边的导航图标
    
            // 给tl_head设置导航图标的点击监听器
            // setNavigationOnClickListener必须放到setSupportActionBar之后，不然不起作用
            tl_head.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    finish(); // 结束当前页面
                }
            });
        }
    
    }

![ce6f8a8646635dfeae977ec702a10345.png][]

![bc631fa19a9b723c578500e311da4806.png][]

PS：我这里直接用的，因为demo不支持5以下sdk。

![93feaa6eeb53ea67c9ca198455208341.png][]

![1857a202e527ca75055f694e40cf427e.png][]

![74f61a9f145c9792163f481aeae5fd51.png][]

![4f40458eadbcbab8476219c657e8bfb7.png][]

![1e9cffd78a78b6a4cd98fd3aa24279af.png][]

[0c6b8bbcb6d12e353da09b0c7f1322a9.png]: https://img-blog.csdnimg.cn/img_convert/0c6b8bbcb6d12e353da09b0c7f1322a9.png
[4a4494ebd9481ad4e6ef7ef03bc7c88a.png]: https://img-blog.csdnimg.cn/img_convert/4a4494ebd9481ad4e6ef7ef03bc7c88a.png
[45770bfd7bd41871c3a26fe0c916d878.png]: https://img-blog.csdnimg.cn/img_convert/45770bfd7bd41871c3a26fe0c916d878.png
[ce6f8a8646635dfeae977ec702a10345.png]: https://img-blog.csdnimg.cn/img_convert/ce6f8a8646635dfeae977ec702a10345.png
[bc631fa19a9b723c578500e311da4806.png]: https://img-blog.csdnimg.cn/img_convert/bc631fa19a9b723c578500e311da4806.png
[93feaa6eeb53ea67c9ca198455208341.png]: https://img-blog.csdnimg.cn/img_convert/93feaa6eeb53ea67c9ca198455208341.png
[1857a202e527ca75055f694e40cf427e.png]: https://img-blog.csdnimg.cn/img_convert/1857a202e527ca75055f694e40cf427e.png
[74f61a9f145c9792163f481aeae5fd51.png]: https://img-blog.csdnimg.cn/img_convert/74f61a9f145c9792163f481aeae5fd51.png
[4f40458eadbcbab8476219c657e8bfb7.png]: https://img-blog.csdnimg.cn/img_convert/4f40458eadbcbab8476219c657e8bfb7.png
[1e9cffd78a78b6a4cd98fd3aa24279af.png]: https://img-blog.csdnimg.cn/img_convert/1e9cffd78a78b6a4cd98fd3aa24279af.png