Kotlin笔记(51) — Toolbar的使用

前言

在Android开发过程中，我们会使用到标题栏的问题，这节就让我们来学习下头部工具栏Toolbar的使用吧。

今天涉及以下内容：

1. Toolbar简介
2. 使用前配置
3. Toolbar在Activity中使用
4. 效果图

先来波效果图

image.png

一.Toolbar简介

Toolbar是用作顶部标题栏的一个工具栏控件,继承自ViewGroup,可直接用作标题栏，也可在其内部添加控件实现标题栏。

二.使用前配置

在Android 5.0 之前，主要使用的是ActionBar,所以导致ActionBar和Toobar占据的是同一位置。由于 ActionBar使用固定，不好修改，导致兼容性差。为了防止ActionBar的干扰，所以我们在Androidmanifast.xml中把Activity的android:theme节点设置成去掉ActionBar的样式，如：

    android:theme="@style/Theme.AppCompat.NoActionBar"

还需要注意的一个问题是，使用Toobar时,你的Activity要继承AppCompatActivity.

三.Toolbar在Activity中使用

下面贴出Toolbar在Activity中使用的代码：

open class MainActivity : AppCompatActivity(), View.OnClickListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(com.kotlintest.R.layout.activity_main)

        initData()
        setListener()
    }

    private fun initData() {
        mTooBar.title="标题"  //标题栏文字
        mTooBar.setTitleTextColor(Color.RED) //标题栏文字颜色
        mTooBar.setLogo(R.mipmap.ic_launcher) //标题栏左侧logo
        mTooBar.subtitle="副标题"  //标题栏副标题文字
        mTooBar.setSubtitleTextColor(Color.GREEN)  //标题栏副标题文字颜色
        mTooBar.setBackgroundResource(R.color.colorAccent)  //标题栏背景
        setSupportActionBar(mTooBar)  //Toolbar替换系统自带的ActionBar
        mTooBar.setNavigationIcon(R.mipmap.ic_launcher) //工具栏左侧导航图标,通常用作返回按钮
        //左侧导航(返回键)点击事件，需要放在setSupportActionBar(mTooBar)之后执行,不然不起作用
        mTooBar.setNavigationOnClickListener {
            finish()
        }
    }

    private fun setListener(){
        mBtnTest.setOnClickListener(this@MainActivity)
    }

    override fun onClick(v: View) {
       when(v.id){
           com.kotlintest.R.id.mBtnTest -> {

           }
       }
    }

}

MainActivity对应布局文件activity_main代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_f2f2f2"
    tools:context=".ui.MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/mTooBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/mTvTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="80dp"
        android:gravity="center"
        android:text="测试"
        android:textColor="@color/black"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/mBtnTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="false"
        android:layout_marginTop="10dp"
        android:text="kotlin显示dialog"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mTvTest" />

</androidx.constraintlayout.widget.ConstraintLayout>

四. 效果图

image.png