android5.0+(Toolbar)
Toolbar
Toolbar是什么？大概說一下它的官方介紹。Toolbar是應用的內容的標準工具欄，可以說是Actionbar的升級版，兩者不是獨立關系，要使用Toolbar還是得跟ActionBar扯上關系的。相比Actionbar Toolbar最明顯的一點就是變得很自由，可隨處放置，因為它是作為一個ViewGroup來定義使用的，所以單純使用ActionBar已經稍顯過時了，它的一些方法已被標注過時。
那么它怎么使用呢，首先我們一樣要用到v7的支持包，然后定義程序的主題樣式，在style里得先把Actionbar去掉，有點像欲想練功，必先自宮的感覺啊。如下：
/res/values/styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- toolbar（actionbar）顏色 --> <item name="colorPrimary">#4876FF</item> <!-- 狀態欄顏色 --> <item name="colorPrimaryDark">#3A5FCD</item> <!-- 窗口的背景顏色 --> <item name="android:windowBackground">@android:color/white</item> <!-- SearchView --> <item name="searchViewStyle">@style/MySearchViewStyle</item> </style> <style name="AppTheme" parent="@style/AppBaseTheme"></style> <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView"> <!-- Background for the search query section (e.g. EditText) <item name="queryBackground">...</item> Background for the actions section (e.g. voice, submit) <item name="submitBackground">...</item> Close button icon <item name="closeIcon">...</item> Search button icon <item name="searchIcon">...</item> Go/commit button icon <item name="goIcon">...</item> Voice search button icon <item name="voiceIcon">...</item> Commit icon shown in the query suggestion row <item name="commitIcon">...</item> Layout for query suggestion rows <item name="suggestionRowLayout">...</item> --> </style> </resources>
去除Actionbar最簡單的方法就是直接繼承NoActionBar的主題了。顏色的屬性說明，還是下面這張圖最清楚了：
另外，SearchView在AppCompat中提供了更強的可定制性和更多的樣式可供設置，不過一般我們用默認的就行。
還有我們可以在values-v21給API21的系統版本設置默認的底部導航欄默認的顏色：
/res/values-v21/styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="AppTheme" parent="@style/AppBaseTheme"> <!-- 底部導航欄顏色 --> <item name="android:navigationBarColor">#4876FF</item> </style> </resources>
設置好主題的下一步工作：
在xml的layout中定義一個Toolbar：
/layout/toolbar.xml
<?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/com.example.toolbar" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" > </android.support.v7.widget.Toolbar>
我們把toolbar作為一個獨立的布局xml，方便在其他布局里include進去。可以看到我們在這里是可以設置Toolbar的屬性的，初上面的外還有以下的屬性，都是見名知意的就不一一說明了。
然后在activity的布局里把它include進去就行了，當然一般把它放到最上面了，有需要你是可以把它放到中間、底部或其它位置的，可見它的自由度是很高的。在下一步呢就到代碼了，在onCreate中：
mToolbar = (Toolbar) findViewById(R.id.toolbar);
// toolbar.setLogo(R.drawable.ic_launcher);
mToolbar.setTitle("Rocko");// 標題的文字需在setSupportActionBar之前，不然會無效
// toolbar.setSubtitle("副標題");
setSupportActionBar(mToolbar);
/* 這些通過ActionBar來設置也是一樣的，注意要在setSupportActionBar(toolbar);之后，不然就報錯了 */
// getSupportActionBar().setTitle("標題");
// getSupportActionBar().setSubtitle("副標題");
// getSupportActionBar().setLogo(R.drawable.ic_launcher);
/* 菜單的監聽可以在toolbar里設置，也可以像ActionBar那樣，通過Activity的onOptionsItemSelected回調方法來處理 */
mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(MainActivity.this, "action_settings", 0).show();
break;
case R.id.action_share:
Toast.makeText(MainActivity.this, "action_share", 0).show();
break;
default:
break;
}
return true;
}
}); 上面關鍵的一點就是setSupportActionBar(mToolbar);把Toolbar當做ActionBar給設置了。menu還是可以像ActionBar一樣用和處理的：
res/menu/main.xml
<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=".MainActivity" > <item android:id="@+id/ab_search" android:orderInCategory="80" android:title="action_search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="ifRoom"/> <item android:id="@+id/action_share" android:orderInCategory="90" android:title="action_share" app:actionProviderClass="android.support.v7.widget.ShareActionProvider" app:showAsAction="ifRoom"/> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="action_settings" app:showAsAction="never"/> </menu>
這一步時候程序的樣子：
PS. Genymotion可以用5.0的模擬器了
可以感覺到這樣是不是和ActionBar沒什么區別呢。誒，左邊的菜單圖標怎么出來的呢，其實上面還沒處理到，他就是Navigation drawer了，使用新版本的v4、v7庫的drawer明顯的一點是它帶了一個酷酷的交互動畫（請看最后的gif圖）。那么使用Toolbar之后又怎么去在Toolbar中使用drawer呢。下面當然也是跟著代碼來.
/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.toolbar.MainActivity" > <include layout="@layout/toolbar" /> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 內容界面 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.example.toolbar.widget.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dip" > </com.example.toolbar.widget.PagerSlidingTabStrip> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" > </android.support.v4.view.ViewPager> </LinearLayout> <!-- 側滑菜單內容 --> <LinearLayout android:id="@+id/drawer_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@drawable/drawer" android:orientation="vertical" android:padding="8dp" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </android.support.v4.widget.DrawerLayout> </LinearLayout>
Pager的東西可以先忽略，后面會說到。側滑菜單的內容為簡單起見直接先用圖片來演示了。可以看到布局的設置大同小異，不同點在代碼中：
getSupportActionBar().setDisplayHomeAsUpEnabled(true); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer); mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close); mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle);
先把圖標設置顯示出來，然后把ActionBarDrawerToggle作為DrawerLayout的監聽器設置進去，還是比較簡單的，效果：
要是需要把drawer覆蓋toolbar怎么辦呢？需要稍微調整一下界面的布局位置就行了，效果就不貼上來了(腦補，或者改下源碼的setContentView運行)：
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.example.toolbar.MainActivity" > <include layout="@layout/toolbar" /> <!-- 內容界面 --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/content" android:orientation="vertical" > <com.example.toolbar.widget.PagerSlidingTabStrip android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="48dip" android:visibility="invisible" > </com.example.toolbar.widget.PagerSlidingTabStrip> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="invisible" > </android.support.v4.view.ViewPager> </LinearLayout> </LinearLayout> <!-- 側滑菜單內容 --> <LinearLayout android:id="@+id/drawer_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="@drawable/drawer" android:orientation="vertical" android:clickable="true" android:padding="8dp" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </android.support.v4.widget.DrawerLayout>
Demo源碼下載地址：http://download.csdn.net/detail/bbld_/8191251
依賴庫android-support-v7-appcompat.rar with Palette ： http://download.csdn.net/detail/bbld_/8382913
本文由用戶 fefet 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！