Android_Toolbar源码解析使用和问题解决

说明:Toolbar在实际导入的时候会发现是有两个包的,一般使用v7包,因为要兼容低版本的缘故 官网的v7包下 Toolbar API说明地址(国内需要科学上网)

Toolbar包结构:

public class Toolbar extends ViewGroup

java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.support.v7.widget.Toolbar

注意:

1. 保留部分专有名词原英文名称,便于提炼.
2. 翻译内容仅供参考,不对的地方欢迎指正.

简要翻译:

Toolbar是应用内部使用的一个通用导航栏,一个Activity需要选择使用Toolbar需要使用 setSupportActionBar()方法 Toolbar 比ActionBar支持了更多的新功能,一个Toolbar可能包含以下可选的元素的组合.

• A navigation button. ,这个可能是一个Up arrow, navigation menu toggle, close, collapse, done 或者 another glyph 或者其他app的选择, 这个按钮应该总是用于访问Toolbar内的其他导航目标和指定的内容,如果设置了,则导航按钮在Toolbar的最小高度内垂直对齐
• A branded logo image. 这个可能自适应bar的高度和任意宽度
• A title and subtitle. 一级标题应该是当前Toolbar的层次位置以及其中包含的内容的路标,二级标题,如果当前应该指向任何关于当前内容的扩展. 如果一个app使用了logo图片,则它应该强烈考虑忽略一级和二级标题
• One or more custom views. 这个应用如果要添加任意的子view到Toolbar,则他们将显示在布局中的这个位置, 如果一个子view 的Toolbar.LayoutParams 设置了Gravity的值是 CENTER_HORIZONTAL ,则这个view将会显示在Toolbar其他元素被测量后的剩余可用位置的中间.
• An action menu. 这个action menu将固定到Toolbar的最后位置,用来提供一些 频繁,重要或者典型 的操作以及可选的overflow menu以执行其他操作. 如果设置了,则action menu在Toolbar的最小高度内垂直对齐

在Android UI上, 开发者应该更多地依赖于Toolbar的视觉上不同的颜色方案而不是应用程序图标, API 21及其以上不鼓励使用应用的 icon plus title作为标准布局。

源码解析

看源码的顺序(针对View/ViewGroup子类):

1. 构造 -> onMeasure -> onLayout -> draw(针对view)/onDraw(针对ViewGroup)
2. 实现关系与内部类

取其中的Title源码流程来进行说明,其他设置子view的流程类似,menu会稍微复杂一些,可自行阅读源码.

setTitle的流程大致如下:

效果图实现&&分析

项目环境:Android Studio 3.0.1 + JDK 1.8

语言:Kotlin

文件配置:

build.gradle文件

