仿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来确定是否按下/弹起,然后进行相应的操作(注意要保持光标在最后)

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


感想

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

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

每日一句:
也许现在我们做不了最好的自己,但是我们至少要做最努力的自己!
也许我们现在没法


你可能感兴趣的:(文本编辑,QQ界面,按钮状态监听,监听文本框)