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

攜一汪清水，灑向人間致燥！

勿忘初心......

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

重申一遍，我不是老師续捂，我也是剛?cè)肟硬痪玫那岸顺绦騿T垦垂，喜歡我的作品請?zhí)鹉哔F的雙手為作者點贊，后續(xù)為大家準備有項目實戰(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 手機有個一致的操作體驗房资。ActionBar 過去最多人使用的兩大套件就是 ActionBarSherlock 以及官方提供在 support library v 7 里的 AppCompat蜕劝。 既然會有本篇跟各位介紹的 Toolbar，也意味著官方在某些程度上認為 ActionBar 限制了 android app 的開發(fā)與設(shè)計的彈性轰异，而在 material design 也對之做了名稱的定義：App bar岖沛。接下來將為各位分成幾個階段進行說明，如何在 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 接著往下進行： android：ToolBar詳解（手把手教程） - android神 - 武臘福 上圖是將本階段要完成的結(jié)果畫面做了標示陨献，結(jié)合下面的描述希望大家能明白盒犹。 colorPrimaryDark（狀態(tài)欄底色）：在風(fēng)格 (styles) 或是主題 (themes) 里進行設(shè)定。 App bar 底色 這個設(shè)定分為二，若你的 android app 仍是使用 actionbar 急膀，則直接在風(fēng)格 (styles) 或是主題 (themes) 里進行設(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 進行設(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/> 標簽中，自行添加元件的 toolbar 有幾個大家常用的元素可以使用陨舱，請先見下圖： android：ToolBar詳解（手把手教程） - android神 - 武臘福 大抵來說翠拣，預(yù)設(shè)常用的幾個元素就如圖中所示，接著就依序來說明之： setNavigationIcon 即設(shè)定 up button 的圖標隅忿，因為 Material 的介面心剥，在 Toolbar這里的 up button樣式也就有別于過去的 ActionBar 哦邦尊。 setLogo APP 的圖標背桐。 setTitle 主標題。 setSubtitle 副標題蝉揍。 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 上的標題與更多菜單中的文字顏色瘤袖。 在 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>