前言
本文為菜鳥窩作者劉婷的連載。"商城項目實戰"系列來聊聊仿"京東淘寶的購物商城"如何實現。
京東商城的底部布局的選擇效果看上去很復雜，其實很簡單，這主要是要感謝 selector 選擇器，本文將講解仿照京東商城的底部布局的選擇效果，如何實現 selector 選擇器，在不同的狀態下，給 view 設置不同的背景。
京東商城底部布局的選擇效果如下。
View主要的幾種狀態
主要狀態有8種，設置狀態的代碼以及相應的含義如下。
1 1. android:state_pressed = "true/false" //true表示按下狀態，false表示非按下狀態。 2 2. android:state_focused = "true/false" //true表示焦點聚集狀態，false表示非焦點聚集狀態。 3 3. android:state_selected = "true/false" //true表示選中狀態，false表示非選中狀態。 4 4. android:state_activated = "true/false" //true表示激活狀態，false表示非激活狀態。 5 5. android:state_checkable = "true/false" //true表示可以勾選狀態，false表示不可以勾選。 6 6. android:state_checked = "true/false" //true表示被勾選狀態，false表示未被勾選狀態。 7 7. android:state_enabled = "true/false" //true表示可用狀態，fasle表示不可用狀態。 8 8. android:state_window_focused = "true/false" //true表示應用程序窗口獲取焦點狀態，false表示應用程序窗口非獲取焦點狀態。
設置不同狀態下的圖標背景
首先准備好不同狀態下的同一類型的圖標分別兩張，復制到 mipmap 文件下，然后在 drawable 文件下新建 Drawable resource file 文件，命名為 selector_icon_home.xml。
之后在 selector 下寫入不同狀態下的背景圖，這里是首頁模塊的 Selector 設置的源代碼。其他模塊的 Selector 圖標設置和首頁模塊一致。
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>
所有模塊下的 Selector 圖片文件都添加完成后，最后設置 ImageView 的背景為 R.drawable.selector_icon_home，代碼如下。
1 imageView.setBackgroundResource(R.drawable.selector_icon_home);
運行后得到效果圖如下。
設置不同狀態下的文字顏色
新建 color 文件，然后新建 Color resource file 文件，命名為 selector_tab_text.xml。
這里各個模塊的選擇效果下文本顏色變化是一樣的，只需要在該文件中寫入不同狀態下的文字的顏色就可以了，其源代碼如下。
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>
然后在布局文件 layout 中設置 TextView 的文字顏色為 R.color. selector_tab_text 就大功到成了。
1 android:textColor="@color/selector_tab_text
運行后得到效果圖如下。
最終效果
selector 選擇器在點擊事件狀態變化時基本上都會使用到，既開發方便，又交互效果好，已經是必不可少的，更多的用處和用法可以參考 Android developer 官方文檔。