Android View的点击事件导致文字颜色变化的实现原理

程序的良好UI设计会给用户良好的体验，下面来分享一下微信页面的忘记密码点击之后颜色变化是怎么实现的

我们先看效果图

点击前

点击时

通过效果图我们看到了点击前和点击时颜色发生了变化，

一开始感觉这个点击之后会有相应的处理逻辑，我想着这个肯定是用一个Button来实现的，但是后来一想不对呀，Button extends TextView ，而且TextView extends View，

Button和TextView都可以设置点击事件，所以忘记密码用Button 和TextView 效果是一样的。但是有一点要注意，使用Button的话我们必须要给它设置 android:background="@null"，不然就会显示为一个Button，而不是文字。

下面我们来看代码是怎么实现的：

MainActivity中代码如下：

 1 public class MainActivity extends Activity {
 2     /** Called when the activity is first created. */
 3 
 4     private Button forgetBtn;
 5 
 6     @Override
 7     public void onCreate(Bundle savedInstanceState) {
 8         super.onCreate(savedInstanceState);
 9         requestWindowFeature(Window.FEATURE_NO_TITLE);
10         setContentView(R.layout.activity_login);
11 
12         forgetBtn = (Button) findViewById(R.id.login_tv_forgotpassword);
13         forgetBtn.setTextColor(getResources().getColorStateList(
14                 R.color.mm_btn_text));
15         forgetBtn.setOnClickListener(new OnClickListener() {
16 
17             @Override
18             public void onClick(View v) {
19                 Toast.makeText(MainActivity.this, "This is a button", 0).show();
20 
21             }
22         });
23     }
24 }
activity_login.xml代码如下
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:background="@color/white" >
 6 
 7     <LinearLayout
 8         android:id="@+id/layout_header"
 9         android:layout_width="fill_parent"
10         android:layout_height="wrap_content"
11         android:layout_alignParentTop="true"
12         android:background="@drawable/bg_topbar"
13         android:focusable="true" />
14 
15     <LinearLayout
16         android:id="@+id/layout_content"
17         android:layout_width="fill_parent"
18         android:layout_height="fill_parent"
19         android:layout_below="@+id/layout_header"
20         android:orientation="vertical" >
21 
22         <ScrollView
23             android:layout_width="fill_parent"
24             android:layout_height="fill_parent"
25             android:layout_weight="1.0"
26             android:scrollbars="vertical" >
27 
28             <LinearLayout
29                 android:layout_width="fill_parent"
30                 android:layout_height="fill_parent"
31                 android:orientation="vertical"
32                 android:paddingLeft="10.0dip"
33                 android:paddingRight="10.0dip"
34                 android:paddingTop="15.0dip" >
35 
36                 <EditText
37                     android:id="@+id/login_et_momoid"
38                     android:layout_width="fill_parent"
39                     android:layout_height="wrap_content"
40                     android:layout_marginBottom="8.0dip"
41                     android:background="@drawable/edittext_default"
42                     android:inputType="text"
43                     android:singleLine="true" />
44 
45                 <EditText
46                     android:id="@+id/login_et_pwd"
47                     android:layout_width="fill_parent"
48                     android:layout_height="wrap_content"
49                     android:layout_marginBottom="8.0dip"
50                     android:background="@drawable/edittext_default"
51                     android:imeOptions="actionDone"
52                     android:inputType="textPassword"
53                     android:singleLine="true" />
54 
55                 <Button56                     android:background="@null"
57                     android:id="@+id/login_tv_forgotpassword"
58                     android:layout_width="wrap_content"
59                     android:layout_height="wrap_content"
60                     android:text="忘记密码？"
61                     android:textSize="16.0sp" />
62             </LinearLayout>
63         </ScrollView>
64 
65         <RelativeLayout style="@style/Style_BottomBar" >
66 
67             <Button
68                 android:id="@+id/btn_back"
69                 style="@style/Style_Login_register_btn"
70                 android:layout_width="wrap_content"
71                 android:layout_height="wrap_content"
72                 android:layout_alignParentLeft="true"
73                 android:text="返回" />
74 
75             <Button
76                 android:id="@+id/btn_ok"
77                 style="@style/Style_Login_register_btn"
78                 android:layout_width="wrap_content"
79                 android:layout_height="wrap_content"
80                 android:layout_alignParentRight="true"
81                 android:text="登录" />
82         </RelativeLayout>
83     </LinearLayout>
84 
85     <ImageView
86         android:id="@+id/layout_shadow"
87         android:layout_width="fill_parent"
88         android:layout_height="wrap_content"
89         android:layout_below="@id/layout_header"
90         android:background="@drawable/bg_topbar_shadow"
91         android:focusable="false" />
92 
93 </RelativeLayout>

res/color/mm_btn_text.xml代码如下：

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3 
4     <item android:state_enabled="false" android:color="#ff809aff"/>
5     <item android:state_pressed="true" android:color="#ff01bafe"/>
6     <item android:color="#ff2e5f93"/>
7 
8 </selector>

 

本篇文章的代码是在上一篇：

  登录界面与Android软键盘显示、隐藏的交互设计

基础之上写的，而且代码也不是很难，大家如果想看效果还是自己动手写一写代码。
 

 

posted on 2012-07-24 15:57  oasis2008  阅读(1362)  评论(0)  编辑  收藏  举报

导航