Android 笔记 —— Toolbar 使用总结

Toolbar 是在 Android5.0 推出的一款 MD 风格的导航控件,主要是为了替换 Actionbar 的。与 Actionbar 相比,Toolbar 非常灵活,我们可以自由地在 Toolbar 内添加子控件。

使用 Toolbar

由于 Toolbar 是在 Android5.0 才开始加上的,低版本要使用的话,需要引入 support-v7 兼容包,使用 android.support.v7.widget.Toolbar 进行开发。

compile 'com.android.support:appcompat-v7:25.3.1'
修改 style

打开 res/values/styles.xml,默认配置如下:

<!-- 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 属性所对应的涵义


style 属性
隐藏默认的 Toolbar
  • 方式1

改成其他没有 Toolbar 的主题

parent="Theme.AppCompat.Light.NoActionBar"
  • 方式2

自己建立一个主题,并在属性中设置无 Toolbar

<style name="AppTheme" parent="AppTheme.Base">
   </style>
   
   <style name="AppTheme.Base" parent="AppTheme">
       <!--将ActionBar隐藏,这里使用ToolBar-->
       <item name="windowActionBar">false</item>
       <!-- 使用 API Level 22以上编译的话,要拿掉前綴字 -->
       <item name="windowNoTitle">true</item>
       <!--colorPrimaryDark对应状态栏的颜色-->
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <!--colorPrimary 对应ToolBar的颜色-->
       <item name="colorPrimary">@color/colorPrimary</item>
       <!--colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。-->
       <item name="colorAccent">@color/colorAccent</item>
       <!--窗口的颜色-->
       <item name="android:windowBackground">@color/colorWindow</item>
   </style>

如果不隐藏默认 Toolbar,在代码中对 Toolbar 进行 setSupportActionBar 操作时,会报错:

Caused by: java.lang.IllegalStateException: This Activity already has an action bar 
supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set 
windowActionBar to false in your theme to use a Toolbar instead.
在布局文件中添加 Toolbar 控件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/activity_main"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.ginkwang.toolbarsample.MainActivity">
​
   <android.support.v7.widget.Toolbar
       android:id="@+id/tb_main"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       android:background="?attr/colorPrimary"/>
</RelativeLayout>

?attr/actionBarSize : 表示根据屏幕的分辨率采用系统默认的高度 如果低版本也要使用的话,则需要使用v7包的,否则只有api21上才能有效

Java 文件中调用

Toolbar 的一些属常用属性也在代码中使用并写明作用了。

public class MainActivity extends AppCompatActivity {
​
   private Toolbar mTbMain;
​
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       initView();
   }
​
   private void initView() {
       mTbMain = (Toolbar) findViewById(R.id.tb_main);
       //设置 APP logo
       mTbMain.setLogo(R.mipmap.ic_logo);
       //设置主标题,默认为 app_label
       mTbMain.setTitle("标题");
       //设置主标题文字颜色
       mTbMain.setTitleTextColor(getResources().getColor(R.color.colorWhiteOne));
       //设置副标题
       mTbMain.setSubtitle("副标题");
       //设置副标题颜色
       mTbMain.setSubtitleTextColor(getResources().getColor(R.color.colorWhiteTwo));
       //设置侧边栏(抽屉)的按钮
       mTbMain.setNavigationIcon(R.mipmap.ic_navigation);
       //取代原本的 Actionbar
       setSupportActionBar(mTbMain);
   }
}

效果图:

Toolbar 基本使用

Toolbar 的高级用法

NavigationIcon 点击事件

设置 NavigationIcon 的点击事件,需要放在 setSupportActionBar 之后设置才会生效,因为setSupportActionBar 里面也会 setNavigationOnClickListener()

setSupportActionBar(mTbMain);
//设置NavigationIcon的点击事件,需要放在setSupportActionBar之后设置才会生效,
//因为setSupportActionBar里面也会setNavigationOnClickListener
mTbMain.setNavigationOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View pView) {
         // TODO: 2017/5/5 添加抽屉
     }
});
添加菜单 Menu
  • 菜单布局
<?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">
​
   <item
       android:id="@+id/menu_item_share"
       android:icon="@mipmap/ic_share"
       android:orderInCategory="1"
       android:title="@string/menu_share"
       app:showAsAction="always"/>
​
   <item
       android:id="@+id/menu_item_about"
       android:icon="@mipmap/ic_about"
       android:orderInCategory="2"
       android:title="@string/menu_about"
       app:showAsAction="ifRoom"/>
​
   <item
       android:id="@+id/menu_item_more"
       android:icon="@mipmap/ic_more"
       android:orderInCategory="3"
       android:title="@string/menu_more"
       app:showAsAction="never"/>
</menu>

其中,
android:orderInCategory 属性代表 actionbar 里每个item的优先级,值越大优先级越低
app:showAsAction 属性表示是否在 ToolBar 上显示按钮,属性值有如下几种:

  • always:使菜单项一直显示在ToolBar上

  • ifRoom:如果有足够的空间,这个值会使菜单项显示在ToolBar上

  • never:使菜单项永远都不出现在ToolBar上,在…的子项中显示

  • withText:使菜单项和它的图标,菜单文本一起显示

由于showAsAction属性是在支持包中定义的,所以需要添加命名空间:

xmlns:app="http://schemas.android.com/apk/res-auto"
Java 代码中添加 Menu 监听
  • 方法一
    重写onCreateOptionsMenu(Menu menu)、onOptionsItemSelected(MenuItem item)
@Override
   public boolean onCreateOptionsMenu(Menu menu) {
       getMenuInflater().inflate(R.menu.menu_main, menu);
       return true;
   }
​
   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
       switch (item.getItemId()) {
           case R.id.menu_item_share:
               Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_LONG).show();
               break;
​
           case R.id.menu_item_about:
               Toast.makeText(MainActivity.this, "关于", Toast.LENGTH_LONG).show();
               break;
​
           case R.id.menu_item_more:
               Toast.makeText(MainActivity.this, "更多", Toast.LENGTH_LONG).show();
               break;
       }
       return true;
   }
  • 方法二
    重写onCreateOptionsMenu(Menu menu),通过toolbar.setOnMenuItemClickListener()监听
mTbMain.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
           @Override
           public boolean onMenuItemClick(MenuItem item) {
               switch (item.getItemId()) {
                   case R.id.menu_item_share:
                       Toast.makeText(MainActivity.this, "分享", Toast.LENGTH_LONG).show();
                       break;
​
                   case R.id.menu_item_about:
                       Toast.makeText(MainActivity.this, "关于", Toast.LENGTH_LONG).show();
                       break;
​
                   case R.id.menu_item_more:
                       Toast.makeText(MainActivity.this, "更多", Toast.LENGTH_LONG).show();
                       break;
               }
               return true;
           }
       });

跟 NavigationIcon 监听事件一样,都是要设置在 setSupportActionBar 之后才会生效。

效果图
Toolbar 上 menu icon
隐藏的 menu icon

参考
Android开发:最详细的 Toolbar 开发实践总结
ToolBar的使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容