Android查缺补漏之Toolbar

2024-02-04 20:32
文章标签 android toolbar 补漏 查缺

本文主要是介绍Android查缺补漏之Toolbar,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在移动应用中,顶部工具栏是一种很常见的东西,尤其是在iOS中,顶部工具栏放上一个返回按钮几乎成了标配,而大部分设计人员,会趋向于iOS和Android两端保持一致,所以在自带返回键的安卓设备中,顶部栏也越来越多。


图为Android某版本系统应用的工具栏

Android系统在3.0版本就提供了Actionbar的功能,但是当时的Actionbar并不是很完善,就连Google官方都在一定程度上承认Actionbar限制了Android开发与设计的弹性。因此在以前的开发中很少使用原生的Actionbar,大多都是自己封装一个View来实现顶部栏所需的各种功能。

在Android5.0中,Google提供了一种全新的控件,叫做Toolbar,并且建议开发者使用Toolbar替换Actionbar。在Material design中也规范了其名称:App bar.

Toolbar的优势

相比于Actionbar,Toolbar具有很多的优点,包括但不仅限于:
  • Toolbar继承于ViewGroup而Actionbar继承于Object,因此Toolbar在配置的时候更加方便;
  • 可定制性高,使用起来更加灵活;
  • 能够显示用户当前所处的位置;
  • 能够提供一些重要的交互操作;
  • 可以实现导航功能,使用户更加方便的回到HomeActivity。

Toolbar基本使用方法

Toolbar存在于support v7中,我们在使用时需要先导入这个包,在Android Studio中,可以直接在gradle里面增加,如果仍在使用Eclipse,可以切到Android Studio再修改gradle :)
dependencies {compile fileTree(dir: 'libs', include: ['*.jar'])compile 'com.android.support:appcompat-v7:24.2.0'
}
导入第三方库后,我们需要先将应用中原有的Actionbar隐藏掉,在style.xml增加一种新的主题NoActionBar
<resources><!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style><style name="AppTheme.NoActionBar"><item name="windowActionBar">false</item><item name="windowNoTitle">true</item></style></resources>
然后在manifests中,将application的主题设为NoActionBar,当然也可以针对单一Activity设置
 <applicationandroid:allowBackup="true"android:icon="@mipmap/ic_launcher"android:label="@string/app_name"android:supportsRtl="true"android:theme="@style/AppTheme.NoActionBar">
在布局文件中,增加Toolbar,注意调用此布局的Activity必须继承AppCompatActivity
    <android.support.v7.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="wrap_content"android:background="@color/colorPrimary"app:logo="@mipmap/ic_launcher"app:title="hello toolbar"app:titleTextColor="#ffffff"></android.support.v7.widget.Toolbar>
最基本的Toolbar导入完成,编译后可以看到以下效果

Toolbar自定义属性

进入Toolbar的源码中,能够看到定义了一些view常规属性之外的属性
 * @attr ref android.support.v7.appcompat.R.styleable#Toolbar_buttonGravity* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_collapseContentDescription* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_collapseIcon* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetEnd* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetLeft* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetRight* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetStart* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetStartWithNavigation* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_contentInsetEndWithActions* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_android_gravity* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_logo* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_logoDescription* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_maxButtonHeight* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_navigationContentDescription* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_navigationIcon* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_popupTheme* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_subtitle* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_subtitleTextAppearance* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_subtitleTextColor* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_title* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMargin* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginBottom* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginEnd* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginStart* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleMarginTop* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleTextAppearance* @attr ref android.support.v7.appcompat.R.styleable#Toolbar_titleTextColor
这些属性的命名和View的个属性风格相同,很容易就能够理解它们的含义。在xml中如果需要定义这些属性,需要设置
xmlns:app="http://schemas.android.com/apk/res-auto"
然后通过app:xxx进行引用。
不过在测试的时候发现,并不是所有属性在布局文件中设置都会生效,有一些需要在activity中设置supportActionBar之后才可以,有些则需要在这之前(这些可以在xml中直接使用),例如:
 mToolbar = (Toolbar)findViewById(R.id.toolbar);mToolbar.setTitle("title");setSupportActionBar(mToolbar);mToolbar.setNavigationIcon(R.mipmap.ic_launcher);

Toolbar个性化设置

