聚焦寫一本書<br>所有的成長必然都是經(jīng)歷痛苦的

攜一汪清水，灑向人間喝检！

勿忘初心......

為廣大同行分享一些安卓技術(shù)相關(guān)資料愿题，歡迎廣大專業(yè)人士來交流损俭，獲取文章中安卓資料請加 WX：X1524478394

重申一遍杆兵，我不是老師，我也是剛?cè)肟硬痪玫那岸顺绦騿T仔夺，喜歡我的作品請?zhí)鹉哔F的雙手為作者點(diǎn)贊琐脏，后續(xù)為大家準(zhǔn)備有項目實戰(zhàn)的原創(chuàng)作品希望大家多多關(guān)注，謝謝，謝謝Ｈ杖埂４低А！０悍鳌Ｊ苌瘛！

看山是山！看山不是山养交！看山還是山精算！

github：<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FAndroid-Alvin%2FAndroid-LearningNotes" target="_blank">https://github.com/Android-Alvin/Android-LearningNotes</a><br>B站：<a href="https://links.jianshu.com/go?to=https%3A%2F%2Fspace.bilibili.com%2F474380680" target="_blank">https://space.bilibili.com/474380680</a><br>微信公眾號：Android架構(gòu)筆記<br>知乎：FlutterDeveloper

我們尋找的不僅是答案鱼辙，還有更多的思索廉嚼。

React Native開發(fā)

