功能强大的登录界面Android实现代码_安卓软件开发教程-查字典教程网

功能强大的登录界面Android实现代码

摘要：前言一个好的应用需要一个有良好的用户体验的登录界面，现如今，许多应用的的登录界面都有着用户名，密码一键删除，用户名，密码为空提示，以及需要输...

前言

一个好的应用需要一个有良好的用户体验的登录界面，现如今，许多应用的的登录界面都有着用户名，密码一键删除，用户名，密码为空提示，以及需要输入验证码的功能。看着csdn上的大牛们的文章，心里想着也写一个登录界面学习学习，许多东西都是参考别的文章，综合起来的。废话少说，接下来看看是如何实现的。

ps:由于懒得抠图。所以程序的图标很难看。

程序运行时的图示：

功能强大的登录界面Android实现代码1

首先是布局文件没有什么难度。

然后是加载一些布局文件，和一些控件的初始化

//登录按钮 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坐标大小。详细如下图所示：

功能强大的登录界面Android实现代码2

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)为多大就为多大。