快捷導(dǎo)航

Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實(shí)現(xiàn))

更新時(shí)間：2017年04月21日 16:14:42 投稿：mrr

這篇文章主要介紹了Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實(shí)現(xiàn)),需要的朋友可以參考下

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

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

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

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

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

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

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Non focused states -->
  <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home" />
  <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
  <!-- Focused states -->
  <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
  <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@mipmap/icon_home_press" />
  <!-- Pressed -->
  <item android:state_selected="true" android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
  <item android:state_pressed="true" android:drawable="@mipmap/icon_home_press" />
 </selector>

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

 imageView.setBackgroundResource(R.drawable.selector_icon_home);

運(yùn)行后得到效果圖如下。

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

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

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Selected -->
  <item android:state_selected="true" android:color="#eb4f38" />
  <!-- Active -->
  <item android:state_active="true" android:color="#eb4f38"/>
  <item android:state_selected="false" android:color="#a9b7b7" />
  <item android:state_active="false" android:color="#a9b7b7"/>
</selector>

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

 android:textColor="@color/selector_tab_text

運(yùn)行后得到效果圖如下。

最終效果

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

以上所述是小編給大家介紹的Android 仿京東商城底部布局的選擇效果(Selector 選擇器的實(shí)現(xiàn))，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: