仿淘宝登录

注册博客园到申请博客还没有多长时间， 有一天看着别人的博客，突然自己也想整理一下博客，顺便理顺一下自己的思路。第一篇博客

最近在做电商项目，登录的那块是模仿淘宝做的，先写一下布局文件吧

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_marginTop="8dp"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:text="用户名:"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_weight="1" >

            <EditText
                android:id="@+id/et_user"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:layout_marginLeft="25dp"
                android:hint="手机号/会员/邮箱"
                android:layout_weight="1" />

            
            <ImageView
                android:visibility="gone"
                android:id="@+id/image1"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="bottom"
                android:src="@drawable/login_pager_delete_img" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_marginTop="15dp"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:text=" 密   码:"
            android:textSize="20sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp" >

            <EditText
                android:id="@+id/et_mima"
                android:layout_width="0dp"
                android:layout_height="60dp"
                android:layout_marginLeft="25dp"
                android:layout_weight="1"
                android:hint="请输入密码"
                android:password="true" />

            <ImageView
                android:visibility="gone"
                android:id="@+id/image2"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="bottom"
                android:src="@drawable/login_pager_delete_img" />

            <CheckBox
                android:id="@+id/visible_password"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/login_pager_visible_img"
                android:button="@null"
                android:layout_gravity="bottom"
                android:visibility="gone" />
        </LinearLayout>
    </LinearLayout>


    <Button
        android:id="@+id/login"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="登录"
        android:textColor="#fff"
        android:textSize="22sp" />

布局文件写好之后，就开始编写代码了

//我把这些控件都写成全局的了，所以在这就不写了

        image1 = (ImageView) view.findViewById(R.id.image1);//清空用户编辑框中的文字
        image2 = (ImageView) view.findViewById(R.id.image2);//清空密码编辑框中的文字
        visible = (CheckBox) view.findViewById(R.id.visible_password);//显示和隐藏密码的控件，用复选框方便判断是否为选中状态
        et_mima = (EditText) view.findViewById(R.id.et_mima);//编辑密码的控件
        et_user = (EditText) view.findViewById(R.id.et_user);//编辑用户名的控件
        tv_login = (Button) view.findViewById(R.id.login);//登录按钮的控件

//代码处理部分 给编辑框设置文本改变监听的事件

et_user.addTextChangedListener(new TextWatcher() {

            @Override
            public void onTextChanged(CharSequence s, int start, int before,
                    int count) {

            }

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count,
                    int after) {

            }

//文本内容改变之后调用

            @Override
            public void afterTextChanged(Editable s) {
                if (et_user.getText().toString().equals("")//判断是否为空
                        || et_mima.getText().toString().equals("")) {
                    tv_login.setEnabled(false);
                } else {
                    tv_login.setEnabled(true);
                    tv_login.setBackgroundResource(R.drawable.btn_normal);//可以自己设置图片
                }
                if (et_user.getText().toString().equals("")) {
                    image1.setVisibility(View.GONE);
                } else {
                    image1.setVisibility(View.VISIBLE);
                }
            }
        });
        et_mima.addTextChangedListener(new TextWatcher() {

            @Override
            public void onTextChanged(CharSequence s, int start, int before,
                    int count) {

            }

            @Override
            public void beforeTextChanged(CharSequence s, int start, int count,
                    int after) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (et_user.getText().toString().equals("")
                        || et_mima.getText().toString().equals("")) {
                    tv_login.setEnabled(false);
                } else {
                    tv_login.setEnabled(true);
                    tv_login.setBackgroundResource(R.drawable.btn_normal);

                }
                if (et_mima.getText().toString().equals("")) {
                    image2.setVisibility(View.GONE);
                    visible.setVisibility(View.GONE);
                } else {
                    image2.setVisibility(View.VISIBLE);
                    visible.setVisibility(View.VISIBLE);
                }
            }
        });

//清空文本内容的监听事件
        image1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                et_user.setText("");
            }
        });
        image2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                et_mima.setText("");
            }
        });

//显示和隐藏密码的监听事件

visible.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView,
                    boolean isChecked) {
                if (isChecked) {
                    // 显示文本
                    et_mima.setTransformationMethod(HideReturnsTransformationMethod
                            .getInstance());
                    visible.setBackgroundResource(R.drawable.login_pager_invisible_img);//改变图片
                } else {
                    et_mima.setTransformationMethod(PasswordTransformationMethod
                            .getInstance());
                    visible.setBackgroundResource(R.drawable.login_pager_visible_img);
                }
                // 切换后光标置于末尾
                CharSequence charsequenence = et_mima.getText();
                if (charsequenence instanceof Spannable) {
                    Spannable span = (Spannable) charsequenence;
                    Selection.setSelection(span, charsequenence.length());
                }
            }
        });

最后看一下效果