首页手记 Android ActionBar和ToolBar的使用

Android ActionBar和ToolBar的使用

标签：

Android

前言

自android5.0开始，AppCompatActivity代替ActionBarActivity，而且ToolBar也代替了ActionBar，下面就是ActionBar和ToolBar的使用

ActionBar

1、截图

image.png

2、使用

2.1、AppCompatActivity和其对应的Theme

AppCompatActivity使用的是v7的ActionBar（和默认的ActionBar使用起来略有区别，一会代码中会有体现）
Theme的话继承于Theme.AppCompat.Light.DarkActionBar，系统提供的深色系的actionbar，那么按钮，文字，和菜单是白色的

//Activity
public class ActionBarActivity extends AppCompatActivity

//style<!--默认所有activity的actionbar的theme-->
    <style name="AppCompatActivity_ActionBarTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textAllCaps">false</item>
    </style>

2.2、ActionBar的使用

获取actionbar： $\color{red}{这里v7的是getSupportActionBar()，默认的是getActionBar()}$

        //AppCompatActivity use v7 action bar
        actionBar = this.getSupportActionBar();        //Activity use action bar
        //actionBar = this.getActionBar();

        if(actionBar == null){            return;
        }

设置主副标题

        //主标题
        actionBar.setTitle("ActionBar Title");        //副标题
        actionBar.setSubtitle("Sub Title");

设置navigation up按钮：可见+可用+更换图标

        //左侧按钮：可见+可用+更换图标
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeButtonEnabled(true);        //actionBar.setHomeAsUpIndicator(R.mipmap.back_white);

设置navigation up按钮的监听：复写onSupportNavigateUp()， $\color{red}{但是如果有menu复写onOptionsItemSelected函数的话，则onSupportNavigateUp()将不会被调用}$

/**
     * 复写：左侧按钮点击动作
     * android.R.id.home
     * v7 actionbar back event
     * 注意：如果复写了onOptionsItemSelected方法，则onSupportNavigateUp无用
     * */
    @Override
    public boolean onSupportNavigateUp() {
        finish();        return super.onSupportNavigateUp();
    }    /**
     * 复写：左侧按钮点击动作
     * android.R.id.home
     * actionbar back event
     * 注意：如果复写了onOptionsItemSelected方法，则onSupportNavigateUp无用    @Override
    public boolean onNavigateUp() {
        finish();
        return super.onNavigateUp();
    }* */

设置logo（icon等）：用logo代替icon，不知道为什么不灵？？

        //设置logo
        actionBar.setLogo(android.R.mipmap.sym_def_app_icon);
        actionBar.setDisplayUseLogoEnabled(true);        //设置icon：use logo instead of an icon
        //actionBar.setIcon(R.mipmap.ic_launcher);

设置菜单menu和对应监听：android.R.id.home就是左侧的navigation up按钮

   /**
     * 复写：添加菜单布局
     * */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);        return true;
    }    /**
     * 复写：设置菜单监听
     * */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {                //actionbar navigation up 按钮
            case android.R.id.home:
                finish();                break;            case R.id.action_refresh:
                Toast.makeText(this, "Refresh selected", Toast.LENGTH_SHORT).show();                break;            case R.id.action_add:
                Toast.makeText(this, "Add selected", Toast.LENGTH_SHORT).show();                break;            case R.id.action_settings:
                Toast.makeText(this, "Settings selected", Toast.LENGTH_SHORT).show();                break;            default:                break;
        }        return true;
    }

设置tab和对应监听

        //增加actionbar 下面的tab按钮
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        actionBar.addTab(actionBar.newTab().setText("Tab 1").setTabListener(new ActionBar.TabListener() {            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
                Toast.makeText(ActionBarActivity.this, "Tab 1 select",Toast.LENGTH_SHORT).show();
            }            @Override
            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }            @Override
            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }
        }));
        actionBar.addTab(actionBar.newTab().setText("Tab 2").setTabListener(new ActionBar.TabListener() {            @Override
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) {
                Toast.makeText(ActionBarActivity.this, "Tab 2 select",Toast.LENGTH_SHORT).show();
            }            @Override
            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }            @Override
            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction fragmentTransaction) { }
        }));

或者完全自定义

       //自定义
        actionBar.setCustomView(R.layout.actionbar_title);
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

隐藏、显示actionbar

case R.id.btn_hide:                if(actionBar != null){
                    /**
                     * 隐藏actionbar
                     * 1、有actionbar情况下：actionBar.hide();
                     * 2、直接使用Theme.Holo.NoActionBar
                     * 3、theme中添加属性
                     *      <item name="windowActionBar">false</item>
                     *      <item name="windowNoTitle">true</item>
                     * 4、在setContent之前 Window feature must be requested before adding content
                     *    AppCompatActivity: supportRequestWindowFeature(Window.FEATURE_NO_TITLE)，
                     *    Activity: requestWindowFeature(Window.FEATURE_NO_TITLE);
                     *
                     * */
                    actionBar.hide();
                }                break;            case R.id.btn_show:                if(actionBar != null){
                    actionBar.show();
                }                break;