今年(2014) 的 google i/o 發(fā)表令多數(shù)人為之一亮的 material design，而 google 也從「google i/o 2014」 開始葛闷，大家也陸陸續(xù)續(xù)地看到其更新的 android app 皆套用了這個設(shè)計介面憋槐。當(dāng)然，這個設(shè)計介面著實讓大家感到驚艷外淑趾，更讓 android 開發(fā)者開始擔(dān)心未來 app 的界面處理了阳仔。 不過，所幸有著之前 actionbar 的經(jīng)驗后扣泊，android 也很快地在 support library 里面提供了相對應(yīng)的 api 給開發(fā)者使用近范，本篇就為各位介紹 – toolbar，這是用來取代過去 actionbar 的控件延蟹，而現(xiàn)在于 material design 中也對之有一個統(tǒng)一名稱：app bar评矩，在未來的 android app 中，就以 toolbar 這個元件來實作之等孵。 android：ToolBar詳解（手把手教程） - android神 - 武臘福 1. 概述 Android 3.0 Android 推了 ActionBar 這個控件稚照，而到了2013 年 Google 開始大力地推動所謂的 android style，想要逐漸改善過去 android 紛亂的界面設(shè)計俯萌，希望讓終端使用者盡可能在 android 手機(jī)有個一致的操作體驗果录。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCompat。 既然會有本篇跟各位介紹的 Toolbar咐熙，也意味著官方在某些程度上認(rèn)為 ActionBar 限制了 android app 的開發(fā)與設(shè)計的彈性弱恒，而在 material design 也對之做了名稱的定義：App bar。接下來將為各位分成幾個階段進(jìn)行說明棋恼，如何在 android app 中用 toolbar 這個控件來做出一個基本的 app bar 嘍返弹。 本篇所使用到的程序請到 Github 取得。 2. 基礎(chǔ)套用 這個階段從 toolbar_demo_checkpoint0 開始爪飘，分成下列三個部份： 風(fēng)格 (style) 界面 (layout) 程序 (java) 2.1 風(fēng)格(style) 風(fēng)格要調(diào)整的地方有二 一在 res/values/styles.xml中 二在 /res/values-v21/styles.xml中 為了之后設(shè)定方便义起，我們先在 res/values/styles.xml 里增加一個名為 AppTheme.Base 的風(fēng)格 1 2 3 4 <style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item> </style> 因為此范例只使用 Toolbar，所以我們要將讓原本的 ActionBar 隱藏起來师崎，然后將原本 AppTheme 的 parent 屬性 改為上面的AppTheme.Base默终，代碼如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <resources> <!-- Base application theme. --> <style name="AppTheme" parent="AppTheme.Base"> </style> <style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="windowActionBar">false</item> <del><item name="android:windowNoTitle">true</item></del> <!-- 使用 API Level 22 編譯的話，要拿掉前綴字 --> <item name="windowNoTitle">true</item> </style> </resources> 再來調(diào)整Android 5.0的style： /res/values-v21/styles.xml犁罩，也將其 parent 屬性改為 AppTheme.Base： 1 2 3 4 5 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="AppTheme.Base"> </style> </resources> 2.2 界面(Layout) 在 activity_main.xml 里面添加 Toolbar 控件： 1 2 3 4 5 6 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" > </android.support.v7.widget.Toolbar> 請記得用 support v7 里的 toolbar齐蔽，不然然只有 API Level 21 也就是 Android 5.0 以上的版本才能使用。 這里需注意床估，要將 RelatvieLayout 里的四個方向的padding 屬性去掉含滴，并記得將原本的 Hello World 設(shè)為 layout_below="@+id/toolbar" ，否則會看到像下面這樣的錯誤畫面丐巫。 android：ToolBar詳解（手把手教程） - android神 - 武臘福 2.3 程序 (Java) 在 MainActivity.java 中加入 Toolbar 的聲明： 1 2 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); 聲明后谈况，再將之用 setSupportActionBar 設(shè)定，Toolbar即能取代原本的 actionbar 了递胧，此階段完成畫面如下： android：ToolBar詳解（手把手教程） - android神 - 武臘福 完整代碼見：toolbar_demo_checkpoint1 3. 自定義顏色(Customization color) 這個階段將從 toolbar_demo_checkpoint1 接著往下進(jìn)行： android：ToolBar詳解（手把手教程） - android神 - 武臘福 上圖是將本階段要完成的結(jié)果畫面做了標(biāo)示鸦做，結(jié)合下面的描述希望大家能明白。 colorPrimaryDark（狀態(tài)欄底色）：在風(fēng)格 (styles) 或是主題 (themes) 里進(jìn)行設(shè)定谓着。 App bar 底色 這個設(shè)定分為二泼诱，若你的 android app 仍是使用 actionbar ，則直接在風(fēng)格 (styles) 或是主題 (themes) 里進(jìn)行設(shè)定 colorPrimary 參數(shù)即可赊锚； 可若是采用 toolbar 的話治筒，則要在界面 (layout) 里面設(shè)定 toolbar 控件的 background 屬性。 navigationBarColor（導(dǎo)航欄底色）： 僅能在 API v21 也就是 Android 5 以后的版本中使用舷蒲， 因此要將之設(shè)定在 res/values-v21/styles.xml 里面耸袜。 主視窗底色：windowBackground 也因此在這個階段，我們需要設(shè)定的地方有三牲平，一是 style中(res/values/styles.xml) 1 2 3 4 5 6 7 8 9 10 <style name="AppTheme.Base" parent="Theme.AppCompat"> <item name="windowActionBar">false</item> <item name="android:windowNoTitle">true</item> <!-- Actionbar color --> <item name="colorPrimary">@color/accent_material_dark</item> <!--Status bar color--> <item name="colorPrimaryDark">@color/accent_material_light</item> <!--Window color--> <item name="android:windowBackground">@color/dim_foreground_material_dark</item> </style> 再來是 v21 的style中 (res/values-v21/styles.xml) 1 2 3 4 <style name="AppTheme" parent="AppTheme.Base"> <!--Navigation bar color--> <item name="android:navigationBarColor">@color/accent_material_light</item> </style> 最后堤框，就是為了本篇的主角 – Toolbar 的 background 進(jìn)行設(shè)定。 1 2 3 4 5 6 7 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" android:background="?attr/colorPrimary" > </android.support.v7.widget.Toolbar> 在本范例中，toolbar 是設(shè)定來在 activity_main.xml蜈抓，對其設(shè)定 background 屬性： android:background="?attr/colorPrimary" 启绰，這樣就可以使之延用 Actionbar 的顏色設(shè)定嘍。 最后沟使，再來看一下結(jié)果畫面委可。 android：ToolBar詳解（手把手教程） - android神 - 武臘福 完整代碼見： toolbar_demo_checkpoint2 4. 控件 (component) 本階段將從 toolbar_demo_checkpoint2 接續(xù)，在還未于 <android.support.v7.widget.Toolbar/> 標(biāo)簽中腊嗡，自行添加元件的 toolbar 有幾個大家常用的元素可以使用着倾，請先見下圖： android：ToolBar詳解（手把手教程） - android神 - 武臘福 大抵來說，預(yù)設(shè)常用的幾個元素就如圖中所示燕少，接著就依序來說明之： setNavigationIcon 即設(shè)定 up button 的圖標(biāo)卡者，因為 Material 的介面，在 Toolbar這里的 up button樣式也就有別于過去的 ActionBar 哦客们。 setLogo APP 的圖標(biāo)崇决。 setTitle 主標(biāo)題。 setSubtitle 副標(biāo)題镶摘。 setOnMenuItemClickListener 設(shè)定菜單各按鈕的動作嗽桩。 先來看看菜單外的代碼，在 MainActivity.java 中： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // App Logo toolbar.setLogo(R.drawable.ic_launcher); // Title toolbar.setTitle("My Title"); // Sub Title toolbar.setSubtitle("Sub title"); setSupportActionBar(toolbar); // Navigation Icon 要設(shè)定在 setSupoortActionBar 才有作用 // 否則會出現(xiàn) back button toolbar.setNavigationIcon(R.drawable.ab_android); 這邊要留意的是setNavigationIcon需要放在 setSupportActionBar之后才會生效凄敢。 菜單部分碌冶，需要先在res/menu/menu_main.xml左定義： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <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/action_edit" android:title="@string/action_edit" android:orderInCategory="80" android:icon="@drawable/ab_edit" app:showAsAction="ifRoom" /> <item android:id="@+id/action_share" android:title="@string/action_edit" android:orderInCategory="90" android:icon="@drawable/ab_share" app:showAsAction="ifRoom" /> <item android:id="@+id/action_settings" android:title="@string/action_settings" android:orderInCategory="100" app:showAsAction="never"/> </menu> 再回到MainActivity.java 中加入OnMenuItemClickListener 的監(jiān)聽者： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = ""; switch (menuItem.getItemId()) { case R.id.action_edit: msg += "Click edit"; break; case R.id.action_share: msg += "Click share"; break; case R.id.action_settings: msg += "Click setting"; break; } if(!msg.equals("")) { Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); } return true; } }; 將onMenuItemClick監(jiān)聽者設(shè)置給toolbar 1 2 3 4 5 6 setSupportActionBar(toolbar); ... // Menu item click 的監(jiān)聽事件一樣要設(shè)定在 setSupportActionBar 才有作用 toolbar.setOnMenuItemClickListener(onMenuItemClick); 和 setNavigationIcon 一樣，需要將之設(shè)定在 setSupportActionBar 之后才有作用涝缝。執(zhí)行上面的代碼便會得到下面的界面扑庞。 android：ToolBar詳解（手把手教程） - android神 - 武臘福 完完整程序見：toolbar_demo_checkpoint3 5. 總結(jié) 在這樣的架構(gòu)設(shè)計下，ToolBar直接成了Layout中可以控制的東西拒逮，相對于過去的actionbar來說罐氨，設(shè)計與可操控性大幅提升。 本文上面的解釋中用到的完成代碼：toolbar demo check point 0 ~ 4滩援，請到Github 取得栅隐。 最后再附上一個界面上常用的屬性說明圖： android：ToolBar詳解（手把手教程） - android神 - 武臘福 這里按照圖中從上到下的順序做個簡單的說明： colorPrimaryDark 狀態(tài)欄背景色。 在 style 的屬性中設(shè)置玩徊。 textColorPrimary App bar 上的標(biāo)題與更多菜單中的文字顏色租悄。 在 style 的屬性中設(shè)置。 App bar 的背景色 Actionbar 的背景色設(shè)定在 style 中的 colorPrimary恩袱。 Toolbar 的背景色在layout文件中設(shè)置background屬性泣棋。 colorAccent 各控制元件(如：check box、switch 或是 radoi) 被勾選 (checked) 或是選定 (selected) 的顏色畔塔。 在 style 的屬性中設(shè)置潭辈。 colorControlNormal 各控制元件的預(yù)設(shè)顏色鸯屿。 在 style 的屬性中設(shè)置 windowBackground App 的背景色。 在 style 的屬性中設(shè)置 navigationBarColor 導(dǎo)航欄的背景色把敢，但只能用在 API Level 21 (Android 5) 以上的版本 在 style 的屬性中設(shè)置

所有的安靜都是人造的冷清技竟，所有的雜音在安慰后平靜……

[不定期收錄] 有?且?僅?有?Android?面試題联逻，基礎(chǔ)開發(fā)內(nèi)容忽略～

分享Android開發(fā)的知識包归，教程锨推，解析，前沿信息公壤，都可以换可，歡迎大家投稿~ 內(nèi)容可搞笑，可逗比厦幅，另外歡迎申請管理員 Android開發(fā)相關(guān)的精選內(nèi)容沾鳄，請關(guān)注Android開發(fā)精選

-定位：體系化分享Android知識<br>-個人：騰訊-微信译荞、CSDN博客專家<br>-微信公眾號：Carson帶你學(xué)Android<br>

區(qū)塊鏈學(xué)習(xí)中

Android 開發(fā)工程師 喜歡打籃球 打游戲 <br>