仿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布局文件
<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:background="#f2f2f2"
tools:context="com.example.administrator.icephonefhhxml.ForgottenPassword">
<View
android:layout_height="2dp"
android:layout_width="fill_parent"
android:background="#dddddd"
android:id="@+id/v0"
/>
<View
android:layout_height="0.5px"
android:layout_width="fill_parent"
android:background="#ebebeb"
android:id="@+id/v1"
android:layout_below="@+id/v0"
android:layout_marginTop="12dp"
/>
<LinearLayout
android:id="@+id/firstBlock"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/v1"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/Blockline1"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_alignTop="@+id/v1"
android:background="#FFFFFF"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv_phone"
android:layout_marginLeft="21dp"
android:layout_marginTop="12dp"
android:src="@drawable/my_icon_mobile"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="17dp"
android:layout_marginTop="15dp"
android:id="@+id/edtTxt_phone_number"
android:hint="请输入手机号"
android:background="@null"
android:phoneNumber="true"//设置文本类型是电话号码
android:maxLength="11" //设置最大长度
android:textColor="#404548"
android:textCursorDrawable="@drawable/cursor_style"//设置光标风格（第一篇文章讲过这个方法）
android:textSize="16sp"/>
<Button
android:id="@+id/btn_getting_code"
android:layout_width="100dp"
android:layout_height="35dp"
android:layout_marginLeft="13dp"
android:layout_marginTop="12dp"
android:background="@drawable/code_style"//设置按钮风格，这里可以用普通图片替代
android:textColor="#404548"
android:textSize="14sp"
android:text="获取验证码" />
</LinearLayout>
<View
android:layout_height="0.5px"
android:layout_width="fill_parent"
android:background="#ebebeb"
android:id="@+id/v3"
android:layout_marginTop="17dp"
/>
<LinearLayout
android:id="@+id/Blockline2"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_alignTop="@+id/v3"
android:background="#FFFFFF"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv_code_lock"
android:layout_marginLeft="19dp"
android:layout_marginTop="12dp"
android:src="@drawable/my_icon_lock"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="13dp"
android:layout_marginTop="16.5dp"
android:id="@+id/edtTxt_auth_code"
android:hint="验证码"
android:background="@null"
android:maxLength="11"
android:textColor="#404548"
android:textCursorDrawable="@drawable/cursor_style"
android:textSize="16sp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imgbtn_delete"
android:layout_marginLeft="80dp"
android:layout_marginTop="16.5dp"
android:src="@drawable/change_city_roundadd"
android:visibility="gone"
android:background="@null"/>
</LinearLayout>
<View
android:layout_height="0.5px"
android:layout_width="fill_parent"
android:background="#ebebeb"
android:id="@+id/v4"
android:layout_marginTop="17dp"
/>
<LinearLayout
android:id="@+id/Blockline3"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_alignTop="@+id/v4"
android:background="#FFFFFF"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv_code_resetting_lock"
android:layout_marginLeft="19dp"
android:layout_marginTop="12dp"
android:src="@drawable/my_icon_lock"/>
<EditText
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="13dp"
android:layout_marginTop="16.5dp"
android:id="@+id/edtTxt_code_resetting"
android:hint="重设登录密码"
android:background="@null"
android:maxLength="11"
android:textColor="#adadad"
android:textCursorDrawable="@drawable/cursor_style"
android:textSize="16sp"
android:password="true"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imgbtn_look"
android:layout_marginTop="18dp"
android:layout_marginLeft="78dp"
android:src="@drawable/btn_look_style"
android:background="@null"/>
</LinearLayout>
<View
android:layout_height="0.5px"
android:layout_width="fill_parent"
android:background="#ebebeb"
android:id="@+id/v5"
android:layout_marginTop="17dp"
/>
</LinearLayout>
<Button
android:id="@+id/btn_complete"
android:layout_width="fill_parent"
android:layout_height="46dp"
android:layout_below="@+id/firstBlock"
android:layout_marginLeft="12dp"
android:background="@drawable/button_style"
android:layout_marginRight="12dp"
android:layout_marginTop="30dp"
android:text="完成"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:focusable="true"/>
</RelativeLayout>
关键代码已经注释，如有问题可以给我留言，xml布局实现之后就是示例的样子
Activity代码
package com.example.administrator.icephonefhhxml;
import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.text.method.HideReturnsTransformationMethod;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;
import static android.text.method.PasswordTransformationMethod.*;
public class ForgottenPassword extends Activity {
TextView tittle;
Button back;
ImageButton imgBtn_show_code;
EditText edtTxt_password;
EditText edtTxt_code;
ImageButton imgBtn_delete_code;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.activity_forgotten_password);
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.tittle_bar);//设置标题栏，之前有讲过
tittle = (TextView)findViewById(R.id.tv_tittle);
tittle.setText("忘记密码");
back = (Button)findViewById(R.id.btn_back);
back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//各种获取监听
edtTxt_password = (EditText)findViewById(R.id.edtTxt_code_resetting) ;
imgBtn_show_code = (ImageButton)findViewById(R.id.imgbtn_look) ;
edtTxt_code =(EditText)findViewById(R.id.edtTxt_auth_code);
imgBtn_delete_code = (ImageButton)findViewById(R.id.imgbtn_delete);
ButtonListener b = new ButtonListener();
imgBtn_show_code.setOnTouchListener(b);
imgBtn_delete_code.setOnClickListener(new View.OnClickListener() {
//点击按钮删除文本框中的内容
@Override
public void onClick(View v) {
edtTxt_code.setText("");
}
});
edtTxt_code.addTextChangedListener(new TextWatcher() {
//监听文本框的输入
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {//在正要输入时
// TODO Auto-generated method stub
if(edtTxt_code.length() != 0)//如果文本框中有内容
{
imgBtn_delete_code.setVisibility(View.VISIBLE);//删除按钮显现出来
}else
{
imgBtn_delete_code.setVisibility(View.GONE);//否则按钮隐藏
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,//在输入前
int after) {
// TODO Auto-generated method stub
if(edtTxt_code.length() != 0)
{
imgBtn_delete_code.setVisibility(View.VISIBLE);
}else
{
imgBtn_delete_code.setVisibility(View.GONE);
}
}
@Override
public void afterTextChanged(Editable s) {//在输入后
// TODO Auto-generated method stub
if(edtTxt_code.length() != 0)
{
imgBtn_delete_code.setVisibility(View.VISIBLE);
}else
{
imgBtn_delete_code.setVisibility(View.GONE);
}
}
});
}
class ButtonListener implements View.OnTouchListener//用来控制显示按钮的监听（就是那个眼睛）
{
@Override
public boolean onTouch(View v, MotionEvent event)
{
if(v.getId() == R.id.imgbtn_look)//如果点击了这个按钮
{
if(event.getAction() == MotionEvent.ACTION_UP)//按钮弹起
{
edtTxt_password.setTransformationMethod(getInstance());//隐藏
edtTxt_password.setSelection(edtTxt_password.length());//这句是设置光标位置到最后
}
if(event.getAction() == MotionEvent.ACTION_DOWN)//按钮按下
{
edtTxt_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());//显示隐藏的内容
edtTxt_password.setSelection(edtTxt_password.length());//设置光标位置到最后
}
}
return false;
}
}
}
下面分析一下代码：先在验证码的文本框后设置一个用来删除这个文本框的内容的按钮，我们将这个按钮先隐藏，然后在activity中获得他们，给文本框设置监听：无论是正在编辑、编辑之前还是编辑之后都检测文本框内容是否为空，如果是，则隐藏按钮，否则显示按钮，然后给按钮设置监听，当点击时设置文本框内容为空，这就完成了第一个功能，第二个功能就是在按钮按下时显示密码，这个部分主要就是学习onTouchListener方法来实现对按钮点击状况的监听，监听器获得一个event通过判断他的action来确定是否按下/弹起，然后进行相应的操作（注意要保持光标在最后）
大概内容就是这样，不过由于标题栏的原因本文中的代码完全复制粘贴过去并不能运行，需要和之前设置标题栏的文章结合一下~
感想
对于本文来说，我感觉最有用的一是如何对编辑框监听和对按钮的状态监听，以后会常用！
最后还是每日一句，这也是我最近复习时的感触，每个人的时间和能力都是有限的，我们只要足够努力，然后学会生活就好了！
每日一句：
也许现在我们做不了最好的自己，但是我们至少要做最努力的自己！
也许我们现在没法