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使用。