강력 한 기능 의 로그 인 인터페이스 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(); 사고방식: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())); 클릭 한 영역 이 오른쪽 아이콘 범위 인지 판단 합 니 다.이 중 이벤트.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()); 텍스트 변경 감청 설정.new TextWatcher{}에는 세 가지 방법 이 있 습 니 다.각각:
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) {}
우 리 는 after TextChanged(){Editable s}{}에 실현 할 방법 을 추가 하면 됩 니 다.텍스트 변 화 를 들 었 을 때 오른쪽 아이콘 을 설정 합 니 다.
TextWatcher {
@Override
public void afterTextChanged(Editable s) {
// true
boolean isVisible = getText().toString().length() >= 1;
//
setClearDrawableVisible(isVisible);
}
사고방식:ImageView 4 개 를 설정 합 니 다.우선 무 작위 로 4 개의 10 이내 의 숫자 를 만들어 배열 에 저장 합 니 다.인증 코드 전 체 를 기록 합 니 다.Bitmap.createBitmap 방법 을 이용 하여 이 네 개의 숫자 를 그림 으로 바 꾸 고 무 작위 색상 을 설정 합 니 다.모든 디지털 그림 이 전 환 될 때 무 작위 로 회전 각 도 를 설정 하여 이 네 개의 디지털 아이콘 을 일정한 각도 로 기울 인 다.인증번호 가 생 성 되 었 습 니 다.
인증 코드 를 검증 하 는 과정 은 시 뮬 레이 션 일 뿐 입 니 다.입력 한 인증 코드 와 기 록 된 인증 코드 를 비교 합 니 다.같은 힌트 가 정확 하고 다른 힌트 가 잘못 되 었 습 니 다.인증 코드 를 리 셋 합 니 다.
인증 코드 를 누 르 면 이미지 영역 도 인증 코드 를 리 셋 합 니 다.
코드 의 주석 이 매우 상세 하 다.코드 올 리 기~~~:
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); 아이콘 을 만 듭 니 다.
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
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
