功能強大的登入介面Android實現代碼_Android

前言

     一個好的應用需要一個有良好的使用者體驗的登入介面，現如今，許多應用的的登入介面都有著使用者名稱，密碼一鍵刪除，使用者名稱，密碼為空白提示，以及需要輸入驗證碼的功能。看著csdn上的大牛們的文章，心裡想著也寫一個登入介面學習學習，許多東西都是參考別的文章，綜合起來的。廢話少說，接下來看看是如何?的。 

ps:由於懶得摳圖。所以程式的表徵圖很難看。
程式運行時的圖示：

首先是布局檔案沒有什麼難度。

<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:paddingLeft="@dimen/activity_horizontal_margin"  android:paddingRight="@dimen/activity_horizontal_margin"  android:paddingTop="@dimen/activity_vertical_margin"  android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">   <ImageView  android:id="@+id/tv_login"  android:src="@drawable/ic_launcher"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_alignParentTop="true"  android:gravity="center"  />  <com.example.administrator.texttest.DeletableEditText  android:id="@+id/tv_user"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:textSize="30dp"  android:layout_below="@id/tv_login"  android:drawableLeft="@drawable/ic_launcher"  android:drawableRight="@drawable/ic_launcher"  android:hint="請輸入賬戶"  android:ems="10"/>  <com.example.administrator.texttest.DeletableEditText  android:id="@+id/tv_psd"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:textSize="30dp"  android:layout_below="@id/tv_user"  android:drawableLeft="@drawable/ic_launcher"  android:drawableRight="@drawable/ic_launcher"  android:hint="請輸入密碼"  android:inputType="textPassword"  android:ems="10"/>  <LinearLayout  android:id="@+id/lyYanzhengma"  android:orientation="horizontal"  android:layout_width="match_parent"  android:layout_height="wrap_content"   android:layout_below="@id/tv_psd">  <LinearLayout   android:id="@+id/lyVerify"   android:orientation="horizontal"   android:layout_width="wrap_content"   android:layout_height="wrap_content">   <TextView   android:id="@+id/tvHideA"   android:layout_width="70dp"   android:layout_height="70dp"   android:visibility="gone"   android:gravity="center"   android:textSize="30dp"   />   <TextView   android:id="@+id/tvHideB"   android:layout_width="70dp"   android:layout_height="70dp"   android:visibility="gone"   android:gravity="center"   android:textSize="30dp"   />   <TextView   android:id="@+id/tvHideC"   android:layout_width="70dp"   android:layout_height="70dp"   android:visibility="gone"   android:gravity="center"   android:textSize="30dp"   />   <TextView   android:id="@+id/tvHideD"   android:layout_width="70dp"   android:layout_height="70dp"   android:visibility="gone"   android:gravity="center"   android:textSize="30dp"   />  </LinearLayout>  <LinearLayout   android:id="@+id/IV_num"   android:orientation="horizontal"   android:layout_width="wrap_content"   android:layout_height="wrap_content">   <ImageView   android:layout_height="70dp"   android:layout_width="50dp"   android:id="@+id/ivNumA"/>   <ImageView   android:layout_height="70dp"   android:layout_width="50dp"   android:id="@+id/ivNumB"/>   <ImageView   android:layout_height="70dp"   android:layout_width="50dp"   android:id="@+id/ivNumC"/>   <ImageView   android:layout_height="70dp"   android:layout_width="50dp"   android:id="@+id/ivNumD"/>  </LinearLayout>   <LinearLayout   android:orientation="horizontal"   android:layout_height="wrap_content"   android:layout_width="match_parent">   <EditText   android:layout_height="wrap_content"   android:layout_width="120dp"   android:textSize="30dp"   android:id="@+id/etCheck"   android:maxLength="4"   android:singleLine="true"   android:hint="驗證碼"/>   <TextView   android:layout_height="wrap_content"   android:layout_width="wrap_content"   android:text="結果"   android:id="@+id/tvCheck"   android:textSize="30dp"   android:visibility="gone"/>  </LinearLayout>     </LinearLayout>  <Button  android:id="@+id/bt_login"  android:text="登 錄"  android:textSize="30dp"  android:layout_below="@id/lyYanzhengma"  android:layout_width="match_parent"  android:layout_height="wrap_content" />  </RelativeLayout> 

然後是載入一些布局檔案，和一些控制項的初始化