dependencies {
    classpath 'com.android.tools.build:gradle:3.0.1'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
复制代码

app下的build.gradle文件

compileSdkVersion 28
defaultConfig {
    applicationId "com.litchiny.testtoolbar"
    minSdkVersion 18
    targetSdkVersion 28
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
复制代码

gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
复制代码

效果图

MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var toolbar: Toolbar
    private lateinit var context:Context
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        this.context = this
        initView()
        initListener()
    }

   private fun initView() {
        toolbar = findViewById<Toolbar>(R.id.tb_show)
        //toolbar.title 设置说明:等同于2行设置,如果位置换到了3行的后面,则1行的设置失效,原因:参考问题Q4 
        toolbar.title = "一级标题"                                                                  //1行
        setSupportActionBar(toolbar)                                                                 //3行  设置允许使用Toolbar
//        supportActionBar?.setDisplayHomeAsUpEnabled(true)                                         //设置返回箭头,生效的前提: 不设置自定义的navigationIcon
        toolbar.navigationIcon = ContextCompat.getDrawable(context,R.mipmap.left)               //设置自定义的 navigationIcon
        toolbar.logo = ContextCompat.getDrawable(context,R.mipmap.home)                          //设置logo,位置在title/subtitle的左侧
//        supportActionBar?.title = "这是一级标题"                                                    //2行 直接使用toolbar.title在代码里设置是不生效的,在xml中是可以的

        toolbar.subtitle = "这是二级标题"                                                           //设置subtitle的内容
        toolbar.setTitleTextAppearance(context,R.style.ToolbarTitleText)                           //设置title的字体大小,颜色      16sp    黄色
        toolbar.setSubtitleTextAppearance(context,R.style.ToolbarSubtitleText)                     //设置subtitle的字体大小,颜色   20sp    白色
    }

    private fun initListener() {
        toolbar.setNavigationOnClickListener {
            showToast("Navigation 被点击了")
        }

        toolbar.setOnClickListener {
            showToast("id: ${it.id}")
        }

        setOnMenuItemClick()
    }

    //与onOptionsItemSelected 等同
    private fun setOnMenuItemClick() {
        toolbar.setOnMenuItemClickListener {
            when (it.itemId) {
                R.id.action_edit, R.id.action_share, R.id.action_about -> {
                    showToast("${it.title} 被点击了")
                    true
                }
                else -> {
                    false
                }
            }
        }
    }

    //与setOnMenuItemClick等同
    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        when (item?.itemId) {
            R.id.action_edit, R.id.action_share, R.id.action_about -> {
                showToast("${item.title} 被点击了")
            }
        }
        return super.onOptionsItemSelected(item)
    }

    //需要是menu的配置内容生效
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true
    }

    private fun showToast(descStr: String) {
        Toast.makeText(this, descStr, Toast.LENGTH_SHORT).show()
    }
}
复制代码

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context="com.litchiny.testtoolbar.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tb_show"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    </android.support.v7.widget.Toolbar>

</android.support.constraint.ConstraintLayout>
复制代码

styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorControlNormal">@color/colorWhite</item>
        <item name="android:windowBackground">@color/colorAccent</item>
    </style>

    <!--重设Title的字体 大小,颜色-->
    <style name="ToolbarTitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/colorWhite</item>
    </style>

    <!--重设Subtitle的字体 大小,颜色-->
    <style name="ToolbarSubtitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/colorYellow</item>
    </style>
</resources>
复制代码

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#FFFFFF</color>
    <color name="colorYellow">#f4f000</color>
</resources>
复制代码

遇到的问题:

Q1: Logo,Title,SubTitle不能单独设计点击事件

A1: 不使用Toolbar内置的此三个控件,或继承Toolbar后重写相关的方法

Q2: Logo, NavigationView的图片大小需要适配调整

A2: UI给出合适的尺寸适配(PS: 效果图里的图片大小是128x128,格式: PNG)

Q3: Menu的more的图标显示是黑色的

A3: 自带的theme设置成Dark,popup设置成Light

参考:

app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
复制代码

Q4: toolbar.title在setSupportActionBar(toolbar) 设置后失效的问题

A4: 看AppCompatDelegateImpl.java的源码

在方法 setSupportActionBar里重新给mActionBar赋值的时候,会重设title,地址已发生了变化,所以直接toolbar.title失效

源码如下:

public void setSupportActionBar(Toolbar toolbar) {
   //...省略一些校验的代码

    if (toolbar != null) {
        final ToolbarActionBar tbab = new ToolbarActionBar(toolbar,
                ((Activity) mOriginalWindowCallback).getTitle(), mAppCompatWindowCallback);
        mActionBar = tbab;
        mWindow.setCallback(tbab.getWrappedWindowCallback());
    } else {
        mActionBar = null;
        // Re-set the original window callback since we may have already set a Toolbar wrapper
        mWindow.setCallback(mAppCompatWindowCallback);
    }
    invalidateOptionsMenu();
}
复制代码

参考文章如下:

1. www.jcodecraeer.com/a/anzhuokai…