android点击效果selector

要做一个类似这样的组合按钮。

点击的时候 改变背景颜色，改变图标颜色，改变字体颜色。

看起来很容易嘛。一个垂直的LinearLayout + Imageview + Textview+几个点击的selector就搞定了。

xml代码：

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.textpro.MainActivity" >

    	<LinearLayout
            android:id="@+id/ll_static"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ll_bg"
            android:gravity="center"
            android:clickable="true"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/img_drawable" />

            <TextView
                android:id="@+id/tv_static"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="2dp"
                android:text="xxx统计"
                android:textColor="@color/white"
                android:textSize="14sp" />
        </LinearLayout>

</RelativeLayout>

背景图片的ll_bg.xml 与 img_drawable.xml 

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="false" android:drawable="@drawable/bg_normal" /> 
  <item android:state_pressed="true" android:drawable="@drawable/bg_pressed" />
</selector>

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="false" android:drawable="@drawable/img_normal" /> 
  <item android:state_pressed="true" android:drawable="@drawable/img_pressed" />
</selector>

接着处理TextView的按下变色事件。设置linearLayout的onTouch事件就ok了。

public class MainActivity extends Activity {

	private TextView tvStatic;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		View mView = this.findViewById(R.id.ll_static);
		
		tvStatic = (TextView)this.findViewById(R.id.tv_static);
		mView.setOnTouchListener(new OnTouchListener() {
			
			@Override
			public boolean onTouch(View view, MotionEvent motionEvent) {
				int action = motionEvent.getAction();
				switch (action) {
				case MotionEvent.ACTION_DOWN:
					tvStatic.setTextColor(getResources().getColor(R.color.purple));
					Log.e("ACTION_DOWN", "ACTION_DOWN");
					break;
				case MotionEvent.ACTION_MOVE:
					tvStatic.setTextColor(getResources().getColor(R.color.purple));
					Log.e("ACTION_MOVE", "ACTION_MOVE");
					break;
				case MotionEvent.ACTION_UP:
					tvStatic.setTextColor(getResources().getColor(R.color.white));
					Log.e("ACTION_UP", "ACTION_UP");
					break;
				default:
					break;
				}
				return false;//返回false 不会屏蔽掉xml中的背景改变事件
			}
		});
	}
}

运行起来，点击基本效果都出来了。但是光有点击效果肯定不行，还得有点击事件。这里模拟一个耗时事件。

		mView.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
				try {
					Thread.sleep(1000);
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
				
			}
		});

运行代码。

可以很明显的看出，字体颜色的改变与上面的背景改变不同步了。

通过打印log发现，onTouch事件在onClick事件之前运行。也就是说，当程序运行到click事件的时候，字体的颜色转变已经结束了，而背景图片与图标的转变仍然在运行中。那么如何保证 3个背景颜色转变的一致性呢？解决方法通过查资料也找到一些。

1. onClick事件中耗时操作在线程中运行。

2. TextView的点击变色操作不在OnTouch事件中编写，通过color的selector处理。具体操作: 在res下新建color文件夹，新建tv_color.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="false" android:color="@color/white" /> 
  <item android:state_pressed="true" android:color="@color/purple" />
</selector>