Android ActionBar和ToolBar的使用

參考

1、android中的ActionBar和ToolBar
2、『Material Design入門學(xué)習(xí)筆記』主題與AppCompatActivity（附demo）
3、Android開(kāi)發(fā)：最詳細(xì)的 Toolbar 開(kāi)發(fā)實(shí)踐總結(jié)
4、Toolbar設(shè)置詳解----掉坑總結(jié)

前言

自android5.0開(kāi)始，AppCompatActivity代替ActionBarActivity，而且ToolBar也代替了ActionBar，下面就是ActionBar和ToolBar的使用

ActionBar

1、截圖

image.png

2、使用

2.1、AppCompatActivity和其對(duì)應(yīng)的Theme
  • AppCompatActivity使用的是v7的ActionBar（和默認(rèn)的ActionBar使用起來(lái)略有區(qū)別，一會(huì)代碼中會(huì)有體現(xiàn)）
  • Theme的話繼承于Theme.AppCompat.Light.DarkActionBar，系統(tǒng)提供的深色系的actionbar，那么按鈕，文字，和菜單是白色的
//Activity
public class ActionBarActivity extends AppCompatActivity

//style
<!--默認(rèn)所有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()，默認(rèn)的是getActionBar()} 
        //AppCompatActivity use v7 action bar
        actionBar = this.getSupportActionBar();
        //Activity use action bar
        //actionBar = this.getActionBar();

        if(actionBar == null){
            return;
        }
  • 設(shè)置主副標(biāo)題
        //主標(biāo)題
        actionBar.setTitle("ActionBar Title");
        //副標(biāo)題
        actionBar.setSubtitle("Sub Title");
  • 設(shè)置navigation up按鈕：可見(jiàn)+可用+更換圖標(biāo)
        //左側(cè)按鈕：可見(jiàn)+可用+更換圖標(biāo)
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeButtonEnabled(true);
        //actionBar.setHomeAsUpIndicator(R.mipmap.back_white);
  • 設(shè)置navigation up按鈕的監(jiān)聽(tīng)：復(fù)寫onSupportNavigateUp()，\color{red}{但是如果有menu復(fù)寫onOptionsItemSelected函數(shù)的話，則onSupportNavigateUp()將不會(huì)被調(diào)用} 
/**
     * 復(fù)寫：左側(cè)按鈕點(diǎn)擊動(dòng)作
     * android.R.id.home
     * v7 actionbar back event
     * 注意：如果復(fù)寫了onOptionsItemSelected方法，則onSupportNavigateUp無(wú)用
     * */
    @Override
    public boolean onSupportNavigateUp() {
        finish();
        return super.onSupportNavigateUp();
    }

    /**
     * 復(fù)寫：左側(cè)按鈕點(diǎn)擊動(dòng)作
     * android.R.id.home
     * actionbar back event
     * 注意：如果復(fù)寫了onOptionsItemSelected方法，則onSupportNavigateUp無(wú)用
    @Override
    public boolean onNavigateUp() {
        finish();
        return super.onNavigateUp();
    }* */
  • 設(shè)置logo（icon等）：用logo代替icon，不知道為什么不靈？？
        //設(shè)置logo
        actionBar.setLogo(android.R.mipmap.sym_def_app_icon);
        actionBar.setDisplayUseLogoEnabled(true);
        //設(shè)置icon：use logo instead of an icon
        //actionBar.setIcon(R.mipmap.ic_launcher);
  • 設(shè)置菜單menu和對(duì)應(yīng)監(jiān)聽(tīng)：android.R.id.home就是左側(cè)的navigation up按鈕
   /**
     * 復(fù)寫：添加菜單布局
     * */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }

    /**
     * 復(fù)寫：設(shè)置菜單監(jiān)聽(tīng)
     * */
    @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;
    }
  • 設(shè)置tab和對(duì)應(yīng)監(jiān)聽(tīng)
        //增加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（共通的菜單，不細(xì)說(shuō)）

1、showAsAction屬性

  • always表示永遠(yuǎn)顯示在ActionBar中，如果屏幕空間不夠則無(wú)法顯示
  • ifRoom表示屏幕空間夠的情況下顯示在ActionBar中，不夠的話就顯示在overflow中
  • never則表示永遠(yuǎn)顯示在overflow中
  • withText：這個(gè)值使菜單項(xiàng)和它的圖標(biāo)，文本一起顯示

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表示永遠(yuǎn)顯示在ActionBar中，如果屏幕空間不夠則無(wú)法顯示
        ifRoom表示屏幕空間夠的情況下顯示在ActionBar中，不夠的話就顯示在overflow中
        never則表示永遠(yuǎn)顯示在overflow中
        withText：這個(gè)值使菜單項(xiàng)和它的圖標(biāo)，文本一起顯示-->

    <!--menuCategory：同種菜單項(xiàng)的種類。該屬性可取4個(gè)值：container、system、secondary和alternative。-->

    <!--orderInCategor:同種類菜單的排列順序。該屬性需要設(shè)置一個(gè)整數(shù)值-->

    <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和其差不多，更加強(qiáng)大，更加符合MD風(fēng)格，然后就代替ActionBar，使用起來(lái)差不多，但是又UI上的坑

