首页 > 代码库 > 【Android UI】案例04配置控件点击效果(selector)

【Android UI】案例04配置控件点击效果(selector)

       本例采用XML(selector),配置控件点击效果的实现,即当控件被触发或点击获取到焦点时,出现样式上的改变,以便给以较好的用户体验与操作感。本例需要引入的核心知识点的selector.xml。请参考学习:http://blog.csdn.net/mahoking/article/details/23690857。本例用于演示点击效果的控件为TextView、Button。

【转载使用,请注明出处:http://blog.csdn.net/mahoking
       首先需要配置selector.xml文件,因为本例需要的测试控件包含TextView和Button,所以本案例需要配置两个XML文件,文件位于/res/drawable下。分别为:seletor_04_click_textview.xml、seletor_04_click_button.xml。
seletor_04_click_textview.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:color="#18A960" />
    <item android:state_focused="true" android:color="#18A960" />
    <item android:state_selected="true" android:color="#18A960" />
    <item android:color="@android:color/black"></item>
</selector>


seletor_04_click_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
   <item android:state_focused="true" android:drawable="@drawable/button_pressed"  />
   <item android:state_selected="true" android:drawable="@drawable/button_pressed" />
   <item android:drawable="@drawable/button_default"></item>
</selector>

       seletor_04_click_textview.xml旨在改变TextView的字体颜色,seletor_04_click_button.xml旨在改变Button的背景图片,所以我们需要给Button准备两张不同的图片,以显示改变的效果。
然后是主布局文件activity_04_seletor.xml。需要特别注意的地方是:
TextView控件的配置(文本颜色)
android:textColor="@drawable/seletor_04_click_textview"
Button控件的配置(背景图片)
android:background="@drawable/seletor_04_click_button"

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
   <TextView android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:layout_marginBottom="10dp"
       android:text="以下演示TextView,点击时文字颜色改变"
       android:gravity="center"/>
	
	<TextView android:layout_height="30dp"
       android:layout_width="match_parent"
       android:id="@+id/activity_04_seletor_textview"
       android:layout_marginTop="10dp"
       android:text="测试使用TextView"
       android:textSize="25dp"
       android:textColor="@drawable/seletor_04_click_textview"
       android:gravity="center"
       android:layout_marginBottom="40dp"/>
   
   <TextView android:layout_height="wrap_content"
       android:layout_width="match_parent"
       android:layout_marginTop="10dp"
       android:text="以下演示Button,点击时背景图片改变"
       android:textColor="@drawable/seletor_04_click_textview"
       android:layout_marginBottom="10dp"
       android:gravity="center"/>
   
   <Button android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/activity_04_seletor_button"
       android:gravity="center"
       android:background="@drawable/seletor_04_click_button"
       android:layout_marginBottom="60dp"/>
</LinearLayout>

      最后编写Activity(SelectorActivity)如下,完成后运行该项目。

public class SelectorActivity extends Activity {

	private TextView  textView;
	private Button button;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_04_seletor);
		initViews();
	}
	
	/**
	 * 初始化视图
	 */
	private void initViews() {

		textView = (TextView) findViewById(R.id.activity_04_seletor_textview);
		button = (Button) findViewById(R.id.activity_04_seletor_button);
		MainOnClickListener clickListener = new MainOnClickListener();
		textView.setOnClickListener(clickListener);
		button.setOnClickListener(clickListener);
	}
	
	private class MainOnClickListener implements View.OnClickListener{

		@Override
		public void onClick(View v) {
			int viewId = v.getId();
			switch (viewId) {
			case R.id.activity_04_seletor_button:
				Toast.makeText(getApplicationContext(), "背景图片发生改变", Toast.LENGTH_SHORT).show();
				break;
			case R.id.activity_04_seletor_textview:
				Toast.makeText(getApplicationContext(), "文字颜色发生改变", Toast.LENGTH_SHORT).show();
				break;
			default:
				break;
			}
		}
		
	}
}


效果截图:


 

 

【转载使用,请注明出处:http://blog.csdn.net/mahoking


【Android UI】案例04配置控件点击效果(selector)