Android之QQ登錄界面，android登錄界面

Android之QQ登錄界面，android登錄界面

首先過程中碰到的幾個問題：

1、對 EditText 進行自定義背景

2、運行時自動 EditText 自動獲得焦點

3、在獲得焦點時即清空 hint ，而不是輸入後清空

4、清空按鈕的出現時機（在得到焦點並且有輸入內容時）

　　.........

---  這些問題都有一一解決 ---

 

以下是代碼：

布局 fragment_main（問題2）

1 <!-- android:focusable="true" 2 android:focusableInTouchMode="true" 3 把EditText默認的行為截斷了！ --> 4 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 5 xmlns:tools="http://schemas.android.com/tools" 6 android:layout_width="match_parent" 7 android:layout_height="match_parent" 8 android:background="#ECEDF1" 9 android:focusable="true" 10 android:focusableInTouchMode="true" 11 tools:context="com.dragon.android.qqlogin.MainActivity$PlaceholderFragment" > 12 13 <ImageView 14 android:id="@+id/imageView1" 15 android:layout_width="70dp" 16 android:layout_height="70dp" 17 android:layout_centerHorizontal="true" 18 android:layout_marginBottom="5dp" 19 android:layout_marginTop="40dp" 20 android:src="@drawable/a" /> 21 22 <EditText 23 android:id="@+id/editText1" 24 android:layout_width="match_parent" 25 android:layout_height="wrap_content" 26 android:layout_below="@id/imageView1" 27 android:ems="10" 28 android:background="@drawable/bg_edittext" 29 android:inputType="textPersonName" 30 android:gravity="center" 31 android:textColor="#6A6A6C" 32 android:hint="@string/inaccount" 33 android:textColorHint="#ECEDDD"> 34 </EditText> 35 36 <EditText 37 android:id="@+id/editText2" 38 android:layout_width="match_parent" 39 android:layout_height="wrap_content" 40 android:layout_below="@id/editText1" 41 android:ems="10" 42 android:background="@drawable/bg_edittext" 43 android:inputType="textPassword" 44 android:gravity="center" 45 android:textColor="#6A6A6C" 46 android:hint="@string/inpwd" 47 android:textColorHint="#ECEDDD" > 48 </EditText> 49 50 <Button 51 android:id="@+id/button1" 52 android:layout_width="match_parent" 53 android:layout_height="40dp" 54 android:layout_below="@id/editText2" 55 android:layout_marginLeft="20dp" 56 android:layout_marginRight="20dp" 57 android:layout_marginTop="10dp" 58 android:background="@drawable/bg_button" 59 android:text="@string/button" 60 android:gravity="center" 61 android:textColor="#F9FAFB" /> 62 63 <LinearLayout 64 android:layout_width="match_parent" 65 android:layout_height="wrap_content" 66 android:layout_alignParentBottom="true" 67 android:padding="10dp" > 68 69 <TextView 70 android:id="@+id/textView2" 71 android:layout_width="wrap_content" 72 android:layout_height="wrap_content" 73 android:gravity="center" 74 android:text="@string/faillogin" 75 android:textColor="#0EB1EF" /> 76 77 <TextView 78 android:id="@+id/textView3" 79 android:layout_width="match_parent" 80 android:layout_height="wrap_content" 81 android:gravity="right" 82 android:text="@string/regist" 83 android:textColor="#0EB1EF" /> 84 </LinearLayout> 85 86 <Button 87 android:id="@+id/button2" 88 android:layout_width="16dp" 89 android:layout_height="16dp" 90 android:layout_alignTop="@id/editText1" 91 android:layout_marginTop="15dp" 92 android:layout_alignParentRight="true" 93 android:layout_marginRight="10dp" 94 android:background="@drawable/clear" 95 android:visibility="invisible" /> 96 97 <Button 98 android:id="@+id/button3" 99 android:layout_width="16dp" 100 android:layout_height="16dp" 101 android:layout_alignTop="@id/editText2" 102 android:layout_marginTop="15dp" 103 android:layout_alignLeft="@+id/button2" 104 android:background="@drawable/clear" 105 android:visibility="invisible" /> 106 107 </RelativeLayout> fragment_main

Button 和 EditText 的背景（問題1）

1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3 4 <stroke android:width="1px" android:color="#00ACED" /> 5 6 <solid android:color="#00ACED" /> 7 8 <corners android:radius="10dp" /> 9 10 </shape> bg_button 1 <?xml version="1.0" encoding="utf-8"?> 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" > 3 4 <stroke android:width="1px" android:color="#ECEDF1" /> 5 6 <solid android:color="#F9FAFB" /> 7 8 <corners android:radius="10dp" /> 9 10 <padding 11 android:top="10dp" 12 android:bottom="10dp"/> 13 14 </shape> bg_edittext

strings

1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 4 <string name="app_name">qqloginnew</string> 5 <string name="action_settings">Settings</string> 6 <string name="button">登錄</string> 7 <string name="faillogin">無法登錄?</string> 8 <string name="regist">新用戶注冊</string> 9 <string name="inaccount">QQ號/手機號/郵箱</string> 10 <string name="inpwd">密碼</string> 11 <string name="sucess">登錄成功</string> 12 13 </resources> strings

