前言

本文為菜鳥窩作者劉婷的連載。"商城項目實戰(zhàn)"系列來聊聊仿"京東淘寶的購物商城"如何實現(xiàn)。

京東商城的底部布局的選擇效果看上去很復(fù)雜，其實很簡單，這主要是要感謝 selector 選擇器，本文將講解仿照京東商城的底部布局的選擇效果，如何實現(xiàn) selector 選擇器，在不同的狀態(tài)下，給 view 設(shè)置不同的背景。
京東商城底部布局的選擇效果如下。

 

View主要的幾種狀態(tài)

主要狀態(tài)有8種，設(shè)置狀態(tài)的代碼以及相應(yīng)的含義如下。

 

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

1 1. android:state_pressed = "true/false" //true表示按下狀態(tài)，false表示非按下狀態(tài)。2 2. android:state_focused = "true/false" //true表示焦點聚集狀態(tài)，false表示非焦點聚集狀態(tài)。3 3. android:state_selected = "true/false" //true表示選中狀態(tài)，false表示非選中狀態(tài)。4 4. android:state_activated = "true/false" //true表示激活狀態(tài)，false表示非激活狀態(tài)。5 5. android:state_checkable = "true/false" //true表示可以勾選狀態(tài)，false表示不可以勾選。6 6. android:state_checked = "true/false" //true表示被勾選狀態(tài)，false表示未被勾選狀態(tài)。7 7. android:state_enabled = "true/false" //true表示可用狀態(tài)，fasle表示不可用狀態(tài)。8 8. android:state_window_focused = "true/false" //true表示應(yīng)用程序窗口獲取焦點狀態(tài)，false表示應(yīng)用程序窗口非獲取焦點狀態(tài)。

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

 

設(shè)置不同狀態(tài)下的圖標背景

首先準備好不同狀態(tài)下的同一類型的圖標分別兩張，復(fù)制到 mipmap 文件下，然后在 drawable 文件下新建 Drawable resource file 文件，命名為 selector_icon_home.xml。

 

之后在 selector 下寫入不同狀態(tài)下的背景圖，這里是首頁模塊的 Selector 設(shè)置的源代碼。其他模塊的 Selector 圖標設(shè)置和首頁模塊一致。

 

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

 1 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 2     <!-- Non focused states --> 3     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" /> 4     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" /> 5     <!-- Focused states --> 6     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" /> 7     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" /> 8     <!-- Pressed --> 9     <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />10     <item android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />11  </selector>

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

 

所有模塊下的 Selector 圖片文件都添加完成后，最后設(shè)置 ImageView 的背景為 R.drawable.selector_icon_home，代碼如下。

 1 imageView.setBackgroundResource(R.drawable.selector_icon_home); 

運行后得到效果圖如下。

 

設(shè)置不同狀態(tài)下的文字顏色

新建 color 文件，然后新建 Color resource file 文件，命名為 selector_tab_text.xml。

 

這里各個模塊的選擇效果下文本顏色變化是一樣的，只需要在該文件中寫入不同狀態(tài)下的文字的顏色就可以了，其源代碼如下。

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

1 <selector xmlns:android="http://schemas.android.com/apk/res/android">2     <!-- Selected -->3     <item android:state_selected="true" android:color="#eb4f38" />4     <!-- Active -->5     <item android:state_active="true" android:color="#eb4f38"/>6     <item android:state_selected="false" android:color="#a9b7b7" />7     <item android:state_active="false" android:color="#a9b7b7"/>8 </selector>

電腦培訓(xùn),計算機培訓(xùn),平面設(shè)計培訓(xùn),網(wǎng)頁設(shè)計培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

然后在布局文件 layout 中設(shè)置 TextView 的文字顏色為 R.color. selector_tab_text 就大功到成了。

 1 android:textColor="@color/selector_tab_text 

運行后得到效果圖如下。

 

最終效果

 

selector 選擇器在點擊事件狀態(tài)變化時基本上都會使用到，既開發(fā)方便，又交互效果好，已經(jīng)是必不可少的，更多的用處和用法可以參考 Android developer 官方文檔。

http://www.cnblogs.com/LT5505/p/6744040.html