本文為菜鳥窩作者劉婷的連載攒读。"商城項目實戰(zhàn)"系列來聊聊仿"京東淘寶的購物商城"如何實現(xiàn)绸贡。
140套商城源碼歡迎勾搭運營小姐姐(微信 id:BT474849)免費領
現(xiàn)在很多的 APP 里面都有自己的自定義風格,特別是京東商城中自定義的頭部布局——自定義的 Toolbar 效果非常不錯凛辣,看上去很美觀,其效果圖如下扁誓。
想要定義出這樣的效果并不是很難,主要是要對控件的屬性熟悉以及對控件的熟練使用跋理,下面就先簡單了解下 Toolbar 的基本屬性以及簡單使用择克。
什么是 Toolbar
1. Toolbar 的解釋
Toolbar 是 android 5.0 引入的一個新控件,可以理解為是 ActionBar 的升級版前普,大大擴展了 Actionbar肚邢,使用更靈活拭卿,不像 actionbar 那么固定,Toolbar 更像是一般的View元素响蕴,可以被放置在 view 樹體系的任意位置惠桃,可以應用動畫浦夷,可以跟著 scrollView 滾動辜王,可以與布局中的其他 view 交互。
2. Toolbar 的基本屬性####
1. xml style屬性:
colorPrimaryDark:狀態(tài)欄的顏色(可用來實現(xiàn)沉浸效果)呐馆。
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 就可以了柳爽,因為已經(jīng)有了 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.效果圖打毛。
![](http://upload-images.jianshu.io/upload_images/5205232-f8f76d9f20be8c56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
到這里 Toolbar 的基本使用就介紹完了俩功,下一節(jié)中將會開始介紹如何自定義屬于自己的 Toolbar。
>更多內(nèi)容绑雄,請關注菜鳥窩(微信公眾號ID: cniao5),程序猿的在線學習平臺罗珍。 轉(zhuǎn)載請注明出處,本文出自菜鳥窩覆旱,原文鏈接http://www.cniao5.com/forum/thread/8e40ee120ecf11e79ff800163e0230fa