溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-26 20:11:58 來(lái)源：腳本之家 閱讀：150 作者：mrr 欄目：移動(dòng)開發(fā)

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

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

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。

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

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

<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)行后得到效果圖如下。

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

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

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

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

這里各個(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)行后得到效果圖如下。

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

最終效果

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

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

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

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手