//登入按鈕  private Button btLogin;  //賬戶  private DeletableEditText userEditText;  //密碼  private DeletableEditText psdEditText;    //驗證碼的數字文本  private TextView tvHideA,tvHideB,tvHideC,tvHideD;   //驗證碼的圖片文本  private ImageView ivNumA,ivNumB,ivNumC,ivNumD;  //驗證碼輸入文本  private EditText etCheck;  //驗證碼的檢測顯示文本  private TextView tvCheck;   //儲存每個驗證碼的數字  private String numStrTmp = "";  //儲存整個驗證碼的數字  private String numStr = "";   //儲存驗證碼的數組  private int[] numArray = new int[4];  //儲存顏色的數組  private int[] colorArray = new int[6];   @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  setupViews();   }   private void setupViews() {  btLogin = (Button) findViewById(R.id.bt_login);  btLogin.setOnClickListener(new OnClickListenerImpl());  userEditText = (DeletableEditText) findViewById(R.id.tv_user);  psdEditText = (DeletableEditText) findViewById(R.id.tv_psd);    tvHideA = (TextView) findViewById(R.id.tvHideA);  tvHideB = (TextView) findViewById(R.id.tvHideB);  tvHideC = (TextView) findViewById(R.id.tvHideC);  tvHideD = (TextView) findViewById(R.id.tvHideD);   ivNumA = (ImageView) findViewById(R.id.ivNumA);  ivNumB = (ImageView) findViewById(R.id.ivNumB);  ivNumC = (ImageView) findViewById(R.id.ivNumC);  ivNumD = (ImageView) findViewById(R.id.ivNumD);   ivNumA.setOnClickListener(new OnClickListenerImpl());  ivNumB.setOnClickListener(new OnClickListenerImpl());  ivNumC.setOnClickListener(new OnClickListenerImpl());  ivNumD.setOnClickListener(new OnClickListenerImpl());   tvCheck = (TextView) findViewById(R.id.tvCheck);  etCheck = (EditText) findViewById(R.id.etCheck);   setNum(); 

自訂EditText的實現過程：

思路：設定兩個EidtText,在這個EditText中各設定表徵圖。左邊表徵圖為賬戶和密碼的表徵圖提示，右邊表徵圖為一鍵刪除 。因為EditText中的表徵圖沒有onClick事件，為了實現點擊一鍵刪除效果所以要使用OnTouchEvent回調方法，監聽點擊事件來判斷實現一鍵刪除。當賬戶和密碼沒有字元時，右邊的一鍵刪除表徵圖設定隱藏，當有字元時，設定表徵圖顯示。當點擊到右邊表徵圖範圍時，刪除所在行的字元。從而實現一鍵刪除。 此外，當賬戶和密碼為空白而要登入時。這兩行抖動提示。
廢話不多說，直接上代碼注釋很清楚。

