天天看點

一探ActionBar和ToolBar的差別

ActionBar

ActionBar是一個确定使用者位置的視窗功能,并且能提供使用者操作和導航的子產品。使用ActionBar能夠為使用者提供一個熟悉的界面進行界面的切換,這個切換能夠使系統更優雅是适應不同螢幕的配置。

ActionBar提供以下幾個重要的功能:

  1. 提供一個專屬的空間給你的應用,标志和顯示使用者在應用程式中的位置。
  2. 在可預測的方法中,讓重要的操作更加突出和易操作(例如搜尋)。
  3. 支援内部一緻的導航和視圖切換應用程式(用标簽或下拉清單)

正常的ActionBar

ActionBar将空間分為4個不同的區域以适應大多數的App

一探ActionBar和ToolBar的差別

1. App icon

你的app應用的身份标志,如果你願意你可以替換成其他的logo。重要的:

如果你的app現在沒有顯示最頂層的界面,請確定顯示插入了左邊符号的app的icon,這樣使用者才能知道你的app應用層級結構。

2. View control

如果你的應用程式在不同的視圖顯示資料,這部分的操作欄允許使用者切換視圖。例如:view-switching控制下拉菜單或頁籤控件。

如果你的應用程式不支援不同的視圖,你也可以使用這個空間來顯示非互動式内容,比如應用程式标題或更長時間的品牌資訊。

3. Action Buttons

顯示應用程式中最重要的那部分動作行為。操作欄中放不下的Action就會自動轉移到Action overflow。長按圖示檢視行動的名字。

4. Action overflow

不太常用的Action就會放到這裡。

适應旋轉和不同大小的螢幕

在UI問題中,其中最重要的一個問題就是怎樣在建立app時适應旋轉和不同大小的螢幕。

你可以使用split action bars去适應這些變化,使用split action bars允許你将ActionBar中的Action分到其他的bar中,如main action bar或者是螢幕的底部。

一探ActionBar和ToolBar的差別

使用Split Action Bar的注意事項

當将操作欄的acton bar分到多個acton bar時,你可以有三個位置使用:

  1. Main action bar
  2. Top bar
  3. Bottom bar

    位置如下圖所示:

    一探ActionBar和ToolBar的差別

    如果使用者可以從給定的螢幕定位到app的層次結構,main action bar 至少包含up caret(-_-! 不知道怎麼翻譯啊)。

    應用程式提供的允許使用者在視圖之間快速切換,在top bar 中使用tab或者spinner。

為了顯示action,如有必要,可以在bottom bar中使用action overflow。

Action Buttons

Action Buttons是ActionBar裡面操作應用程式最重要的Activity。考慮到那些button會經常使用,于是讓它們排列有順序。根據可用的螢幕空間,系統顯示了你最重要的Action Buttons中的操作,其他的Action Buttons将移動到Action overflow中。ActionBar中應該隻顯示使用者可用的Action。如果一個Action在目前環境中不可用,那就隐藏它。将其設為不可用,并不且不顯示這些Action Buttons。

Gmail應用程式中的一些Action Buttons

一探ActionBar和ToolBar的差別

在對于選擇那些Action作為ActionBar上的Action Buttons,可以參考FIT原則。

  1. F—–Frequent
  2. I——Important
  3. T—–Typical

Toolbar

Toolbar是Android 5.0中新引入的一個控件,其出現的目的就是為了取代ActionBar。

注意,如果使用Toolbar替代ActionBar,你隻能使用Theme.AppCompat中沒有ActionBar的主題或者直接繼承Activity,否則會造成沖突出錯!

ToolBar直接使用 setSupportActionBar(toolbar);來替代ActionBar,這是使用V7相容包的方式,如果是5.0以上可以直接使用setActionBar();

使用toolbar後改變overflow中背景的顔色:

app:popupTheme="@style/PopupMenu"           
<style name="PopupMenu" parent="ThemeOverlay.AppCompat.Light" >
        <item name="android:colorBackground">#ffffff</item>
        <item name="android:textColor">#0000ff</item>
</style>           

顯示overflow中的圖示

/**
     * 顯示 OverFlow 中的圖示
     */
    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod(
                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }           

在toolbar中使用ActionMode

說白了,ActionMode就是臨時占據了ActionBar的位置。

startSupportActionMode(new ActionMode.Callback() {
            @Override
            public boolean onCreateActionMode(ActionMode mode, Menu menu) {
                MenuItem saveItem = menu.add("add").setIcon(R.drawable.icon);
                MenuItemCompat.setShowAsAction(saveItem, MenuItemCompat.SHOW_AS_ACTION_ALWAYS);

                MenuItem searchItem = menu.add("del").setIcon(R.drawable.icon);
                MenuItemCompat.setShowAsAction(searchItem, MenuItemCompat.SHOW_AS_ACTION_ALWAYS);

                MenuItem refreshItem = menu.add("que").setIcon(R.drawable.icon);
                MenuItemCompat.setShowAsAction(refreshItem, MenuItemCompat.SHOW_AS_ACTION_ALWAYS);
                return true;
            }

            @Override
            public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
                return false;
            }

            @Override
            public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
                Toast.makeText(MainActivity.this, item.getTitle(),
                        Toast.LENGTH_SHORT).show();
                mode.finish();
                return false;
            }

            @Override
            public void onDestroyActionMode(ActionMode mode) {

            }
        });           

上面的方法中,onCreateActionMode() 方法是對Mode的初始化,onActionItemClicked() 就是對于與ActionMode的Item點選事件的監聽。

注意,在主題中加入

<item name="windowActionModeOverlay">true</item>

否則會同時出現actionmode和toolbar共存的情況。

參考資料:http://blog.csdn.net/zwlove5280/article/details/52771998