android银行卡输入密码,android 仿微信添加银行卡时输入支付密码
最近了解到了BottomSheetBehavior，感覺是個很有意思的布局，剛好項目中有實際場景可以應用，就拿它來實現(xiàn)了，下面是我們要實現(xiàn)的最終效果：
gif.gif
底部的鍵盤布局呢，就是采用的BottomSheetBehavior，我個人理解類似于抽屜的效果，可以從底部滑出劃入，話不多說，開始吧。
布局界面代碼
布局界面就是一個關閉按鈕的圖片，兩個TextView和一個自定義的密碼輸入控件，下面貼上代碼
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.PasswordcheckActivity">
android:background="@color/back"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/img_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:src="@drawable/ic_close" />
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/dp_120"
android:textColor="@color/title_black"
android:textSize="25sp"
android:text="添加銀行卡" />
android:id="@+id/textView5"
android:textColor="@color/title_black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView4"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/dp_20"
android:text="請輸入支付密碼，以驗證身份" />
android:id="@+id/pass_edit"
android:layout_width="256dp"
android:layout_height="48dp"
android:layout_below="@+id/textView5"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:padding="1dp" />
android:background="@color/white"
android:id="@+id/line_pass_bottom"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_300">
android:id="@+id/Line_bom"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_20">
android:layout_width="@dimen/dp_30"
android:layout_height="@dimen/dp_20"
android:src="@drawable/bottom"
/>
android:columnCount="3"
android:rowCount="4"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/text_num_1"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="1"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_2"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="2"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_3"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="3"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_4"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="4"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_5"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="5"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_6"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="6"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_7"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="7"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_8"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="8"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_9"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="9"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text=""
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_0"
android:layout_height="70dp"
android:layout_columnWeight="1"
android:gravity="center"
android:text="0"
android:textSize="25sp"
android:textColor="@color/black"
/>
android:id="@+id/text_num_d"
android:layout_height="70dp"
android:layout_columnWeight="1"
>
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_close"
/>
除了幾個顏色資源和圖片外，沒有用到其他的資源文件，注意的是com.xxx.xxx.PassEditView這個自定義控件需要將代碼復制到你項目下使用，替換成你的包名，而且BottomSheetBehavior布局的界面要加入以下一句：
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
而且BottomSheetBehavior是可以設置初始高度等屬性的，感興趣的同學可以搜索百度BottomSheetBehavior
下面是PassEditView這個密碼輸入框的代碼：
public class PassEditView extends View {
private Paint mPaint;
private InputFinishListener inputFinishListener;//輸入完成監(jiān)聽
private int inputNum=0;//當前輸入的密碼個數(shù)
private int passwordNum=6;//密碼個數(shù)
private int boundWidth=2;//外層框線條粗細
private int boundColor= R.color.view_blue;//外層框線條顏色
private int boundRadius=0;//外框圓角半徑
private int deliverWidth=1;//分割線粗細
private int deliverColor=Color.GRAY;//分割線條顏色
private int deliverPadding=5;//分割線距離框的大小
private int circleRadius =15;//密碼圓點半徑大小
private int circleColor= Color.BLACK;//密碼圓點顏色
private StringBuilder currentPassword;//用戶輸入的密碼
public PassEditView(Context context) {
super(context);
init();
}
public PassEditView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
private void init() {
currentPassword=new StringBuilder();
mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
}
private int dip2px(float dpValue) {
final float scale = getContext().getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode=MeasureSpec.getMode(widthMeasureSpec);
int widthSize=MeasureSpec.getSize(widthMeasureSpec);
int heightMode=MeasureSpec.getMode(heightMeasureSpec);
int heightSize=MeasureSpec.getSize(heightMeasureSpec);
int width,height;
if (widthMode==MeasureSpec.AT_MOST){
width=dip2px(36)*passwordNum;
}else {
width=widthSize;
}
if (heightMode==MeasureSpec.AT_MOST){
height=dip2px(36);
}else{
height=heightSize;
}
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
float deliverSize=(width-getPaddingLeft()-getPaddingRight())/passwordNum;
//1.畫外框
drawBound(canvas, width, height);
//2.畫分割線
drawDeliver(canvas, height, deliverSize);
//3.輸入密碼之后顯示的圖案
drawCircle(canvas, height, deliverSize);
}
private void drawCircle(Canvas canvas, int height, float deliverSize) {
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(circleColor);
for (int i = 0; i < inputNum; i++) {
canvas.drawCircle(deliverSize*i+getPaddingLeft()+deliverSize/2,(height-getPaddingTop()-getPaddingBottom())/2+getPaddingTop(), circleRadius,mPaint);
}
}
private void drawDeliver(Canvas canvas, int height, float deliverSize) {
mPaint.setStrokeWidth(deliverWidth);
mPaint.setColor(deliverColor);
Path path = new Path();
for (int i = 1; i < passwordNum; i++) {
path.reset();
path.moveTo(deliverSize*i+getPaddingLeft(),0+deliverPadding+getPaddingTop());
path.lineTo(deliverSize*i+getPaddingLeft(),height-deliverPadding-getPaddingBottom());
canvas.drawPath(path,mPaint);
}
}
private void drawBound(Canvas canvas, int width, int height) {
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(boundWidth);
mPaint.setColor(getResources().getColor(boundColor));
RectF rectF = new RectF(getPaddingLeft(),getPaddingTop(),width-getPaddingRight(),height-getPaddingBottom());
canvas.drawRoundRect(rectF,boundRadius,boundRadius,mPaint);
}
public void inputPassword(Object pwd){
if (inputNum
currentPassword.append(pwd);
inputNum++;
}
invalidate();
if (inputNum==passwordNum){
if (inputFinishListener!=null){
inputFinishListener.onFinish(getPassword());
}
}
}
//刪除一個密碼
public void deletePassword(){
if (currentPassword.length()>0) {
currentPassword.deleteCharAt(currentPassword.length() - 1);
inputNum--;
}
invalidate();
}
//清空輸入的所有密碼
public void cleanInput(){
inputNum=0;
currentPassword.delete(0,currentPassword.length());
invalidate();
}
//獲取輸入的所有密碼
public String getPassword(){
return currentPassword.toString();
}
public void setInputFinishListener(InputFinishListener inputFinishListener) {
this.inputFinishListener = inputFinishListener;
}
public interface InputFinishListener{
void onFinish(String pwd);
}
}
PassEditView這個自定義View并不是作者本人寫的哦，網(wǎng)上有很多一樣的輪子，就拿來用了，感謝作者的開源，其中包含有四個主要方法，輸入密碼-inputPassword，傳入一個數(shù)字、刪除一個密碼-deletePassword()、清空所有密碼-cleanInput()、以及獲取所有密碼-getPassword()，值得注意的是，這個控件有輸入完成的回調(diào)，實現(xiàn)這個回調(diào)就能直接獲取到輸入的密碼。
Java代碼部分
在java代碼中我們要實現(xiàn)點擊鍵盤數(shù)字，輸入密碼，點擊輸入框掉起數(shù)字鍵盤，點擊返回鍵，收起鍵盤等等，總體來說功能并不難；這里代碼中設置BottomSheetBehavior的初始狀態(tài)：
public class PasswordcheckActivity extends AppCompatActivity {
BottomSheetBehavior bottomSheetBehavior;
@BindView(R.id.pass_edit)
PassEditView passEdit;
@BindView(R.id.Line_bom)
LinearLayout LineBom;
@BindView(R.id.text_num_1)
TextView textNum1;
@BindView(R.id.text_num_2)
TextView textNum2;
@BindView(R.id.text_num_3)
TextView textNum3;
@BindView(R.id.text_num_4)
TextView textNum4;
@BindView(R.id.text_num_5)
TextView textNum5;
@BindView(R.id.text_num_6)
TextView textNum6;
@BindView(R.id.text_num_7)
TextView textNum7;
@BindView(R.id.text_num_8)
TextView textNum8;
@BindView(R.id.text_num_9)
TextView textNum9;
@BindView(R.id.text_num_0)
TextView textNum0;
@BindView(R.id.text_num_d)
RelativeLayout textNumD;
@BindView(R.id.img_close)
ImageView imgClose;
@BindView(R.id.line_pass_bottom)
LinearLayout linePassBottom;
boolean isshowPass = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_passwordcheck);
ButterKnife.bind(this);
init();
}
private void init() {
bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.line_pass_bottom));
bottomSheetBehavior.setSkipCollapsed(true);
bottomSheetBehavior.setHideable(true);
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
passEdit.setInputFinishListener(new PassEditView.InputFinishListener() {
@Override
public void onFinish(String pwd) {
Toast.makeText(PasswordcheckActivity.this, pwd, Toast.LENGTH_SHORT).show();
}
});
}
@OnClick({R.id.img_close,R.id.pass_edit, R.id.Line_bom, R.id.text_num_1, R.id.text_num_2, R.id.text_num_3, R.id.text_num_4, R.id.text_num_5, R.id.text_num_6, R.id.text_num_7, R.id.text_num_8, R.id.text_num_9, R.id.text_num_0, R.id.text_num_d})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.pass_edit:
isshowPass = true;
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
break;
case R.id.Line_bom:
isshowPass = false;
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
break;
case R.id.text_num_1:
passEdit.inputPassword(1);
break;
case R.id.text_num_2:
passEdit.inputPassword(2);
break;
case R.id.text_num_3:
passEdit.inputPassword(3);
break;
case R.id.text_num_4:
passEdit.inputPassword(4);
break;
case R.id.text_num_5:
passEdit.inputPassword(5);
break;
case R.id.text_num_6:
passEdit.inputPassword(6);
break;
case R.id.text_num_7:
passEdit.inputPassword(7);
break;
case R.id.text_num_8:
passEdit.inputPassword(8);
break;
case R.id.text_num_9:
passEdit.inputPassword(9);
break;
case R.id.text_num_0:
passEdit.inputPassword(0);
break;
case R.id.text_num_d:
passEdit.deletePassword();
break;
case R.id.img_close:
finish();
break;
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
if(isshowPass){
isshowPass = false;
bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
}else {
finish();
}
return false;
}
return super.onKeyDown(keyCode, event);
}
}
以上呢，就完成了我們需要的效果，大致上與微信的輸入密碼頁面差不多，關于BottomSheetBehavior的更多用法，大家有興趣可以去搜索一下，在沒了解之前做底部抽屜都是用彈窗的形式，BottomSheetBehavior很好的幫我們免去了寫一個新頁面的麻煩哦。
總結
以上是生活随笔為你收集整理的android银行卡输入密码,android 仿微信添加银行卡时输入支付密码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php发送gmail,汇总PHPmail
- 下一篇： Gmail Driver:你的gmail