本文為菜鳥窩作者劉婷的連載。"商城項目實戰"系列來聊聊仿"京東淘寶的購物商城"如何實現。
140套商城源碼歡迎勾搭運營小姐姐（微信 id：BT474849）免費領
現在很多的 APP 里面都有自己的自定義風格，特別是京東商城中自定義的頭部布局——自定義的 Toolbar 效果非常不錯，看上去很美觀，其效果圖如下。
想要定義出這樣的效果并不是很難，主要是要對控件的屬性熟悉以及對控件的熟練使用，下面就先簡單了解下 Toolbar 的基本屬性以及簡單使用。
什么是 Toolbar
1. Toolbar 的解釋
Toolbar 是 android 5.0 引入的一個新控件，可以理解為是 ActionBar 的升級版，大大擴展了 Actionbar，使用更靈活，不像 actionbar 那么固定，Toolbar 更像是一般的View元素，可以被放置在 view 樹體系的任意位置，可以應用動畫，可以跟著 scrollView 滾動，可以與布局中的其他 view 交互。
2. Toolbar 的基本屬性####
1. xml style屬性：
colorPrimaryDark：狀態欄的顏色（可用來實現沉浸效果）。
colorPrimary: Toolbar 的背景顏色 （xml中用android:background=”?attr/colorPrimary”指定）。
android:textColorPrimary：Toolbar中文字的顏色，設置后Menu Item 的字體顏色也會跟隨。
colorAccent：EditText 正在輸入時，RadioButton 選中時的顏色。
2. xml 屬性：
app:title=”App Title”：Toolbar 中的 App Title。
app:subtitle=”Sub Title” ：Toobar 中的小標題。
app:navigationIcon=”?attr/homeAsUpIndicator” ： 導航圖標，比如返回圖標（與 Logo 不同）。
Toolbar 的簡單使用
1.首先在布局 layout 文件中寫入引用代碼。
<android.support.v7.widget.Toolbar
android:id="@+id/home_toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:navigationIcon="?attr/homeAsUpIndicator"
</android.support.v7.widget.Toolbar>```
2.然后在 Activity 中聲明定義該控件，注意 Activity 必須是繼承于 AppCompatActivity。
```xml
toolbar=(Toolbar)findViewById(R.id.home_toolbar_main);```
3.聲明定義之后還需要配置一下，設置 toolbar。
```xml
setSupportActionBar(toolbar);```
4.添加標題
```xml
setTitle("首頁");```
5.最后只要設置 Application 的 Style —— AppTheme 和 Activity 的 Style —— AppTheme.NoActionBar 就可以了，因為已經有了 Toolbar 了，替代了 ActionBar，所以在 Activity 的 Theme 中需要設置為 windowActionBar 為 false。
```xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimary</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<!-- activity theme. -->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>```
6.效果圖。
到這里 Toolbar 的基本使用就介紹完了，下一節中將會開始介紹如何自定義屬于自己的 Toolbar。
>更多內容，請關注菜鳥窩（微信公眾號ID: cniao5），程序猿的在線學習平臺。 轉載請注明出處，本文出自菜鳥窩，原文鏈接http://www.cniao5.com/forum/thread/8e40ee120ecf11e79ff800163e0230fa