-------------------------------------分割线-------------------------------

Menu（共通的菜单，不细说）

1、showAsAction属性

always表示永远显示在ActionBar中，如果屏幕空间不够则无法显示
ifRoom表示屏幕空间够的情况下显示在ActionBar中，不够的话就显示在overflow中
never则表示永远显示在overflow中
withText：这个值使菜单项和它的图标，文本一起显示

2、布局

<?xml version="1.0" encoding="utf-8"?><menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!--showAsAction属性
        always表示永远显示在ActionBar中，如果屏幕空间不够则无法显示
        ifRoom表示屏幕空间够的情况下显示在ActionBar中，不够的话就显示在overflow中
        never则表示永远显示在overflow中
        withText：这个值使菜单项和它的图标，文本一起显示-->

    <!--menuCategory：同种菜单项的种类。该属性可取4个值：container、system、secondary和alternative。-->

    <!--orderInCategor:同种类菜单的排列顺序。该属性需要设置一个整数值-->

    <item
        android:id="@+id/action_refresh"
        android:icon="@mipmap/refresh"
        android:title="Refresh"
        app:showAsAction="always" />
    <item
        android:id="@+id/action_add"
        android:icon="@mipmap/add"
        android:title="Add"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@mipmap/settings"
        android:title="Settings"
        app:showAsAction="never">
    </item></menu>

-------------------------------------分割线-------------------------------

ToolBar

了解了ActionBar的话，那么ToolBar和其差不多，更加强大，更加符合MD风格，然后就代替ActionBar，使用起来差不多，但是又UI上的坑

1、截图：颜色不正常的

image.png

2、使用

2.1、隐藏ActionBar有4中方式

1、如果继承了theme有actionbar的则，在setContentView方法之前设置：v7的supportRequestWindowFeature(Window.FEATURE_NO_TITLE);或者非v7的requestWindowFeature(Window.FEATURE_NO_TITLE);
2、theme直接继承没有actionbar的，比如说：Theme.AppCompat.Light.NoActionBar
3、theme中没设置属性没有actionbar：<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
4、actionBar.hide();

2.2、AppCompatActivity和其对应的Theme

//activity
public class ToolBarActivity extends AppCompatActivity

//style    <!--默认所有activity的toolbar的theme-->
    <!--<style name="AppCompatActivity_ToolBarTheme" parent="Theme.AppCompat.Light.NoActionBar">-->
    <style name="AppCompatActivity_ToolBarTheme" parent="Theme.AppCompat.Light">
        <!--不要actionbar，不要title-->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textAllCaps">false</item>
    </style>

ToolBar的使用

toolbar在layout中布局代码：
$\color{red}{这里面有UI的坑，就是深色toolbar，文字也是黑色的，难看}$

<!--这里是代替actionbar的，当然可以设置在baseactivity中通用，然后include进来-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize">

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

获取toolbar并取代actionbar，这里设置toolbar的标题必须在setSupportActionBar之前，否则无用

       //隐藏默认actionbar
        ActionBar actionBar = getSupportActionBar();        if(actionBar != null){
            actionBar.hide();
        }        //获取toolbar
        toolBar = findViewById(R.id.toolbar);        //主标题，必须在setSupportActionBar之前设置，否则无效，如果放在其他位置，则直接setTitle即可
        toolBar.setTitle("ToolBar Title");        //用toolbar替换actionbar
        setSupportActionBar(toolBar);

设置副标题

        //副标题+颜色
        toolBar.setSubtitle("Sub Title");

设置navigation up按钮的图标和点击监听

        //左侧按钮：可见+更换图标+点击监听
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示toolbar的返回按钮
        //toolBar.setNavigationIcon(R.mipmap.back_white);
        toolBar.setNavigationOnClickListener(new View.OnClickListener() {            @Override
            public void onClick(View v) {
                finish();
            }
        });

设置logo

         //设置logo
        toolBar.setLogo(android.R.mipmap.sym_def_app_icon);

设置菜单menu及其监听

/**
     * 复写：添加菜单布局
     * */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);        return true;
    }    /**
     * 复写：设置菜单监听
     * */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case R.id.action_refresh:
                Toast.makeText(this, "Refresh selected", Toast.LENGTH_SHORT).show();                break;            case R.id.action_add:
                Toast.makeText(this, "Add selected", Toast.LENGTH_SHORT).show();                break;            case R.id.action_settings:
                Toast.makeText(this, "Settings selected", Toast.LENGTH_SHORT).show();                break;            default:                break;
        }        return true;
    }

