Android Toolbar填坑指南

隨著Android設計規范的迭代更新,我們對Android App的視覺印象不再是傻大黑粗,而Material Design的出現讓Android App也可以變得十分精美,無論是界面設計還是過渡動畫都讓人耳目一新。傳送門:Google官方介紹:material design specification ,中文翻譯版:Material Design 中文版

由于歷史遺留問題,項目中依然使用自定義布局的App Bar,并且設計上依然沿用4.x時代的代表作Holo Design,顯然這些都已經過時了。在與視覺進行溝通之后我們決定對App Bar進行一番改造,設計上使用Material Design風格,實現上替換為Google推薦的Toolbar。

1、Toolbar簡介

在Android 5.x時代,ActionBar已經被Toolbar所替代,相比于ActionBar獨立于布局之外,一直固定出現在頂端,Toolbar可以有更好的個性化定制,不僅可以出現在Layout不同的層級上,還可以進行自由定制導航欄的布局。如果你想把 Toolbar 當成 ActionBar,依然沿用Actionbar的方法,可以使用 setSupportActionBar() 方法來實現(不推薦)。
先了解一下Material Theme各部分對應的名稱:

Rz63Ufv.png!web.png

(圖片來源:https://developer.android.com/training/material/theme.html)

2、Toolbar使用

添加依賴
v7包提供對Toolbar的支持

compileSdkVersion 23
buildToolsVersion “23.0.3”
compile ‘com.android.support:appcompat-v7:23.3.0’ 

主題配置
需要使用NoActionBar主題,不然Toolbar會與ActionBar沖突

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">    
    <!-- Customize your theme here. -->    
    <item name="colorPrimary">@color/colorPrimary</item>    
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    
    <item name="colorAccent">@color/colorAccent</item>    
    <item name="windowActionBar">false</item>
    <item name="android:windowNoTitle">true</item>
</style>

布局文件
可以寫成一個單獨的布局文件,其他Layout在使用時直接<include>

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar    
    xmlns:android="http://schemas.android.com/apk/res/android"   
    xmlns:app="http://schemas.android.com/apk/res-auto"    
    android:id="@+id/toolbar"    
    android:layout_width="match_parent"    
    android:layout_height="@dimen/toolbarSize"    
    android:fitsSystemWindows="true"    
    android:minHeight="?attr/actionBarSize"    
    android:background="?attr/colorPrimary"           
    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"       
    app:titleTextColor="@color/text_color_white"
    app:subtitleTextColor="@color/text_color_white"
    app:navigationIcon="@drawable/icon_toolbar_navigation">
</android.support.v7.widget.Toolbar>

使用代碼

toolbar=(Toolbar)findViewById(R.id.toolbar);
toolbar.setTitle("Title");
toolbar.setSubtitle("SubTitle");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
   @Override  
   public void onClick(View v) {   
       finish();  
   }
});

以上代碼實現的效果如下:

image_20160531201217.png

3、Toolbar實戰

image_20160531201443.png

視覺提供的設計如上所示,樣式較多,但可以簡單歸為幾類:
a、普通的menu按鈕(右上角文字或圖片,eg:編輯,助手)
b、menu位置添加自定義View(動畫效果的View,eg:直播間入口,刷新)
c、title位置添加自定義View(左上角Spinner,eg:交易所切換)

橫屏.gif

a、普通的menu按鈕(右上角文字或圖片,eg:編輯,助手)
menu文件夾下添加響應頁面的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"      
   xmlns:tools="http://schemas.android.com/tools"      
   tools:context=".activity.WatchListStyleActivity">    
   <item       
      android:id="@+id/menu_refresh"        
      android:orderInCategory="1"        
      android:icon="@drawable/icon_toolbar_refresh"        
      app:showAsAction="ifRoom"        
      android:title="action_bar_refresh_text"/>    
   <item        
      android:id="@+id/menu_edit"        
      android:orderInCategory="2"        
      app:showAsAction="ifRoom"        
      android:title="@string/action_bar_edit_text"/>
</menu>

代碼中如下實現

getToolbar().inflateMenu(R.menu.menu_watchlist);
getToolbar().setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
   @Override  
   public boolean onMenuItemClick(MenuItem item) {    
      switch (item.getItemId()){      
         case R.id.menu_edit:        
            //業務邏輯  
         break;    
      }    
      return true;  
   }
});

b、menu位置添加自定義View(動畫效果的View,eg:直播間入口,刷新)
menu文件與a共用

同上

布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout    
   xmlns:android="http://schemas.android.com/apk/res/android"    
   style="@style/Widget.AppCompat.ActionButton" 
   android:layout_width="wrap_content"   
   android:layout_height="wrap_content">   
   <ImageView       
       android:id="@+id/refresh_action_view" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:src="@drawable/icon_toolbar_refresh"
       android:scaleType="center"/>
