一、目的效果
越好的用戶體驗來源更直接更明顯的事件反饋。selector可以“預存”多種響應的反饋,主要以下多種狀態有:
android:state_selected是選中
android:state_focused是獲得焦點
android:state_pressed是點擊
android:state_enabled是設置是否響應事件,指所有事件
設置不同狀態的表現形式,則會在不同場景下有不同狀態。如文字:被選中狀態,未被選中狀態。
selector的普通使用則是為對應單個控件添加以selector為背景的資源,則能達到目的。聯合使用則是基本使用一種升級。在我們的導航欄中,常使用LinearLayout或者RelativeLayout包含一個ImageView和一個TextView。圖片用于直觀觀感,文字用于更清晰的描述。
在一個整體菜單被選中時,需要圖片及文字都表現對應的狀態。并為保證較大的事件響應范圍,點擊事件常賦予包含圖片和文字的父控件。即:為LinearLayout設置點擊事件,ImageView、TextView表現對應的狀態。
二、具體實現
文字的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的背景圖,并設置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="確認" /> </LinearLayout></LinearLayout>
MainActivity.Java中應用效果:
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, "你點擊了QQ登錄區間", Toast.LENGTH_SHORT).show(); break; case R.id.weixin_ll: Toast.makeText(MainActivity.this, "你點擊了WeChat登錄區間", Toast.LENGTH_SHORT).show(); break; case R.id.text_button_ll: Toast.makeText(MainActivity.this, "你點擊了Text_Button區間", Toast.LENGTH_SHORT).show(); break; } }}
展示效果:
三、注意細節
1.默認狀態放在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>
不能實現對應效果?。?!
2.TextView selector需要放置在 res/corlor目錄下
3.Button的點擊事件優先級高于包含他的父控件,需要將他只為不可點擊狀態,才能保證狀態的一致性。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答