仿淘寶登陸

註冊博客園到申請博客尚未多長時間， 有一天看着別人的博客，忽然本身也想整理一下博客，順便理順一下本身的思路。第一篇博客

最近在作電商項目，登陸的那塊是模仿淘寶作的，先寫一下佈局文件吧

 

<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());
                }
            }
        });

最後看一下效果