本文介绍了如何使用Android的selector来创建直观的事件反馈，特别是针对Button和TextView的状态选择器。通过在布局中设置selector作为背景资源，可以实现不同状态下的样式变化。在详细步骤中，提到了文字颜色的selector实现以及注意点，如默认状态的位置、TextView的selector目录和Button的点击事件处理，以确保整体菜单选中时的视觉一致性。
一、目的效果
越好的用户体验来源更直接更明显的事件反馈。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>
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的点击事件优先级高于包含他的父控件，需要将他只为不可点击状态，才能保证状态的一致性。
越到后面才会发现，很多事情不是因为有希望才坚持，而是因为坚持才有希望。
我不清楚自己的未来，只是希望自己的基础越来越稳固，汗水流淌的越来越多。
愿你我一起共同进步~~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
