AppBarLayout+Toolbar的显示

Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏，以此来取代之前的 Actionbar 。与 Actionbar 相比，Toolbar 明显要灵活的多。它不像 Actionbar 一样，一定要固定在Activity的顶部，而是可以放到界面的任意位置。除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

今天，我做一个简单的AppBarLayout+Toolbar的集成，来教大家如何简单的实现一个toolbar的效果。

1.先添加依赖库Support Library

最主要的原因就是：为了能在低版本的Android系统上使用高版本的SDK才具有的新功能、新特性。比如，Fragment，ActionBar、Material Design风格等。

Google把这些高版本SDK才具有的新特性打包进Support Library，当开发者想使用这些新特性，又需要兼容老版本Android系统时，就可以引入Support Library。当然，这些打包进Support Library的新特性，全部都被完整的包含在了最新的Android SDK中。所以如果开发者的App仅支持最新系统，也可以不引入Support Library。

由于笔者的android手机是低版本的，所有需要引入这个库（公司快给钱换好测试机。。。）

compile 'com.android.support:design:26.1.0'

2. 引入布局文件

我是在一个LineraLayout中，使用include的方法，加入toolbar的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_bar"
        android:layout_width="match_parent"
        android:layout_height="47dp">

        <include layout="@layout/toolbar_main" />
    </android.support.design.widget.AppBarLayout>

</LinearLayout>

toolbar的布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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:id="@+id/tb_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:theme="@style/ToolbarStyle">
    <!--app:navigationIcon="?attr/homeAsUpIndicator"-->
    <TextView
        android:id="@+id/tv_toolbar_title"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@color/white"
        tools:text="title标题" />

</android.support.v7.widget.Toolbar>

里面的theme和textColor请读者自行设置，不会设置的可以把这个两行删除调。

3.MainActivity里的配置

不多说了，直接上代码

class MainActivity : AppCompatActivity() {
    private var tvTitle: TextView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(R.layout.activity_main)
        initToolbar(true)
    }

    /**
     * 设置标题
     */
    override fun onTitleChanged(title: CharSequence?, color: Int) {
        super.onTitleChanged(title, color)
        this.tvTitle?.text = title
    }

    /**
     * showHomeAsUp: 是否显示回退按钮以及是或否能够回退
     */
    private fun initToolbar(showHomeAsUp: Boolean) {
        val toolbar = findViewById<Toolbar>(R.id.tb_toolbar)
        if (toolbar != null) {
            setSupportActionBar(toolbar)
            tvTitle = toolbar.findViewById(R.id.tv_toolbar_title)
        }
        supportActionBar?.setDisplayHomeAsUpEnabled(showHomeAsUp)
        supportActionBar?.setDisplayShowHomeEnabled(showHomeAsUp)
        if (tvTitle != null) {
            supportActionBar?.setDisplayShowTitleEnabled(false)
        }
    }

    /**
     * 显示或者隐藏ToolBar
     */
    fun setToolBarHidden(showToolbar: Boolean) {
        val toolbar = findViewById<Toolbar>(R.id.tb_toolbar)
        if (toolbar != null && !showToolbar)
            toolbar.visibility = View.GONE
        else
            toolbar.visibility = View.VISIBLE
    }

    /**
     * 设置Toolbar左侧的返回按钮挑战到指定页面
     */
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            android.R.id.home -> {
                val intent = Intent(this,SecondActivity::class.java)
                intent.putExtra("id",1)
                startActivity(intent)
                finish()
            }
        }

        return true
    }
}

以上完成了一个简单的Toolbar使用。

AppBarLayout+Toolbar的显示

猜你喜欢