300字范文 > 【Android】原来Toolbar还能这么用？Toolbar使用最全解析。网友：终于不用老是自定义标题栏啦

【Android】原来Toolbar还能这么用？Toolbar使用最全解析。网友：终于不用老是自定义标题栏啦

时间：2020-11-17 07:02:44

一个Toolbar的UI可以做成什么样？做出什么效果？这是我最近在研究的问题。

带导航图标的Toolbar带标题的Toolbar带小标题的Toolbar带Logo的Toolbar带进度条的Toolbar带菜单的Toolbar两个菜单的Toolbar标题居中的Toolbar带搜索框的Toolbar带导航栏的Toolbar带侧滑菜单栏的Toolbar滚动页面隐藏Toolbar（一）滚动页面隐藏Toolbar（二）

除带导航栏的Toolbar、带侧滑菜单栏的Toolbar、滚动页面隐藏Toolbar外，用的都是该xml布局：

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"android:background="@color/purple_700"/></androidx.constraintlayout.widget.ConstraintLayout>

带导航图标的Toolbar

实现效果：

带标题的Toolbar

实现效果：

带小标题的Toolbar

实现效果：

带Logo的Toolbar

实现效果：

带进度条的Toolbar

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_constraintTop_toTopOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"android:background="@color/purple_700"/><ProgressBarandroid:id="@+id/progressBar"style="?android:attr/progressBarStyleHorizontal"android:layout_width="match_parent"android:layout_height="5dp"app:layout_constraintTop_toBottomOf="@id/toolbar"app:layout_constraintLeft_toLeftOf="@id/toolbar"app:layout_constraintRight_toRightOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout>

实现效果：

带菜单的Toolbar

在Toolbar上建一个菜单，那就得建一个menu的文件夹与xml文件

鼠标右击res文件夹→New→Android Resource Directory

在弹出的窗口，Resource type选择menu即可

点击OK后会在res文件夹下生成一个menu文件夹，在这里新建一个xml文件，粘贴一下内容

<menu xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"><itemandroid:id="@+id/share"android:title="分享"/><itemandroid:id="@+id/save"android:title="保存"/></menu>

紧接着Toolbar调用inflateMenu方法绑定创建的xml布局即可实现，只是这个时候还没有对这个菜单做个性化，它是默认的3点黑色圆点的效果，使用setOverflowIcon(Drawable icon)方法对其设置图标后，就成了下面的样子。

点击三个小圆点效果：

两个菜单的Toolbar

设置一个Toolbar有多个菜单，不需要修改Java代码，只要在menu文件的对应item下添加app:showAsAction="always"即可，showAsAction有五个参数，分别是：

实现效果：

标题居中的Toolbar

标题居中这一样式实现并不是用Toolbar的setTitleGravity方法，当然也没这样的方法给你。实现标题居中，主要还是得靠Toolbar里的子组件：

<TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="标题"android:textSize="16sp"android:textColor="@color/white"android:layout_gravity="center"android:visibility="invisible"/>

在Toolbar里加上TextView，我们提前在布局上将TextView居中于父组件之中，需要将标题居中的时候调用setVisibility方法，放置View.VISIBLE参数即可将标题居中的样式展示出来。

实现效果：

值得注意的是，在设置各种各样的Toolbar子组件时，切互将子组件的宽度设置为match_parent，子组件的宽度过大，会使Toolbar的一些样式被子组件所覆盖。

带搜索框的Toolbar

带搜索框的Toolbar，使用的是SearchView实现。实现的这一效果，特别需要注意，一定要加上setSupportActionBar(Toolbar toolbar)且将它放在Toolbar初始化后的一行。

接着，重写onCreateOptionsMenu(Menu menu)方法，使用Menu的打气筒绑定一个menu，写一个initSearchView(menu: Menu)方法设置SearchView的一些样式

