天天看點

Android Action Bar簡介

Android Action Bar的簡介,設計部分。

Android Action Bar簡介

Design: Action Bar

  Action Bar是在螢幕頂端的一部分内容,通常在整個app進行中都保持存在。

  它提供了幾個關鍵的功能:

  1.使得重要的動作明顯且可以通過可預測的方式獲得(比如New和Search)。

  2.提供了app中一緻的導航和View轉換。

  3.通過提供action流,減少了雜亂,尤其是對很少使用的動作來說。

  4.為你的app内容提供了足夠多的空間。

Action Bar區域

  Action Bar可以分為四個不同的功能區域:

Android Action Bar簡介

1. App icon

  可以放一些logo或者牌子之類的圖示。

  但是如果你的app目前不在頂層螢幕,記得在logo左邊放上Up訓示圖示(可以是一個傳回箭頭之類的),這樣使用者可以向上一層傳回。

  更多可參見 Navigation。

2. View control

  如果你的app在不同的view中展示資料,action bar中的這一部分可以允許使用者進行view的切換。

  比如drop-down的菜單或者tab控制。

  更多可參見App Structure 。

  如果app不包含View切換,action bar的這一部分也可以用來展示非互動的内容,比如title或較長的branding資訊。

3. Action buttons

  Action Bar的這一部分用來展示一些app中比較重要的動作。

  Action Bar中放不下的動作會自動移動到action overflow(4)中去。長按一個icon來看動作的名字。

  動作應該有排序,FIT scheme可以用來對動作進行優先級劃分。

  Frequent, Important, Typical的動作應該被放在action bar裡,如果都不滿足,則應該放入action overflow中。

4. Action overflow

  把不常用的動作放在action overflow中來。

  Action bar上的action overflow圖示僅僅在沒有硬體菜單鍵的時候才顯示,如果有菜單鍵,使用者點選菜單鍵将會顯示action overflow。

Action Bar的适配

  為适配不同的裝置,考慮不同的螢幕方向和螢幕尺寸,可以分割action bar。

  分割的時候action bar的可考慮位置主要有三個:

  1.Main content bar

  2.Top bar

  3.Bottom bar

Android Action Bar簡介

  如果允許使用者向上層傳回,即Up傳回,那麼Main content bar最少要提供向上傳回的符号。

  Top bar中可以用tab或者spinner讓使用者在View之間快速地進行切換。

  Bottom bar通常用來展示動作,即action和action overflow。

  Action bar中可以容納的按鈕個數(即action bar的容量)遵循一定的規律:

  Main content bar中的action buttons不會占超過50%的寬度。

  但底部的bar可以被全部占據。

  螢幕的寬度(以dp為機關)決定了可以容納的項目數目:

  360dp以下:2個icon。

  360-499 dp = 3 icons

  500-599 dp = 4 icons

  600 dp and larger = 5 icons

Action Bar的實作

  Action Bar的ActionBar API是Android 3.0(API Level 11)才引進的。但是可以通過Support Library 支援2.1及以上版本。

  具體見:

  http://developer.android.com/guide/topics/ui/actionbar.html

參考資料

  Design: Action Bar:

  http://developer.android.com/design/patterns/actionbar.html

  Develop: Action Bar:

  Reference: Action Bar:

  http://developer.android.com/reference/android/app/ActionBar.html

  資源下載下傳:

  Download the Action Bar Icon Pack

作者: 聖騎士Wind

出處: 部落格園: 聖騎士Wind

Github: https://github.com/mengdd

微信公衆号: 聖騎士Wind

Android Action Bar簡介