设置标题、子标题、logo

 private void initToolbar(){mToolbar = (Toolbar)findViewById(R.id.toolbar);mToolbar.setTitle("title");mToolbar.setSubtitle("sub title");mToolbar.setTitleTextColor(0xffffffff);mToolbar.setSubtitleTextColor(0xffffffff);mToolbar.setLogo(R.mipmap.back);setSupportActionBar(mToolbar);}

设置返回按钮

    private void initToolbar(){mToolbar = (Toolbar)findViewById(R.id.toolbar);mToolbar.setTitle("title");mToolbar.setSubtitle("sub title");mToolbar.setTitleTextColor(0xffffffff);mToolbar.setSubtitleTextColor(0xffffffff);mToolbar.setNavigationIcon(R.mipmap.back);setSupportActionBar(mToolbar);mToolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(MainActivity.this,"back",Toast.LENGTH_SHORT).show();}});}

overflow

overflow是安卓标题栏中弹出的menu,首先需要写一个menu对应的xml文件
<?xml version="1.0" encoding="utf-8"?>
<menu 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"><itemandroid:id="@+id/item1"android:title="这是第一个选项"app:showAsAction="never"/><itemandroid:id="@+id/item2"android:title="这是第二个选项"app:showAsAction="never"/>
</menu>
里面的两个item对应两个不同的选项,之后,在Activity中调用相应的xml
    @Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.menu,menu);return true;}
这样便得到了一个最基础的overflow
但是这个overflow的效果看起来并不能让人满意,接着我们对其进行优化。将按钮颜色变成白色,同时让弹出的窗口移到bar的下面。
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
在布局文件中修改Toolbar的属性,即可将按钮的颜色变成白色。然后在style.xml增加一个新的xml
    <style name="OverFlowMenuTheme" parent="Theme.AppCompat.NoActionBar"><!-- 设置Menu菜单的背景色 --><item name="android:itemBackground">@android:color/white</item><!-- 设置Menu菜单的字体颜色 --><item name="android:textColorPrimary">@android:color/black</item><!-- 设置Menu窗口不覆盖Toolbar视图 --><item name="overlapAnchor">false</item></style>
再修改toolbar的popuptheme
app:popupTheme="@style/OverFlowMenuTheme"
即完成对弹窗的优化
对于item的点击事件,通过onOptionsItemSelected实现
   @Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()){case R.id.item1:Toast.makeText(MainActivity.this,"选择第一个选项",Toast.LENGTH_SHORT).show();break;case R.id.item2:Toast.makeText(MainActivity.this,"选择第二个选项",Toast.LENGTH_SHORT).show();break;}return super.onOptionsItemSelected(item);}

搜索

在Toolbar中,我们可以很容易实现搜索的功能,先在menu.xml中定义一个按钮
    <itemandroid:id="@+id/action_search"android:icon="@mipmap/search"android:title="搜索"app:showAsAction="ifRoom|collapseActionView"app:actionViewClass="android.support.v7.widget.SearchView"/>

然后在activity中重写onCreateOptionMenu方法
    @Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.menu,menu);MenuItem searchItem = menu.findItem(R.id.action_search);SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);;//设置searchView相关逻辑return true;}



Toolbar的相关使用方法基本就是这样,可以看出Toolbar比Actionbar确实提升了很多,完全能够满足日常开发的需要,我们也不需要再去自己定义Actionbar了。当然,Toolbar的用法远不止这些,要实现什么效果,就要看各位开发者的了。

参考文章:
http://blog.csdn.net/h_zhang/article/details/51232773
http://www.tuicool.com/articles/RjYfq27
http://blog.csdn.net/c12366456/article/details/51534816

这篇关于Android查缺补漏之Toolbar的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/678718

相关文章

在Android平台上实现消息推送功能

《在Android平台上实现消息推送功能》随着移动互联网应用的飞速发展,消息推送已成为移动应用中不可或缺的功能,在Android平台上,实现消息推送涉及到服务端的消息发送、客户端的消息接收、通知渠道(... 目录一、项目概述二、相关知识介绍2.1 消息推送的基本原理2.2 Firebase Cloud Me

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Android如何获取当前CPU频率和占用率

《Android如何获取当前CPU频率和占用率》最近在优化App的性能,需要获取当前CPU视频频率和占用率,所以本文小编就来和大家总结一下如何在Android中获取当前CPU频率和占用率吧... 最近在优化 App 的性能,需要获取当前 CPU视频频率和占用率,通过查询资料,大致思路如下:目前没有标准的

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结:一、Service 的两种类型:1. 前台服务(必须亮身份牌)2. 后台服务(偷偷干