隨著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各部分對應的名稱:
(圖片來源: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();
}
});
以上代碼實現的效果如下:
3、Toolbar實戰
視覺提供的設計如上所示,樣式較多,但可以簡單歸為幾類:
a、普通的menu按鈕(右上角文字或圖片,eg:編輯,助手)
b、menu位置添加自定義View(動畫效果的View,eg:直播間入口,刷新)
c、title位置添加自定義View(左上角Spinner,eg:交易所切換)
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實現效果如下
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實現效果如下
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);