1、截圖：顏色不正常的

image.png

2、使用

2.1、隱藏ActionBar有4中方式
  • 1、如果繼承了theme有actionbar的則，在setContentView方法之前設(shè)置：v7的supportRequestWindowFeature(Window.FEATURE_NO_TITLE);或者非v7的requestWindowFeature(Window.FEATURE_NO_TITLE);
  • 2、theme直接繼承沒(méi)有actionbar的，比如說(shuō)：Theme.AppCompat.Light.NoActionBar
  • 3、theme中沒(méi)設(shè)置屬性沒(méi)有actionbar：<item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
  • 4、actionBar.hide();
2.2、AppCompatActivity和其對(duì)應(yīng)的Theme
//activity
public class ToolBarActivity extends AppCompatActivity

//style
    <!--默認(rèn)所有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的，當(dāng)然可以設(shè)置在baseactivity中通用，然后include進(jìn)來(lái)-->
    <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，這里設(shè)置toolbar的標(biāo)題必須在setSupportActionBar之前，否則無(wú)用
       //隱藏默認(rèn)actionbar
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.hide();
        }

        //獲取toolbar
        toolBar = findViewById(R.id.toolbar);
        //主標(biāo)題，必須在setSupportActionBar之前設(shè)置，否則無(wú)效，如果放在其他位置，則直接setTitle即可
        toolBar.setTitle("ToolBar Title");
        //用toolbar替換actionbar
        setSupportActionBar(toolBar);
  • 設(shè)置副標(biāo)題
        //副標(biāo)題+顏色
        toolBar.setSubtitle("Sub Title");
  • 設(shè)置navigation up按鈕的圖標(biāo)和點(diǎn)擊監(jiān)聽(tīng)
        //左側(cè)按鈕：可見(jiàn)+更換圖標(biāo)+點(diǎn)擊監(jiān)聽(tīng)
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);//顯示toolbar的返回按鈕
        //toolBar.setNavigationIcon(R.mipmap.back_white);
        toolBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
  • 設(shè)置logo
         //設(shè)置logo
        toolBar.setLogo(android.R.mipmap.sym_def_app_icon);
  • 設(shè)置菜單menu及其監(jiān)聽(tīng)
/**
     * 復(fù)寫：添加菜單布局
     * */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }

    /**
     * 復(fù)寫：設(shè)置菜單監(jiān)聽(tīng)
     * */
    @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來(lái)控制顏色正常，或自定義顏色

4.1、ToolBar顯然顏色不對(duì)，那找找為啥ActionBar的時(shí)候?qū)Φ?，直覺(jué)告訴我是theme的問(wèn)題，于是找Theme.AppCompat.Light.DarkActionBar，點(diǎn)擊進(jìn)去看會(huì)看到
  • actionBarPopupThem是Light的，就是menu菜單點(diǎn)擊彈出那個(gè)
  • actionBarTheme是深色系的，那么控制按鈕圖標(biāo)和主副標(biāo)題顏色就是白色的
<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：這里面就是繼承剛剛找到的東西，當(dāng)然也可以再自定義顏色咯
    <!--給toolbar單獨(dú)設(shè)置的theme，讓toolbar上按鈕顏和文字顏色變化的-->
    <style name="MyDarkToolBarTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <!--toolbar圖標(biāo)顏色-->
        <!--<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內(nèi)單獨(dú)設(shè)置的theme，讓toolbar上按鈕顏和文字顏色變化的-->
    <style name="MyLightPopupTheme" parent="ThemeOverlay.AppCompat.Light">
        <!--設(shè)置背景-->
        <!--<item name="android:background">@android:color/white</item>-->
        <!--設(shè)置字體顏色-->
        <!--<item name="android:textColor">@color/colorAccent</item>-->
        <!--設(shè)置不覆蓋錨點(diǎn)-->
        <!--<item name="overlapAnchor">false</item>-->
    </style>
4.3、添加Toolbar的theme和popuptheme
//需添加
xmlns:app="http://schemas.android.com/apk/res-auto"

<!--這里是代替actionbar的，當(dāng)然可以設(shè)置在baseactivity中通用，然后include進(jìn)來(lái)-->
    <android.support.v7.widget.Toolbar
        省略...
        app:theme="@style/MyDarkToolBarTheme"
        app:popupTheme="@style/MyLightPopupTheme">

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

大功告成

以上就是ActionBar和ToolBar的入門使用，后面配合上系統(tǒng)的StatusBar和NavigationBar，并實(shí)現(xiàn)沉浸式還有的煩，但這些都屬于基礎(chǔ)部分，得打牢UI基礎(chǔ)。

友情鏈接>>> Android 沉浸式風(fēng)格（為毛叫沉浸式這么唬人）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容