加载自定义toolbar：直接在toolbar的layout中写即可，可以是文字居中等等
隐藏、显示toolbar

 case R.id.btn_hide:                if(toolBar != null){
                    toolBar.setVisibility(View.GONE);
                }                break;            case R.id.btn_show:                if(toolBar != null){
                    toolBar.setVisibility(View.VISIBLE);
                }                break;

3、截图：颜色正常的

4、用ToolBar 的Theme和PopupTheme来控制颜色正常，或自定义颜色

4.1、ToolBar显然颜色不对，那找找为啥ActionBar的时候对的，直觉告诉我是theme的问题，于是找Theme.AppCompat.Light.DarkActionBar，点击进去看会看到

actionBarPopupThem是Light的，就是menu菜单点击弹出那个
actionBarTheme是深色系的，那么控制按钮图标和主副标题颜色就是白色的

<style name="Base.Theme.AppCompat.Light.DarkActionBar" parent="Base.Theme.AppCompat.Light">
        <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>
        <item name="actionBarWidgetTheme">@null</item>
        <item name="actionBarTheme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>

        <!-- Panel attributes -->
        <item name="listChoiceBackgroundIndicator">@drawable/abc_list_selector_holo_dark</item>

        <item name="colorPrimaryDark">@color/primary_dark_material_dark</item>
        <item name="colorPrimary">@color/primary_material_dark</item>
    </style>

4.2、新建Toolbar的theme和popuptheme：这里面就是继承刚刚找到的东西，当然也可以再自定义颜色咯

    <!--给toolbar单独设置的theme，让toolbar上按钮颜和文字颜色变化的-->
    <style name="MyDarkToolBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--toolbar图标颜色-->
        <!--<item name="colorControlNormal">@color/colorAccent</item>-->
        <!--toolbar的title颜色-->
        <!--<item name="android:textColorPrimary">@color/colorAccent</item>-->
        <!--toolbar的subtitle颜色-->
        <!--<item name="subtitleTextColor">@color/colorAccent</item>-->
    </style>

    <!--给toolbar的menu内单独设置的theme，让toolbar上按钮颜和文字颜色变化的-->
    <style name="MyLightPopupTheme" parent="ThemeOverlay.AppCompat.Light">
        <!--设置背景-->
        <!--<item name="android:background">@android:color/white</item>-->
        <!--设置字体颜色-->
        <!--<item name="android:textColor">@color/colorAccent</item>-->
        <!--设置不覆盖锚点-->
        <!--<item name="overlapAnchor">false</item>-->
    </style>

4.3、添加Toolbar的theme和popuptheme

//需添加
xmlns:app="http://schemas.android.com/apk/res-auto"<!--这里是代替actionbar的，当然可以设置在baseactivity中通用，然后include进来-->
    <android.support.v7.widget.Toolbar
        省略...
        app:theme="@style/MyDarkToolBarTheme"
        app:popupTheme="@style/MyLightPopupTheme">

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

作者：Kandy_JS
链接：https://www.jianshu.com/p/81d0bcb282cb

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕神8447489

手记
篇

粉丝

174

获赞与收藏

956

关注作者，订阅最新文章

相关文章推荐

ActionBar详解和toolbar详解

1.2 ActionBar ToolBar

安卓toolbar的使用

Toolbar的使用

再使用Toolbar的时候，如何隐藏ActionBar

阅读免费教程

Android 入门教程

59个小节 43346 459

Android Studio 编辑器教程

40个小节 11770 240

后端通用面试教程

41个小节 30273 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Android ActionBar和ToolBar的使用

前言

自android5.0开始，AppCompatActivity代替ActionBarActivity，而且ToolBar也代替了ActionBar，下面就是ActionBar和ToolBar的使用

ActionBar

1、截图

2、使用

2.1、AppCompatActivity和其对应的Theme

2.2、ActionBar的使用

Menu（共通的菜单，不细说）

1、showAsAction属性

2、布局

ToolBar

1、截图：颜色不正常的

2、使用

2.1、隐藏ActionBar有4中方式

2.2、AppCompatActivity和其对应的Theme

ToolBar的使用

3、截图：颜色正常的

4、用ToolBar 的Theme和PopupTheme来控制颜色正常，或自定义颜色

4.1、ToolBar显然颜色不对，那找找为啥ActionBar的时候对的，直觉告诉我是theme的问题，于是找Theme.AppCompat.Light.DarkActionBar，点击进去看会看到

4.2、新建Toolbar的theme和popuptheme：这里面就是继承刚刚找到的东西，当然也可以再自定义颜色咯

4.3、添加Toolbar的theme和popuptheme

相关文章推荐

阅读免费教程