package com.example.administrator.texttest;  import android.content.Context; import android.graphics.drawable.Drawable; import android.text.Editable; import android.text.TextWatcher; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.animation.Animation; import android.view.animation.CycleInterpolator; import android.view.animation.TranslateAnimation; import android.widget.EditText;  /**  * Created by Administrator on 2015-10-10.  */ public class DeletableEditText extends EditText {   private Drawable mRightDrawable;  private boolean isHasFocus;     public DeletableEditText(Context context) {  this(context, null);  }   public DeletableEditText(Context context, AttributeSet attrs) {  this(context, attrs, android.R.attr.editTextStyle);  }   public DeletableEditText(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  setupViews();  }   private void setupViews() {   //取的view的上下左右邊距  Drawable[] drawables = this.getCompoundDrawables();   // 取得right位置的Drawable  // 即我們在布局檔案中設定的android:drawableRight  mRightDrawable = drawables[2];   // 設定焦點變化的監聽  this.setOnFocusChangeListener(new FocusChangeListenerImpl());  // 設定EditText文字變化的監聽  this.addTextChangedListener(new TextWatcherImpl());  // 初始化時讓右邊clean表徵圖不可見  setClearDrawableVisible(false);     }  @Override  public boolean onTouchEvent(MotionEvent event) {  switch (event.getAction()) {   //當點擊鬆開時判斷點擊的位置。這裡只進行了X軸方向的判斷。   case MotionEvent.ACTION_UP:   //判斷是否點擊到了右邊的表徵圖地區   boolean isClean = (event.getX() > (getWidth() - getTotalPaddingRight()))    && (event.getX() < (getWidth() - getPaddingRight()));   if (isClean) {    //清除字元    setText("");   }   break;    default:   break;  }  return super.onTouchEvent(event);  }   private class FocusChangeListenerImpl implements OnFocusChangeListener {  @Override  public void onFocusChange(View v, boolean hasFocus) {   isHasFocus = hasFocus;   if (isHasFocus) {   boolean isVisible = getText().toString().length() >= 1;   setClearDrawableVisible(isVisible);   } else {   setClearDrawableVisible(false);   }  }   }   // 當輸入結束後判斷是否顯示右邊clean的表徵圖  private class TextWatcherImpl implements TextWatcher {  @Override  public void afterTextChanged(Editable s) {   //當有字元時為true   boolean isVisible = getText().toString().length() >= 1;   //顯示右邊的表徵圖   setClearDrawableVisible(isVisible);  }   @Override  public void beforeTextChanged(CharSequence s, int start, int count,      int after) {   }   @Override  public void onTextChanged(CharSequence s, int start, int before,      int count) {   }   }   // 隱藏或顯示右邊clean的表徵圖  protected void setClearDrawableVisible(boolean isVisible) {  Drawable rightDrawable;  if (isVisible) {   rightDrawable = mRightDrawable;  } else {   rightDrawable = null;  }  // 使用代碼設定該控制項right處的表徵圖  setCompoundDrawables(getCompoundDrawables()[0],   getCompoundDrawables()[1], rightDrawable,   getCompoundDrawables()[3]);  }   // 顯示動畫  public void setShakeAnimation() {  this.startAnimation(shakeAnimation(5));   }   // CycleTimes動畫重複的次數  public Animation shakeAnimation(int CycleTimes) {  //設定位移動畫 其中new TranslateAnimation(0,10,0,10)四個值表示為 X座標從0-->10,Y座標從0-->10  Animation translateAnimation = new TranslateAnimation(0, 10, 0, 10);  //設定動畫次數  translateAnimation.setInterpolator(new CycleInterpolator(CycleTimes));  //設定動畫間隔  translateAnimation.setDuration(1000);  return translateAnimation;  }  } 

其中需要注意的知識：

  1.Drawable[] drawables = this.getCompoundDrawables(); 得到此View的 drawable. getCompoundDrawables()方法得到的有4個Drawable對象，分別對應此View的左，上，右，下的邊距

  2.boolean isClean = (event.getX() > (getWidth() - getTotalPaddingRight()))&& (event.getX() < (getWidth() - getPaddingRight()));  判斷點擊的地區是否為右邊表徵圖範圍。其中event.getX()為點擊的位置的X座標大小。詳細如下圖所示：

 3.Animation translateAnimation = new TranslateAnimation(0, 10, 0, 10); 設定位移動畫 其中new TranslateAnimation(0,10,0,10)四個值表示為 X座標從0-->10,Y座標從0-->10

 4.this.setOnFocusChangeListener(new FocusChangeListenerImpl());設定焦點變化的目的是為了更人性化。當焦點在此行並且有字元時才顯示一鍵刪除表徵圖。不在此行時表徵圖隱藏。

 5.this.addTextChangedListener(new TextWatcherImpl()); 設定text變化監聽。new TextWatcher{}中有3個方法。分別是：

1）.public void beforeTextChanged(CharSequence s, int start, int count,int after) {}
2）.public void onTextChanged(CharSequence s, int start, int before,int count) {}
3）.public void afterTextChanged(Editable s) {}
我們只需要在afterTextChanged(){Editable s}{}中添加要實現的方法即可。當監聽到text變化時，設定右邊表徵圖顯示。

TextWatcher { @Override public void afterTextChanged(Editable s) { //當有字元時為true boolean isVisible = getText().toString().length() >= 1; //顯示右邊的表徵圖 setClearDrawableVisible(isVisible); }

驗證碼的實現過程：

思路：設定4個ImageView。 首先隨機產生4個10以內的數字儲存在數組裡。並且記錄整個驗證碼。在利用Bitmap.createBitmap方法講這4個數字轉化為圖片並且設定隨機顏色。每個數字圖片轉化的時候在隨機設定旋轉角度使這4個數字表徵圖傾斜一定的角度。 驗證碼就產生了。

驗證驗證碼的過程只是類比下： 將輸入的驗證碼跟記錄的驗證碼作比較。相同 提示正確，不同提示錯誤。並且重設驗證碼。

點擊驗證碼圖片地區也會重設驗證碼。
代碼的注釋很詳細。上代碼~~~~： 

package com.example.administrator.texttest;  import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.text.TextUtils; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast;  import java.util.Random;  public class MainActivity extends AppCompatActivity {  //登入按鈕  private Button btLogin;  //賬戶  private DeletableEditText userEditText;  //密碼  private DeletableEditText psdEditText;    //驗證碼的數字文本  private TextView tvHideA,tvHideB,tvHideC,tvHideD;   //驗證碼的圖片文本  private ImageView ivNumA,ivNumB,ivNumC,ivNumD;  //驗證碼輸入文本  private EditText etCheck;  //驗證碼的檢測顯示文本  private TextView tvCheck;   //儲存每個驗證碼的數字  private String numStrTmp = "";  //儲存整個驗證碼的數字  private String numStr = "";   //儲存驗證碼的數組  private int[] numArray = new int[4];  //儲存顏色的數組  private int[] colorArray = new int[6];   @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  setupViews();   }   private void setupViews() {  btLogin = (Button) findViewById(R.id.bt_login);  btLogin.setOnClickListener(new OnClickListenerImpl());  userEditText = (DeletableEditText) findViewById(R.id.tv_user);  psdEditText = (DeletableEditText) findViewById(R.id.tv_psd);    tvHideA = (TextView) findViewById(R.id.tvHideA);  tvHideB = (TextView) findViewById(R.id.tvHideB);  tvHideC = (TextView) findViewById(R.id.tvHideC);  tvHideD = (TextView) findViewById(R.id.tvHideD);   ivNumA = (ImageView) findViewById(R.id.ivNumA);  ivNumB = (ImageView) findViewById(R.id.ivNumB);  ivNumC = (ImageView) findViewById(R.id.ivNumC);  ivNumD = (ImageView) findViewById(R.id.ivNumD);   ivNumA.setOnClickListener(new OnClickListenerImpl());  ivNumB.setOnClickListener(new OnClickListenerImpl());  ivNumC.setOnClickListener(new OnClickListenerImpl());  ivNumD.setOnClickListener(new OnClickListenerImpl());     tvCheck = (TextView) findViewById(R.id.tvCheck);  etCheck = (EditText) findViewById(R.id.etCheck);      setNum();      }  private void setNum() {  initNum();  tvHideA.setText("" + numArray[0]);  tvHideA.setTextColor(randomColor());  tvHideB.setText("" + numArray[1]);  tvHideB.setTextColor(randomColor());  tvHideC.setText("" + numArray[2]);  tvHideC.setTextColor(randomColor());  tvHideD.setText("" + numArray[3]);  tvHideD.setTextColor(randomColor());    Matrix matrixA = new Matrix();  //重設矩陣  matrixA.reset();  matrixA.setRotate(randomAngle());  Bitmap bmNumA = Bitmap.createBitmap(getBitmapFromView(tvHideA,20,50),0,0,20,50,matrixA,true);  ivNumA.setImageBitmap(bmNumA);   Matrix matrixB = new Matrix();  //重設矩陣  matrixB.reset();  matrixB.setRotate(randomAngle());  Bitmap bmNumB = Bitmap.createBitmap(getBitmapFromView(tvHideB,20,50),0,0,20,50,matrixB,true);  ivNumB.setImageBitmap(bmNumB);   Matrix matrixC = new Matrix();  //重設矩陣  matrixC.reset();  matrixC.setRotate(randomAngle());  Bitmap bmNumC = Bitmap.createBitmap(getBitmapFromView(tvHideC,20,50),0,0,20,50,matrixC,true);  ivNumC.setImageBitmap(bmNumC);   Matrix matrixD = new Matrix();  //重設矩陣  matrixD.reset();  matrixD.setRotate(randomAngle());  Bitmap bmNumD = Bitmap.createBitmap(getBitmapFromView(tvHideD,20,50),0,0,20,50,matrixD,true);  ivNumD.setImageBitmap(bmNumD);   }   private Bitmap getBitmapFromView(View v,int width,int height ) {  int widSpec = View.MeasureSpec.makeMeasureSpec(width,View.MeasureSpec.EXACTLY);  int heiSpec = View.MeasureSpec.makeMeasureSpec(height,View.MeasureSpec.EXACTLY);  //重新繪製圖片大小  v.measure(widSpec, heiSpec);  //  v.layout(0, 0, width, height);  Bitmap bitmap = Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888);   //畫出圖片  Canvas canvas = new Canvas(bitmap);  v.draw(canvas);   return bitmap;   }    //設定隨機傾斜的角度  private int randomAngle() {    return 20*(new Random().nextInt(5)-new Random().nextInt(3));  }     //隨機產生顏色  private int randomColor() {  colorArray[0]=0xFF000000; //BLACK  colorArray[1] = 0xFFFF00FF; // MAGENTA  colorArray[2] = 0xFFFF0000; // RED  colorArray[3] = 0xFF00FF00; // GREEN  colorArray[4] = 0xFF0000FF; // BLUE  colorArray[5] = 0xFF00FFFF; // CYAN  int randomColoId = new Random().nextInt(5);  return colorArray[randomColoId];      }  //初始化驗證碼  private void initNum() {  numStr="";  numStrTmp="";  for (int i = 0; i < numArray.length; i++) {   //隨機產生10以內數字   int numIntTmp = new Random().nextInt(10);   //儲存各個驗證碼   numStrTmp = String.valueOf(numIntTmp);   //儲存整個驗證碼   numStr = numStr+numStrTmp;   numArray[i] = numIntTmp;  }   }   private class OnClickListenerImpl implements View.OnClickListener {  @Override  public void onClick(View v) {   //當點擊的為登入按鈕時   if(v==btLogin){   //判斷賬戶字元是否為空白，   if (TextUtils.isEmpty(userEditText.getText().toString())){    //為空白時抖動提示    userEditText.setShakeAnimation();    Toast.makeText(MainActivity.this,"賬戶或密碼不可為空",Toast.LENGTH_SHORT).show();   }   //判斷密碼字元是否為空白   if (TextUtils.isEmpty(psdEditText.getText().toString())){    //為空白時抖動提示    psdEditText.setShakeAnimation();    Toast.makeText(MainActivity.this,"賬戶或密碼不可為空",Toast.LENGTH_SHORT).show();   }    //驗證輸入的驗證碼是否正確   if(etCheck.getText().toString()!=null&&etCheck.getText().toString().trim().length()>0){    tvCheck.setVisibility(View.VISIBLE);    if (numStr.equals(etCheck.getText().toString())){    tvCheck.setTextColor(Color.GREEN);    tvCheck.setText("驗證碼正確！");    }else{    tvCheck.setTextColor(Color.RED);    tvCheck.setText("驗證碼錯誤！");    etCheck.setText("");    setNum();    }   }   //如果OnClick不是登入按鈕時只剩下驗證碼圖片有監聽事件。等同於點擊驗證碼圖片。改變驗證碼。   }else {   setNum();   tvCheck.setVisibility(View.GONE);   }    }  } } 

需要注意的知識：
1.Bitmap.createBitmap(getBitmapFromView(tvHideA,20,50),0,0,20,50,matrixA,true); 
Bitmap.createBitmap(Bitmap source, int x, int y, int width, int height,Matrix m, boolean filter)
Bitmap source：要從中截圖的原始位元影像
int x:  起始x座標
int y：起始y座標
int width：  要截的圖的寬度
int height：要截的圖的高度
boolean filter 當進行的不只是平移變換時，filter參數為true可以進行濾波處理，有助於改善新映像品質;flase時，電腦不做過濾處理。 

2.intwidSpec = View.MeasureSpec.makeMeasureSpec(width,View.MeasureSpec.EXACTLY);
  int heiSpec = View.MeasureSpec.makeMeasureSpec(height,View.MeasureSpec.EXACTLY);
 設定View的寬和高。View.MeasureSpec.EXACTLY 指的是設定為實際View的大小。即前面的width(height)為多大就為多大。

3.Bitmap.createBitmap(width,height, Bitmap.Config.ARGB_8888); create一個表徵圖。 

4.Canvas canvas =newCanvas(bitmap);
v.draw(canvas);  畫出圖片

5.v.measure(widSpec, heiSpec);
//v.layout(0,0, width, height);  重新繪製圖片的大小。 

後面是運行時的圖片：

當有輸入時右邊的一鍵刪除表徵圖顯示、當失去焦點時一鍵刪除表徵圖隱藏、點擊驗證碼更新驗證碼：

後面的就不詳細圖示了。

源碼下載：http://xiazai.jb51.net/201610/yuanma/Androidlogin(jb51.net).rar

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。