仿QQ界面之搜索框

概要

好久都没更了...大学考试你懂得“一天一本书，一周一学期”。。。今天上午刚考完试，我们的仿QQ界面还没做完，今天我们继续，由于刚考完试，让我缓一缓先来一个简单的作为下一步的铺垫

 

效果演示

我们要做的是这个部分

这是我们做的效果

知识点总结

1.如何给ImageButton设置背景图片->用 src=“@drawable/****”

2.如何在xml隐藏ImageButton -> visibility= "gone"

3.能不能对文本编辑框进行监听？ ->能，用addTextChangedListener(new TextWatcher{})

4.如何在activity里实现imagebutton的隐藏与显示 

setVisibility(View.VISIBLE);

显示

setVisibility(View.GONE);

隐藏

5.如何显示和隐藏密码文本？如何分别监听按钮的按下和弹开？->在demo中注释给出

DEMO

还是先来xml布局文件

[html]  view plain  copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#f2f2f2"  
6.     tools:context="com.example.administrator.icephonefhhxml.ForgottenPassword">  
7.   
8.     <View  
9.         android:layout_height="2dp"  
10.         android:layout_width="fill_parent"  
11.         android:background="#dddddd"  
12.         android:id="@+id/v0"  
13.         />  
14.   
15.     <View  
16.         android:layout_height="0.5px"  
17.         android:layout_width="fill_parent"  
18.         android:background="#ebebeb"  
19.         android:id="@+id/v1"  
20.         android:layout_below="@+id/v0"  
21.         android:layout_marginTop="12dp"  
22.         />  
23.   
24.     <LinearLayout  
25.         android:id="@+id/firstBlock"  
26.         android:layout_width="fill_parent"  
27.         android:layout_height="wrap_content"  
28.         android:layout_alignTop="@+id/v1"  
29.         android:background="#FFFFFF"  
30.         android:orientation="vertical" >  
31.   
32.         <LinearLayout  
33.             android:id="@+id/Blockline1"  
34.             android:layout_width="fill_parent"  
35.             android:layout_height="48dp"  
36.             android:layout_alignTop="@+id/v1"  
37.             android:background="#FFFFFF"  
38.             android:orientation="horizontal" >  
39.   
40.             <ImageView  
41.                 android:layout_width="wrap_content"  
42.                 android:layout_height="wrap_content"  
43.                 android:id="@+id/iv_phone"  
44.                 android:layout_marginLeft="21dp"  
45.                 android:layout_marginTop="12dp"  
46.                 android:src="@drawable/my_icon_mobile"/>  
47.   
48.             <EditText  
49.                 android:layout_width="150dp"  
50.                 android:layout_height="wrap_content"  
51.                 android:layout_marginLeft="17dp"  
52.                 android:layout_marginTop="15dp"  
53.                 android:id="@+id/edtTxt_phone_number"  
54.                 android:hint="请输入手机号"  
55.                 android:background="@null"  
56.                 android:phoneNumber="true"//设置文本类型是电话号码  
57.                 android:maxLength="11" //设置最大长度  
58.                 android:textColor="#404548"  
59.                 android:textCursorDrawable="@drawable/cursor_style"//设置光标风格（第一篇文章讲过这个方法）  
60.                 android:textSize="16sp"/>  
61.   
62.             <Button  
63.                 android:id="@+id/btn_getting_code"  
64.                 android:layout_width="100dp"  
65.                 android:layout_height="35dp"  
66.                 android:layout_marginLeft="13dp"  
67.                 android:layout_marginTop="12dp"  
68.                 android:background="@drawable/code_style"//设置按钮风格，这里可以用普通图片替代  
69.                 android:textColor="#404548"  
70.                 android:textSize="14sp"  
71.                 android:text="获取验证码" />  
72.   
73.         </LinearLayout>  
74.         <View  
75.             android:layout_height="0.5px"  
76.             android:layout_width="fill_parent"  
77.             android:background="#ebebeb"  
78.             android:id="@+id/v3"  
79.             android:layout_marginTop="17dp"  
80.             />  
81.   
82.   
83.         <LinearLayout  
84.             android:id="@+id/Blockline2"  
85.             android:layout_width="fill_parent"  
86.             android:layout_height="48dp"  
87.             android:layout_alignTop="@+id/v3"  
88.             android:background="#FFFFFF"  
89.             android:orientation="horizontal" >  
90.   
91.             <ImageView  
92.                 android:layout_width="wrap_content"  
93.                 android:layout_height="wrap_content"  
94.                 android:id="@+id/iv_code_lock"  
95.                 android:layout_marginLeft="19dp"  
96.                 android:layout_marginTop="12dp"  
97.                 android:src="@drawable/my_icon_lock"/>  
98.   
99.             <EditText  
100.                 android:layout_width="150dp"  
101.                 android:layout_height="wrap_content"  
102.                 android:layout_marginLeft="13dp"  
103.                 android:layout_marginTop="16.5dp"  
104.                 android:id="@+id/edtTxt_auth_code"  
105.                 android:hint="验证码"  
106.                 android:background="@null"  
107.                 android:maxLength="11"  
108.                 android:textColor="#404548"  
109.                 android:textCursorDrawable="@drawable/cursor_style"  
110.                 android:textSize="16sp"/>  
111.   
112.             <ImageButton  
113.                 android:layout_width="wrap_content"  
114.                 android:layout_height="wrap_content"  
115.                 android:id="@+id/imgbtn_delete"  
116.                 android:layout_marginLeft="80dp"  
117.                 android:layout_marginTop="16.5dp"  
118.                 android:src="@drawable/change_city_roundadd"  
119.                 android:visibility="gone"  
120.                 android:background="@null"/>  
121.         </LinearLayout>  
122.         <View  
123.             android:layout_height="0.5px"  
124.             android:layout_width="fill_parent"  
125.             android:background="#ebebeb"  
126.             android:id="@+id/v4"  
127.             android:layout_marginTop="17dp"  
128.             />  
129.   
130.         <LinearLayout  
131.             android:id="@+id/Blockline3"  
132.             android:layout_width="fill_parent"  
133.             android:layout_height="48dp"  
134.             android:layout_alignTop="@+id/v4"  
135.             android:background="#FFFFFF"  
136.             android:orientation="horizontal" >  
137.   
138.             <ImageView  
139.                 android:layout_width="wrap_content"  
140.                 android:layout_height="wrap_content"  
141.                 android:id="@+id/iv_code_resetting_lock"  
142.                 android:layout_marginLeft="19dp"  
143.                 android:layout_marginTop="12dp"  
144.                 android:src="@drawable/my_icon_lock"/>  
145.   
146.             <EditText  
147.                 android:layout_width="150dp"  
148.                 android:layout_height="wrap_content"  
149.                 android:layout_marginLeft="13dp"  
150.                 android:layout_marginTop="16.5dp"  
151.                 android:id="@+id/edtTxt_code_resetting"  
152.                 android:hint="重设登录密码"  
153.                 android:background="@null"  
154.                 android:maxLength="11"  
155.                 android:textColor="#adadad"  
156.                 android:textCursorDrawable="@drawable/cursor_style"  
157.                 android:textSize="16sp"  
158.                 android:password="true"/>  
159.   
160.             <ImageButton  
161.                 android:layout_width="wrap_content"  
162.                 android:layout_height="wrap_content"  
163.                 android:id="@+id/imgbtn_look"  
164.                 android:layout_marginTop="18dp"  
165.                 android:layout_marginLeft="78dp"  
166.                 android:src="@drawable/btn_look_style"  
167.                 android:background="@null"/>  
168.   
169.   
170.         </LinearLayout>  
171.   
172.         <View  
173.             android:layout_height="0.5px"  
174.             android:layout_width="fill_parent"  
175.             android:background="#ebebeb"  
176.             android:id="@+id/v5"  
177.             android:layout_marginTop="17dp"  
178.             />  
179.   
180.   
181.     </LinearLayout>  
182.   
183.     <Button  
184.         android:id="@+id/btn_complete"  
185.         android:layout_width="fill_parent"  
186.         android:layout_height="46dp"  
187.         android:layout_below="@+id/firstBlock"  
188.         android:layout_marginLeft="12dp"  
189.         android:background="@drawable/button_style"  
190.         android:layout_marginRight="12dp"  
191.         android:layout_marginTop="30dp"  
192.         android:text="完成"  
193.         android:textColor="#FFFFFF"  
194.         android:textSize="18sp"  
195.         android:focusable="true"/>  
196.   
197. </RelativeLayout>  

关键代码已经注释，如有问题可以给我留言，xml布局实现之后就是示例的样子

Activity代码

[java]  view plain  copy

1. package com.example.administrator.icephonefhhxml;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.text.Editable;  
6. import android.text.TextWatcher;  
7. import android.text.method.HideReturnsTransformationMethod;  
8. import android.view.MotionEvent;  
9. import android.view.View;  
10. import android.view.Window;  
11. import android.widget.Button;  
12. import android.widget.EditText;  
13. import android.widget.ImageButton;  
14. import android.widget.TextView;  
15.   
16. import static android.text.method.PasswordTransformationMethod.*;  
17.   
18.   
19. public class ForgottenPassword extends Activity {  
20.   
21.     TextView tittle;  
22.     Button back;  
23.     ImageButton imgBtn_show_code;  
24.     EditText edtTxt_password;  
25.     EditText edtTxt_code;  
26.     ImageButton imgBtn_delete_code;  
27.   
28.     @Override  
29.     protected void onCreate(Bundle savedInstanceState) {  
30.         super.onCreate(savedInstanceState);  
31.         requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);  
32.         setContentView(R.layout.activity_forgotten_password);  
33.         getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.tittle_bar);//设置标题栏，之前有讲过   
34.   
35.         tittle = (TextView)findViewById(R.id.tv_tittle);  
36.         tittle.setText("忘记密码");  
37.   
38.         back = (Button)findViewById(R.id.btn_back);  
39.         back.setOnClickListener(new View.OnClickListener() {  
40.             @Override  
41.             public void onClick(View v) {  
42.                 finish();  
43.             }  
44.         });  
45.         //各种获取监听  
46.         edtTxt_password = (EditText)findViewById(R.id.edtTxt_code_resetting) ;  
47.         imgBtn_show_code = (ImageButton)findViewById(R.id.imgbtn_look) ;  
48.         edtTxt_code =(EditText)findViewById(R.id.edtTxt_auth_code);  
49.         imgBtn_delete_code = (ImageButton)findViewById(R.id.imgbtn_delete);  
50.         ButtonListener b = new ButtonListener();  
51.         imgBtn_show_code.setOnTouchListener(b);  
52.   
53.         imgBtn_delete_code.setOnClickListener(new View.OnClickListener() {  
54.             //点击按钮删除文本框中的内容  
55.             @Override  
56.             public void onClick(View v) {  
57.                 edtTxt_code.setText("");  
58.   
59.             }  
60.         });  
61.   
62.         edtTxt_code.addTextChangedListener(new TextWatcher() {  
63. //监听文本框的输入  
64.             @Override  
65.             public void onTextChanged(CharSequence s, int start, int before, int count) {//在正要输入时  
66.                 // TODO Auto-generated method stub  
67.                 if(edtTxt_code.length() != 0)//如果文本框中有内容  
68.                 {  
69.                     imgBtn_delete_code.setVisibility(View.VISIBLE);//删除按钮显现出来  
70.                 }else  
71.                 {  
72.                     imgBtn_delete_code.setVisibility(View.GONE);//否则按钮隐藏  
73.                 }  
74.   
75.             }  
76.   
77.             @Override  
78.             public void beforeTextChanged(CharSequence s, int start, int count,//在输入前  
79.                                           int after) {  
80.                 // TODO Auto-generated method stub  
81.                 if(edtTxt_code.length() != 0)  
82.                 {  
83.                     imgBtn_delete_code.setVisibility(View.VISIBLE);  
84.                 }else  
85.                 {  
86.                     imgBtn_delete_code.setVisibility(View.GONE);  
87.                 }  
88.   
89.             }  
90.   
91.             @Override  
92.             public void afterTextChanged(Editable s) {//在输入后  
93.                 // TODO Auto-generated method stub  
94.                 if(edtTxt_code.length() != 0)  
95.                 {  
96.                     imgBtn_delete_code.setVisibility(View.VISIBLE);  
97.                 }else  
98.                 {  
99.                     imgBtn_delete_code.setVisibility(View.GONE);  
100.                 }  
101.   
102.             }  
103.         });  
104.   
105.   
106.   
107.     }  
108.   
109.     class ButtonListener implements View.OnTouchListener//用来控制显示按钮的监听（就是那个眼睛）  
110.     {  
111.   
112.         @Override  
113.         public boolean onTouch(View v, MotionEvent event)  
114.         {  
115.             if(v.getId() == R.id.imgbtn_look)//如果点击了这个按钮  
116.             {  
117.                 if(event.getAction() == MotionEvent.ACTION_UP)//按钮弹起  
118.                 {  
119.                     edtTxt_password.setTransformationMethod(getInstance());//隐藏  
120.                     edtTxt_password.setSelection(edtTxt_password.length());//这句是设置光标位置到最后  
121.   
122.                 }  
123.                 if(event.getAction() == MotionEvent.ACTION_DOWN)//按钮按下  
124.                 {  
125.                     edtTxt_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());//显示隐藏的内容  
126.                     edtTxt_password.setSelection(edtTxt_password.length());//设置光标位置到最后  
127.                 }  
128.             }  
129.             return false;  
130.         }  
131.   
132.   
133.   
134.     }  
135.   
136.   
137. }  

下面分析一下代码：先在验证码的文本框后设置一个用来删除这个文本框的内容的按钮，我们将这个按钮先隐藏，然后在activity中获得他们，给文本框设置监听：无论是正在编辑、编辑之前还是编辑之后都检测文本框内容是否为空，如果是，则隐藏按钮，否则显示按钮，然后给按钮设置监听，当点击时设置文本框内容为空，这就完成了第一个功能，第二个功能就是在按钮按下时显示密码，这个部分主要就是学习onTouchListener方法来实现对按钮点击状况的监听，监听器获得一个event通过判断他的action来确定是否按下/弹起，然后进行相应的操作（注意要保持光标在最后）

大概内容就是这样，不过由于标题栏的原因本文中的代码完全复制粘贴过去并不能运行，需要和之前设置标题栏的文章结合一下~

感想

对于本文来说，我感觉最有用的一是如何对编辑框监听和对按钮的状态监听，以后会常用！

最后还是每日一句，这也是我最近复习时的感触，每个人的时间和能力都是有限的，我们只要足够努力，然后学会生活就好了！

每日一句：

也许现在我们做不了最好的自己，但是我们至少要做最努力的自己！

也许我们现在没法