隨著Android設(shè)計(jì)規(guī)范的迭代更新，我們對(duì)Android App的視覺(jué)印象不再是傻大黑粗，而Material Design的出現(xiàn)讓Android App也可以變得十分精美漱受，無(wú)論是界面設(shè)計(jì)還是過(guò)渡動(dòng)畫(huà)都讓人耳目一新瞻凤。傳送門(mén):Google官方介紹：material design specification ，中文翻譯版：Material Design 中文版觉既。
由于歷史遺留問(wèn)題惧盹，項(xiàng)目中依然使用自定義布局的App Bar，并且設(shè)計(jì)上依然沿用4.x時(shí)代的代表作Holo Design瞪讼，顯然這些都已經(jīng)過(guò)時(shí)了钧椰。在與視覺(jué)進(jìn)行溝通之后我們決定對(duì)App Bar進(jìn)行一番改造，設(shè)計(jì)上使用Material Design風(fēng)格符欠，實(shí)現(xiàn)上替換為Google推薦的Toolbar嫡霞。
1、Toolbar簡(jiǎn)介
在Android 5.x時(shí)代希柿，ActionBar已經(jīng)被Toolbar所替代诊沪，相比于ActionBar獨(dú)立于布局之外，一直固定出現(xiàn)在頂端曾撤，Toolbar可以有更好的個(gè)性化定制端姚，不僅可以出現(xiàn)在Layout不同的層級(jí)上，還可以進(jìn)行自由定制導(dǎo)航欄的布局挤悉。如果你想把 Toolbar 當(dāng)成 ActionBar渐裸，依然沿用Actionbar的方法，可以使用 setSupportActionBar() 方法來(lái)實(shí)現(xiàn)（不推薦）尖啡。
先了解一下Material Theme各部分對(duì)應(yīng)的名稱(chēng)：
(圖片來(lái)源：https://developer.android.com/training/material/theme.html)
2橄仆、Toolbar使用
添加依賴(lài)
v7包提供對(duì)Toolbar的支持
compileSdkVersion 23
buildToolsVersion “23.0.3”
compile ‘com.android.support:appcompat-v7:23.3.0’
主題配置
需要使用NoActionBar主題，不然Toolbar會(huì)與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>
布局文件
可以寫(xiě)成一個(gè)單獨(dú)的布局文件衅斩，其他Layout在使用時(shí)直接<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();
}
});
以上代碼實(shí)現(xiàn)的效果如下：
3盆顾、Toolbar實(shí)戰(zhàn)
視覺(jué)提供的設(shè)計(jì)如上所示，樣式較多畏梆，但可以簡(jiǎn)單歸為幾類(lèi)：
a您宪、普通的menu按鈕（右上角文字或圖片奈懒，eg：編輯，助手）
b宪巨、menu位置添加自定義View（動(dòng)畫(huà)效果的View磷杏，eg：直播間入口，刷新）
c捏卓、title位置添加自定義View（左上角Spinner,eg：交易所切換）
a极祸、普通的menu按鈕（右上角文字或圖片，eg：編輯怠晴，助手）
menu文件夾下添加響應(yīng)頁(yè)面的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>
代碼中如下實(shí)現(xiàn)
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:
//業(yè)務(wù)邏輯
break;
}
return true;
}
});
b遥金、menu位置添加自定義View（動(dòng)畫(huà)效果的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>
代碼中如下實(shí)現(xiàn)
//refreshActionView有旋轉(zhuǎn)動(dòng)畫(huà)稿械，需添加自定義View
refreshActionView=new RefreshActionView(getActivity());
getToolbar().getMenu().findItem(R.id.menu_refresh).setActionView(refreshActionView);
refreshActionView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//業(yè)務(wù)邏輯
}
});
a、b實(shí)現(xiàn)效果如下
c冲粤、title位置添加自定義View（左上角Spinner,eg：交易所切換）
menu文件與布局文件內(nèi)容實(shí)現(xiàn)基本同上
代碼中如下實(shí)現(xiàn)美莫，其實(shí)同理放到Toolbar右邊的話也可以，只要把gravity改為Gravity.RIGHT即可梯捕，所以如果自定義View在右側(cè)厢呵，那么既可以通過(guò)添加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實(shí)現(xiàn)效果如下
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上生效，看起來(lái)很美道批，無(wú)論是基本的設(shè)置還是Menu的構(gòu)建都能輕松搞定错英，但是有個(gè)大坑，在Fragment中添加各自的Toolbar時(shí)（不共用Activity的Toolbar）menuItem會(huì)錯(cuò)亂……在A Fragment里面會(huì)顯示B Fragment的menuItem隆豹，顯示隱藏也失效……這讓我一度懷疑每個(gè)Fragment持有自己的Toolbar是否能靠譜椭岩，解決的辦法就是不用Toolbar替換ActionBar，直接使用Toolbar璃赡，在我看來(lái)替換動(dòng)作幾乎就是多余的判哥，Toolbar基本可以完成ActionBar所有的功能，當(dāng)然碉考，Activity使用替換是沒(méi)有什么問(wèn)題的塌计，暫時(shí)并沒(méi)有發(fā)現(xiàn)不替換有什么實(shí)現(xiàn)不了的功能。
b侯谁、如何添加Menu锌仅？
如何使用Toolbar替換ActionBar章钾，那么依然可以使用ActionBar的方法。
//創(chuàng)建Menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.main_menu, menu);
return super.onCreateOptionsMenu(menu);
}
//Menu事件監(jiān)聽(tīng)
@Override
public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
//MenuItem的處理（隱藏或者做額外的操作）
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
return super.onPrepareOptionsMenu(menu);
}
直接使用Toolbar的情況下添加Menu則更加簡(jiǎn)單明了
getToolbar().inflateMenu(R.menu.menu_watchlist);
getToolbar().setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
return true;
}
});
c热芹、如何動(dòng)態(tài)隱藏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如何讓其視覺(jué)上（點(diǎn)擊效果）與普通的menuItem一致？
xml中為布局設(shè)置為ActionButton的Style即可报腔，這樣視覺(jué)上會(huì)與普通的menuItem統(tǒng)一
style="@style/Widget.AppCompat.ActionButton"
動(dòng)態(tài)的為View添加Style也是可以的
refreshActionView = (RefreshActionView) (LayoutInflater.from(getContext())
.inflate(R.layout.layout_refresh_action_view, null)
.findViewById(R.id.refresh_action_view));
f椰棘、如何適應(yīng)窗口大小
在xml中設(shè)置fitsSystemWindows為true，否則Toolbar會(huì)有錯(cuò)位榄笙，布局會(huì)被狀態(tài)欄擋住一部分
android:fitsSystemWindows="true"
g邪狞、如何隱藏Toolbar？
Toolbar并沒(méi)有提供ActionBar的hide()方法茅撞，但是可以在布局完成的回調(diào)中獲取Toolbar的高度帆卓，并為其他的Layout設(shè)置Margin，至于什么時(shí)機(jī)獲取View的長(zhǎng)高米丘，傳送門(mén)： Android必知必會(huì)-獲取View坐標(biāo)和長(zhǎng)寬的時(shí)機(jī)
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);
