仿QQ界面之搜索框
2015-06-22 12:18
405 查看
概要
好久都没更了...大学考试你懂得“一天一本书,一周一学期”。。。今天上午刚考完试,我们的仿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来确定是否按下/弹起,然后进行相应的操作(注意要保持光标在最后)
大概内容就是这样,不过由于标题栏的原因本文中的代码完全复制粘贴过去并不能运行,需要和之前设置标题栏的文章结合一下~
感想
对于本文来说,我感觉最有用的一是如何对编辑框监听和对按钮的状态监听,以后会常用!最后还是每日一句,这也是我最近复习时的感触,每个人的时间和能力都是有限的,我们只要足够努力,然后学会生活就好了!
每日一句:
也许现在我们做不了最好的自己,但是我们至少要做最努力的自己!
也许我们现在没法
相关文章推荐
- C语言学习笔记(六)——其他编程知识
- Clean Code 读书笔记七
- List of RGBD datasets
- 单例设计模式
- 逻辑运算符和位运算符
- linux使用一个刚编译驱动方法
- 毕业面试笔记1
- 【温故知新】c#事件event
- LeetCode "Basic Calculator II"
- android中使用DisplayMetrics获取屏幕参数
- C语言学习笔记(五)——指针【C语言的灵魂】
- 我所理解的全栈工程师
- CF 9B Running Student
- C 循环队列实现
- java学习之旅05--Helloworld深化,文本编辑器的使用,注释
- [原创]数据库视图介绍和使用
- Lucene学习笔记
- java带001的数值格式化
- 一个简单的波形包络提取算法
- 二分查找:在有序数组中搜索大于等于x的数的最小下标