MainActivity （問題3、4.....）

  1 package com.dragon.android.qqloginnew;
  2 
  3 import android.app.Activity;
  4 import android.os.Bundle;
  5 import android.text.Editable;
  6 import android.text.TextWatcher;
  7 import android.view.View;
  8 import android.view.View.OnClickListener;
  9 import android.view.View.OnFocusChangeListener;
 10 import android.widget.Button;
 11 import android.widget.EditText;
 12 
 13 public class MainActivity extends Activity {
 14     private EditText editText1;
 15     private EditText editText2;
 16     // private Button button;
 17     private Button clearButton1;
 18     private Button clearButton2;
 19 
 20     // 得到strings中的屬性
 21     // private String string2 = getResources().getString(R.string.inaccount);
 22 
 23     @Override
 24     protected void onCreate(Bundle savedInstanceState) {
 25         super.onCreate(savedInstanceState);
 26         setContentView(R.layout.fragment_main);
 27 
 28         editText1 = (EditText) findViewById(R.id.editText1);
 29         editText2 = (EditText) findViewById(R.id.editText2);
 30 
 31         // button = (Button) findViewById(R.id.button1);
 32         clearButton1 = (Button) findViewById(R.id.button2);
 33         clearButton2 = (Button) findViewById(R.id.button3);
 34 
 35         // 對EditText進行焦點變更監聽
 36         editText1.setOnFocusChangeListener(new EditTextListener(clearButton1));
 37         editText2.setOnFocusChangeListener(new EditTextListener(clearButton2));
 38 
 39         // 對清空按鈕進行點擊監聽
 40         clearButton1.setOnClickListener(new ClearButtonListener());
 41         clearButton2.setOnClickListener(new ClearButtonListener());
 42 
 43         // 對EditText進行編輯監聽
 44         editText1.addTextChangedListener(new MyEditTextWatcher(editText1));
 45         editText2.addTextChangedListener(new MyEditTextWatcher(editText2));
 46     }
 47 
 48     /**
 49      * 對EditText的內容進行實時監控
 50      * 
 51      * @author Auser
 52      * 
 53      */
 54     class MyEditTextWatcher implements TextWatcher {
 55         private CharSequence temp;
 56         private EditText editText;
 57 
 58         public MyEditTextWatcher(EditText editText) {
 59             this.editText = editText;
 60         }
 61 
 62         @Override
 63         // int start開始的位置, int count被改變的舊內容數, int after改變後的內容數量
 64         public void beforeTextChanged(CharSequence s, int start, int count,
 65                 int after) {
 66             // 這裡的s表示改變之前的內容，通常start和count組合，可以在s中讀取本次改變字段中被改變的內容。而after表示改變後新的內容的數量。
 67         }
 68 
 69         @Override
 70         // int start開始的位置, int before改變前的內容數量, int count新增量
 71         public void onTextChanged(CharSequence s, int start, int before,
 72                 int count) {
 73             // 這裡的s表示改變之後的內容，通常start和count組合，可以在s中讀取本次改變字段中新的內容。而before表示被改變的內容的數量。
 74             temp = s;
 75         }
 76 
 77         @Override
 78         // 表示最終內容
 79         public void afterTextChanged(Editable s) {
 80             if (temp.length() > 0) {
 81                 // 設置清空按鈕為可見
 82                 if (editText == editText1) {
 83                     clearButton1.setVisibility(View.VISIBLE);
 84                 } else if (editText == editText2) {
 85                     clearButton2.setVisibility(View.VISIBLE);
 86                 }
 87             } else {
 88                 // 設置清空按鈕不可見
 89                 if (editText == editText1) {
 90                     clearButton1.setVisibility(View.INVISIBLE);
 91                 } else if (editText == editText2) {
 92                     clearButton2.setVisibility(View.INVISIBLE);
 93                 }
 94             }
 95         }
 96     }
 97 
 98     /**
 99      * 清空按鈕點擊事件
100      * 
101      * @author
102      * 
103      */
104     class ClearButtonListener implements OnClickListener {
105 
106         @Override
107         public void onClick(View view) {
108             if (view == clearButton1) {
109                 editText1.setText("");
110             } else if (view == clearButton2) {
111                 editText2.setText("");
112             }
113         }
114     }
115 
116     /**
117      * 焦點變更事件
118      * 
119      * @author Auser
120      * 
121      */
122     class EditTextListener implements OnFocusChangeListener {
123         private Button clear;
124 
125         public EditTextListener(Button clear) {
126             this.clear = clear;
127         }
128 
129         @Override
130         public void onFocusChange(View v, boolean hasFocus) {
131             EditText textView = (EditText) v;
132             String hint;
133             if (hasFocus) {
134                 // 當獲取焦點時如果內容不為空則清空按鈕可見
135                 if (!textView.getText().toString().equals("")) {
136                     clear.setVisibility(View.VISIBLE);
137                 }
138                 // if (textView == editText2) {
139                 // // 設置輸入格式為不可見的密碼格式
140                 // textView.setInputType(InputType.TYPE_CLASS_TEXT
141                 // | InputType.TYPE_TEXT_VARIATION_PASSWORD);
142                 // }
143                 hint = textView.getHint().toString();
144                 // 給TextView添加額外的數據
145                 textView.setTag(hint);
146                 textView.setHint("");
147             } else {
148                 // 當失去焦點時清空按鈕不可見
149                 clear.setVisibility(View.INVISIBLE);
150                 // if (textView == editText2) {
151                 // // 設置輸入格式為可見的密碼格式
152                 // textView.setInputType(InputType.TYPE_CLASS_TEXT
153                 // | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
154                 // }
155                 // 取出之前添加的額外數據
156                 hint = textView.getTag().toString();
157                 textView.setHint(hint);
158             }
159         }
160     }
161 }

 

 

圖片素材

              a.png        clear.png

 

-------------------------一個初步的登錄界面------------------------