override fun onCreateOptionsMenu(menu: Menu?): Boolean {menuInflater.inflate(R.menu.menu_toolbar3,menu)initSearchView(menu!!)return super.onCreateOptionsMenu(menu)}fun initSearchView(menu: Menu){val item = menu.findItem(R.id.search)// 获取搜索框对象val searchView = item.actionView as SearchViewsearchView.isIconified = true// actionView.setIconifiedByDefault(getIntent().getBooleanExtra("collapse",true));// 设置是否显示搜索按钮searchView.isSubmitButtonEnabled = true// 从系统服务获取搜索的管理器val systemService = getSystemService(SEARCH_SERVICE) as SearchManager// 创建搜索结果页面的组件名称对象val componentName = ComponentName(this, BackButtonActivity::class.java)// 从结果页面注册的activity结点获取相关搜索信息，即searchable.xml定义的搜索控件val searchableInfo = systemService.getSearchableInfo(componentName)// 设置搜索框的可搜索信息searchView.setSearchableInfo(searchableInfo)// 从搜索框中获取名叫search_src_text的自动完成编辑框val search_text: SearchAutoComplete = searchView.findViewById(R.id.search_src_text)// 设置文本颜色search_text.setTextColor(Color.BLACK)// 设置自动完成编辑框的提示文本颜色search_text.setHintTextColor(Color.BLACK)// 设置文本类型searchView.inputType = InputType.TYPE_CLASS_TEXT// 设置搜索提示文本searchView.queryHint = "请输入搜索内容"// 为搜索框设置文本变化监听searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {override fun onQueryTextSubmit(query: String): Boolean {// 搜索关键词完成输入Toast.makeText(this@BackButtonActivity, "最终输入结果：$query", Toast.LENGTH_SHORT).show()return false}override fun onQueryTextChange(newText: String): Boolean {// 搜索关键词发生变化Toast.makeText(this@BackButtonActivity, "关键词发生改变：$newText", Toast.LENGTH_SHORT).show()return false}})}

哦，对了，这玩意还得在AndroidManifest.xml的application节点下加点代码

<activity android:name="使用SearchView的Activity"><intent-filter><action android:name="android.intent.action.SEARCH" /></intent-filter><meta-dataandroid:name="android.app.searchable"android:resource="@xml/searchable" /></activity>

实现效果：

点击搜索按钮效果：

由于SearchView的控件是private与protected属性，并不能调用相关的取消、确定图标组件，理论上说是无法修改这些icon，使得能修改的样式极其有限，使用范围也大大缩减。

带导航栏的Toolbar

带导航栏的Toolbar效果与Toolbar标题居中同理，皆是在Toolbar组件里面加一个子组件，只是这个子组件加的是TabLayout，这个时候还没能实现TabLayout居中的效果，TabLayout的文本默认是靠左的，需要再嵌套一个布局，将TabLayout放在布局里面，用上android:gravity="center"就可以居中了。

xml代码：

实现效果：

带侧滑菜单栏的Toolbar

第一次做侧滑菜单，参考了几年前的一个例子，用的是动画+监听屏幕滑动+屏幕滑动后的各种操作。那个例子给我的体验就是，真TM复杂，效果还差的离谱，不优化完全用不了呀！

直到DrawerLayout的出现，问题也随之迎刃而解~

带侧滑菜单栏需要以androidx.drawerlayout.widget.DrawerLayout为根布局，DrawerLayout官网给的解释是实现一个材质设计抽屉小部件。

在以DrawerLayout为根Layout的xml文件可以编写两个界面，分别是Toolbar界面与侧滑菜单界面，要想展示侧滑菜单，必须在侧滑界面的第一层加上android:layout_gravity="left"以表示从左边出现。

随后监听Toolbar的点击事件，当用户点击时执行drawer.openDrawer(GravityCompat.START)展示侧滑菜单。

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".custon.Custon2Activity"android:id="@+id/drawer"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"/></LinearLayout><LinearLayoutandroid:layout_width="300dp"android:layout_height="match_parent"android:layout_gravity="left"android:orientation="vertical"android:background="@android:color/white"><TextViewandroid:id="@+id/text"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="侧滑菜单"/></LinearLayout></androidx.drawerlayout.widget.DrawerLayout>

实现效果：

滚动页面隐藏Toolbar（一）

CoordinatorLayout定位顶级应用程序小部件，如AppBarLayout、FloatingActionButton。

布局代码就贴出来了，想说也不懂说啥，全是xml代码，(⊙︿⊙)

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".custon.Custon3Activity"><androidx.coordinatorlayout.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_constraintLeft_toLeftOf="parent"app:layout_constraintRight_toRightOf="parent"app:layout_constraintTop_toTopOf="parent" ><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_scrollFlags="scroll|enterAlways"app:contentInsetStart="0dp"/></com.google.android.material.appbar.AppBarLayout></androidx.coordinatorlayout.widget.CoordinatorLayout></androidx.constraintlayout.widget.ConstraintLayout>

实现效果：

本文代码：Toolbar使用解析

滚动页面隐藏Toolbar（二）

使用的组件：

AppBarLayout：实现了材料设计应用栏概念的许多功能，即滚动手势。

CoordinatorLayout：实现折叠应用栏的包装器。

NestedScrollView：支持在新旧版本的 Android 上同时充当嵌套滚动父项和子项。默认情况下启用嵌套滚动。

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/app_bar"android:layout_width="match_parent"android:layout_height="180dp"android:fitsSystemWindows="true"android:theme="@style/AppBarOverlay"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/toolbar_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:toolbarId="@+id/toolbar"android:background="@drawable/a"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin"app:popupTheme="@style/PopupOverlay" /></com.google.android.material.appbar.CollapsingToolbarLayout></com.google.android.material.appbar.AppBarLayout><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"tools:context=".ScrollingActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="16dp"android:text="@string/large_text" /></androidx.core.widget.NestedScrollView></androidx.coordinatorlayout.widget.CoordinatorLayout>

实现效果：