</FrameLayout>

代碼中如下實現

//refreshActionView有旋轉動畫,需添加自定義View
refreshActionView=new RefreshActionView(getActivity());
getToolbar().getMenu().findItem(R.id.menu_refresh).setActionView(refreshActionView);
refreshActionView.setOnClickListener(new OnClickListener() {  
   @Override  
   public void onClick(View v) {   
       //業務邏輯  
   }
});

a、b實現效果如下

image_20160531203426.png

c、title位置添加自定義View(左上角Spinner,eg:交易所切換)
menu文件與布局文件內容實現基本同上

代碼中如下實現,其實同理放到Toolbar右邊的話也可以,只要把gravity改為Gravity.RIGHT即可,所以如果自定義View在右側,那么既可以通過添加setActionView的方式也可以直接addView

LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
   ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.gravity= Gravity.LEFT;
getToolbar().addView(mTopSpinner,lp);

c實現效果如下


image_20160531204035.png

4、Toolbar填坑(Q&A)

a、為什么不推薦Toolbar替換ActionBar,而是直接使用Toolbar?

toolbar = (Toolbar) findViewById(toolbarId);
setSupportActionBar(toolbar);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null){
  actionBar.setDisplayShowHomeEnabled(true);
}

添加如上代碼即可用Toolbar替換ActionBar,也就是可以使用ActionBar以前的方法在Toolbar上生效,看起來很美,無論是基本的設置還是Menu的構建都能輕松搞定,但是有個大坑,在Fragment中添加各自的Toolbar時(不共用Activity的Toolbar)menuItem會錯亂……在A Fragment里面會顯示B Fragment的menuItem,顯示隱藏也失效……這讓我一度懷疑每個Fragment持有自己的Toolbar是否能靠譜,解決的辦法就是不用Toolbar替換ActionBar,直接使用Toolbar,在我看來替換動作幾乎就是多余的,Toolbar基本可以完成ActionBar所有的功能,當然,Activity使用替換是沒有什么問題的,暫時并沒有發現不替換有什么實現不了的功能。

b、如何添加Menu?

如何使用Toolbar替換ActionBar,那么依然可以使用ActionBar的方法。

//創建Menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
  MenuInflater menuInflater = getMenuInflater();
  menuInflater.inflate(R.menu.main_menu, menu);
  return super.onCreateOptionsMenu(menu);
}
//Menu事件監聽
@Override
public boolean onOptionsItemSelected(MenuItem item) {
  return super.onOptionsItemSelected(item);
}
//MenuItem的處理(隱藏或者做額外的操作)
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
  return super.onPrepareOptionsMenu(menu);
}

直接使用Toolbar的情況下添加Menu則更加簡單明了

getToolbar().inflateMenu(R.menu.menu_watchlist);
getToolbar().setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {  
   @Override  
   public boolean onMenuItemClick(MenuItem item) {    
      return true;  
   }
});

c、如何動態隱藏MenuItem?

getToolbar().getMenu().findItem(R.id.menu_refresh).setVisible(false);

d、Fragment如何使用Toolbar?

使用ActionBar的情況下

if (!(getActivity() instanceof NTESPMBaseActivity)) {
  return;
}
toolbar = (Toolbar) rootView.findViewById(toolbarId);
((NTESPMBaseActivity) getActivity()).setSupportActionBar(toolbar);

直接使用Toolbar的情況下

toolbar = (Toolbar) rootView.findViewById(toolbarId);

e、自定義的ActionView如何讓其視覺上(點擊效果)與普通的menuItem一致?

xml中為布局設置為ActionButton的Style即可,這樣視覺上會與普通的menuItem統一

style="@style/Widget.AppCompat.ActionButton"

動態的為View添加Style也是可以的

refreshActionView = (RefreshActionView) (LayoutInflater.from(getContext())      
  .inflate(R.layout.layout_refresh_action_view, null)   
  .findViewById(R.id.refresh_action_view));

f、如何適應窗口大小

在xml中設置fitsSystemWindows為true,否則Toolbar會有錯位,布局會被狀態欄擋住一部分

android:fitsSystemWindows="true"  

g、如何隱藏Toolbar?
Toolbar并沒有提供ActionBar的hide()方法,但是可以在布局完成的回調中獲取Toolbar的高度,并為其他的Layout設置Margin,至于什么時機獲取View的長高,傳送門: Android必知必會-獲取View坐標和長寬的時機

view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
  @Override
  public void onGlobalLayout() {
    LinearLayout.LayoutParams lp=(LinearLayout.LayoutParams)layoutProcess.getLayoutParams();
    lp.setMargins(0,-getToolbar().getHeight(),0,0);
    layoutProcess.setLayoutParams(lp);
  }
});

或者使用更加直接的……

getToolbar().setVisibility(View.GONE);
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容