Android selector狀態(tài)選擇器的使用詳解
一、目的效果
越好的用戶體驗(yàn)來源更直接更明顯的事件反饋。selector可以“預(yù)存”多種響應(yīng)的反饋,主要以下多種狀態(tài)有:
android:state_selected是選中
android:state_focused是獲得焦點(diǎn)
android:state_pressed是點(diǎn)擊
android:state_enabled是設(shè)置是否響應(yīng)事件,指所有事件
設(shè)置不同狀態(tài)的表現(xiàn)形式,則會(huì)在不同場(chǎng)景下有不同狀態(tài)。如文字:被選中狀態(tài),未被選中狀態(tài)。
selector的普通使用則是為對(duì)應(yīng)單個(gè)控件添加以selector為背景的資源,則能達(dá)到目的。聯(lián)合使用則是基本使用一種升級(jí)。在我們的導(dǎo)航欄中,常使用LinearLayout或者RelativeLayout包含一個(gè)ImageView和一個(gè)TextView。圖片用于直觀觀感,文字用于更清晰的描述。
在一個(gè)整體菜單被選中時(shí),需要圖片及文字都表現(xiàn)對(duì)應(yīng)的狀態(tài)。并為保證較大的事件響應(yīng)范圍,點(diǎn)擊事件常賦予包含圖片和文字的父控件。即:為L(zhǎng)inearLayout設(shè)置點(diǎn)擊事件,ImageView、TextView表現(xiàn)對(duì)應(yīng)的狀態(tài)。
二、具體實(shí)現(xiàn)
文字的selector:res添加目錄color,res/color/bg_tv_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/red" android:state_pressed="true" /> <item android:color="@color/black" /> </selector>
圖片的selector:bg_qq_iv_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/b_qq_pressed" android:state_pressed="true" /> <item android:drawable="@mipmap/b_qq" /> </selector>
使用shape為Button的背景圖,并設(shè)置selector:
bg_bt_drawable_normal.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp" />
<stroke
android:width="2dp"
android:color="@color/black" />
</shape>
bg_bt_drawable_pressed.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp" />
<stroke
android:width="2dp"
android:color="@color/blue"
android:dashGap="10dp" />
<gradient
android:centerColor="@color/red"
android:endColor="@color/green" />
</shape>
bg_bt_selector.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bg_bt_drawable_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/bg_bt_drawable_normal" /> </selector>
activity_main.xml中使用:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.future.selectorlldemo.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/qq_ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/green"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bg_qq_iv_selector" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QQ"
android:textColor="@color/bg_tv_selector" />
</LinearLayout>
<LinearLayout
android:id="@+id/weixin_ll"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@color/blue"
android:clickable="true"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/bg_weixin_iv_selector" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WeChat"
android:textColor="@color/bg_tv_selector" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/text_button_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="文字和Button"
android:textColor="@color/bg_tv_selector" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/bg_bt_selector"
android:clickable="false"
android:text="確認(rèn)" />
</LinearLayout>
</LinearLayout>
MainActivity.Java中應(yīng)用效果:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
/**
* qq登錄按鈕
*/
private LinearLayout qqLoginLL;
/**
* 微信登錄按鈕
*/
private LinearLayout weixinLoginLL;
/**
* 文字和Button一起
*/
private LinearLayout textButtonLL;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
qqLoginLL = (LinearLayout) findViewById(R.id.qq_ll);
weixinLoginLL = (LinearLayout) findViewById(R.id.weixin_ll);
textButtonLL = (LinearLayout) findViewById(R.id.text_button_ll);
qqLoginLL.setOnClickListener(this);
weixinLoginLL.setOnClickListener(this);
textButtonLL.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.qq_ll:
Toast.makeText(MainActivity.this, "你點(diǎn)擊了QQ登錄區(qū)間", Toast.LENGTH_SHORT).show();
break;
case R.id.weixin_ll:
Toast.makeText(MainActivity.this, "你點(diǎn)擊了WeChat登錄區(qū)間", Toast.LENGTH_SHORT).show();
break;
case R.id.text_button_ll:
Toast.makeText(MainActivity.this, "你點(diǎn)擊了Text_Button區(qū)間", Toast.LENGTH_SHORT).show();
break;
}
}
}
展示效果:

三、注意細(xì)節(jié)
1.默認(rèn)狀態(tài)放在selector的最后
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/b_qq" /> <item android:drawable="@mipmap/b_qq_pressed" android:state_pressed="true" /> </selector>
不能實(shí)現(xiàn)對(duì)應(yīng)效果?。?!
2.TextView selector需要放置在 res/corlor目錄下
3.Button的點(diǎn)擊事件優(yōu)先級(jí)高于包含他的父控件,需要將他只為不可點(diǎn)擊狀態(tài),才能保證狀態(tài)的一致性。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android使用TabLayout+Fragment實(shí)現(xiàn)頂部選項(xiàng)卡
本文通過實(shí)例代碼給大家介紹了Android使用TabLayout+Fragment實(shí)現(xiàn)頂部選項(xiàng)卡功能,包括TabLyout的使用,感興趣的朋友參考下本文吧2017-05-05
MVVM和MVVMLight框架介紹及在項(xiàng)目中的使用詳解
這篇文章主要為大家介紹了MVVM和MVVMLight的介紹及在項(xiàng)目中的使用詳解有需要的朋友可以借鑒參考下,祝大家除夕快樂多多進(jìn)步2022-01-01
android dialog邊框去除白色邊框?qū)崿F(xiàn)思路及代碼
android dialog邊框含有白色真是美中不足啊,本文將介紹如何去除白色邊框,有思路及代碼,感興趣的朋友可以了解下2013-01-01
Android編程實(shí)現(xiàn)為應(yīng)用添加菜單的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)為應(yīng)用添加菜單的方法,涉及Android菜單界面布局與功能實(shí)現(xiàn)的相關(guān)技巧,需要的朋友可以參考下2016-01-01
Android開發(fā)筆記之:一分鐘學(xué)會(huì)使用Logcat調(diào)試程序的詳解
本篇文章是對(duì)Android中Logcat調(diào)試程序的使用進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
Android開發(fā)教程之初識(shí)Android App
這篇文章主要為大家詳細(xì)介紹了Android開發(fā)教程之初識(shí)Android App的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-06-06
Android自定義View仿微博運(yùn)動(dòng)積分動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View仿微博運(yùn)動(dòng)積分動(dòng)畫效果,開啟了自定義view學(xué)習(xí)旅程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
flutter 路由機(jī)制的實(shí)現(xiàn)
本文主要介紹 flutter 中的路由實(shí)現(xiàn)原理,包括初始化時(shí)的頁(yè)面加載、切換頁(yè)面的底層機(jī)制等。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07

