android仿支付宝密码输入框效果

本文实例为大家分享了android仿支付宝密码输入框展示的具体代码,供大家参考,具体内容如下

这个没什么好分析的,就是一些基本的绘制什么线,矩形什么的,看代码更具体

布局文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >
 <com.example.custompasswordview.PasswordView
  android:id="@+id/passwordview"
  android:layout_width="match_parent"
  android:layout_height="105px"
  android:layout_marginTop="100px"
  android:layout_marginLeft="20px"
  android:layout_marginRight="20px"
  android:inputType="number"
  android:cursorVisible="false"
  android:focusable="true"
  android:focusableInTouchMode="true"
  android:enabled="true"
  android:clickable="true"
   />
 <Button
  android:id="@+id/btn_pass_reset"
  android:layout_width="250px"
  android:layout_height="90px"
  android:text="重置"
  android:layout_below="@id/passwordview"
  android:layout_marginTop="20px"
  android:layout_marginLeft="40px"
  android:gravity="center"
  />
</RelativeLayout>

MainActivity.java

package com.example.custompasswordview;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends Activity {
 private Button btn_pass_reset;
 private PasswordView passwordview;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  btn_pass_reset = (Button) findViewById(R.id.btn_pass_reset);
  passwordview = (PasswordView) findViewById(R.id.passwordview);
  btn_pass_reset.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    passwordview.setEmpeyText();
   }
  });
 }
}

自定义EditText输入框

package com.example.custompasswordview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.EditText;
import android.widget.Toast;

/**
 * Created by Adminis on 2016/8/7.
 */
public class PasswordView extends EditText {
 private static final String TAG ="PasswordView" ;
 private Paint bordPaint;//外框画笔
 private Paint linePaint;//线 的画笔
 private Paint passTextPaint;//密码画笔
 private int width;
 private int height;
 private int passwordLength = 6;//代码的长度
 private int textLength;
 private int radius = 15;
 public PasswordView(Context context) {
  this(context,null);
 }
 public PasswordView(Context context, AttributeSet attrs) {
  this(context, attrs,0);
 }

 public PasswordView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initPaint();
 }

 /**
  * 初始化画笔
  */
 private void initPaint() {
  setFocusable(true);
  bordPaint = new Paint();
  bordPaint.setStrokeWidth(8);
  bordPaint.setColor(Color.WHITE);
  bordPaint.setStyle(Paint.Style.FILL);

  linePaint = new Paint();
  linePaint.setColor(Color.parseColor("#838B8B"));
  linePaint.setStrokeWidth(4);

  passTextPaint = new Paint();
  passTextPaint.setColor(Color.parseColor("#000000"));
  passTextPaint.setStrokeWidth(12);

 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  height = getMeasuredHeight();
  width = getMeasuredWidth();
  drawRoundRect(canvas);
  drawLine(canvas);
  drawTextPass(canvas);
 }

 /**
  * 绘制密码
  * @param canvas
  */
 private void drawTextPass(Canvas canvas) {
  float cx, cy = height/ 2;
  float half = width / passwordLength / 2;
  for(int i = 0; i < textLength; i++) {
   cx = width * i / passwordLength + half;
   canvas.drawCircle(cx, cy, radius, passTextPaint);
  }
 }

 /**
  * 绘制线
  * @param canvas
  */
 private void drawLine(Canvas canvas) {
  for (int i = 1; i < passwordLength; i++) {
   float x = width * i / passwordLength;
   canvas.drawLine(x, 12, x, height-12, linePaint);
  }
 }
 /**
  * 绘制背景
  * @param canvas
  */
 private void drawRoundRect(Canvas canvas) {
   canvas.drawRoundRect(0,0,width,height,12,12,bordPaint);
 }
 @Override
 protected void onTextChanged(CharSequence text, int start, int lengthBefore, int lengthAfter) {
  super.onTextChanged(text, start, lengthBefore, lengthAfter);
  this.textLength = text.toString().length();
  if(textLength==6){
   Toast.makeText(getContext(),"您设置的密码为"+text,Toast.LENGTH_SHORT).show();
  }
  invalidate();
 }
 public void setEmpeyText(){
  setText("");
  invalidate();
 }
}

效果:

github:https://github.com/zhouguizhi/ZhiFuBaoPwdView

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现动态显示或隐藏密码输入框的内容

    本文实例展示了Android实现动态显示或隐藏密码输入框内容的方法,分享给大家供大家参考之用.具体方法如下: 该功能可通过设置EditText的setTransformationMethod()方法来实现隐藏密码或者显示密码. 示例代码如下: private Button mBtnPassword; private EditText mEtPassword; private boolean mbDisplayFlg = false; /** Called when the activity is

  • Android 仿支付宝密码输入框效果

    模仿支付宝输入效果,实现很简单,就是画个矩形框和圆形,其他的通过组合view来实现所有功能,虽然简单但是封装起来,方便以后使用,也分享一下,希望对别人也有点帮助. 1.如何使用,可以设置自己的进入退出动画,不设置则没有动画效果,自己觉得封装之后还是非常用好的. private MyInputPwdUtil myInputPwdUtil; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(sa

  • TextInputLayout输入框控件的悬浮标签

    本文实例为大家分享了TextInputLayout输入框悬浮标签的具体代码,供大家参考,具体内容如下 TextInputLayout也是5.0以后的效果,想要使用同样需要在build中配置: dependencies { compile 'com.android.support:design:23.3.0' } TextInputLayout可以用来显示一个提示错误信息,把Hint放到EditText左上方等效果的一个布局: 如果项目中有这类的需求,使用TextInputLayout实现起来非常

  • Android输入法弹出时覆盖输入框问题的解决方法

    当一个activity中含有输入框时,我们点击输入框,会弹出输入法界面,整个界面的变化效果与manifest中对应设置的android:windowSoftInputMode属性有关,一般可以设置的值如下, <activity android:windowSoftInputMode=[ "stateUnspecified", "stateUnchanged", "stateHidden", "stateAlwaysHidden&q

  • android输入框与文本框加滚动条scrollview示例

    我们都知道EditText与TextView是Android的文本输入框和文本显示框,但是基于手机屏幕的大小因素,如果在需要输入较多文字或者显示较多内容的时候,手机屏幕是远远不够的,因此让文本框具有滚动条的功能是手机上必备的,要加上滚动条,其实很简单,只需要在文本输入框或者文本显示框上面加上滚动条控件即可,该控件名字为ScrollView,以下我们对比下(以TextView举例). 复制代码 代码如下: //A.未加滚动效果 <TextView android:layout_width="

  • Android使用TextInputLayout创建登陆页面

    本教程中,我将再次讨论Material Design.Google I/O 2015 对于每一个开发者来说都是一个重大的事件,设计当然也是谈资之一. 谷歌意识到向后兼容是实现material design的重要部分.当然support library,比如appcompat-v4 和 appcompat-v7是解决方案的一部分. 但是Theme.AppCompat 并没有实现谷歌官方应用中用到的每个material组建.其中一个重要的特性就是AppCompat theme没有提供一个显示在Edi

  • android仿支付宝、微信密码输入框效果

    本文实例为大家分享了android密码输入框效果展示的具体代码,供大家参考,具体内容如下 老规矩,先看效果:这是现在商城类app中很常见的支付密码效果,首先说下这个不是自定义控件,是github上的开源库: https://github.com/Jungerr/GridPasswordView 下面主要说下这个开源库的用法和平时我们常用的几点功能: 想要使用这个开源库首先我们需要将库导入到咱们的项目中: 直接在app的build.gradle下添加如下代码 dependencies { comp

  • Android软键盘挡住输入框的终极解决方案

    前言 开发做得久了,总免不了会遇到各种坑. 而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 最基本的情况,如图所示:在页面底部有一个EditText,如果不做任何处理,那么在软键盘弹出的时候,就有可能会挡住EditText. 对于这种情况的处理其实很简单,只需要在AndroidManifest文件中对activity设置:android:windowSoftInputMode的值adjustPan或者adjustResize即

  • android仿微信支付宝的支付密码输入框示例

    大家好,我是狸小华,萌汉子一枚.今天给大家带来的是仿微信/支付宝的密码输入框.这个效果也出来有一段时间了,所以搜索一下还是有不少的网友实现,但是,但是!经过一番查看后,我发现他们的实现分为两大类. 一,直接继承EditText,然后在ondraw里面做文章:二,EditText外面包一个viewGroup.我不喜欢这两种实现方式,觉着有些臃肿了,所以我详细介绍下我的实现方式:直接继承View,获取用户的输入,然后draw出来. 我们实现的是上面的密码输入框,这个键盘...系统自带的哦,调用用户输

  • Android文本输入框(EditText)输入密码时显示与隐藏

    代码很简单,这里就不多废话了. 复制代码 代码如下: package cc.c; import android.app.Activity; import android.os.Bundle; import android.text.Selection; import android.text.Spannable; import android.text.method.HideReturnsTransformationMethod; import android.text.method.Passw

  • Android UI设计系列之自定义EditText实现带清除功能的输入框(3)

    最近公司的产品在陆续做升级,上级领导给的任务是优化代码结构以及项目架构,力争把项目写的精巧简练,于是我们满工程找冗余... 我们都知道每一个项目基本上都是有登陆页的,在登陆页中肯定是少不了输入框了,当我们在输入框中输入数据后如果输入的内容不正确或者是错误的或者是想重新输入,如果嗯键盘上的删除键就得一个一个的去删除,这时候我们或许就想要是能有一个标记当点击了这个标记能把我们刚刚输入的内容清空就好了.这样可以极大的提升用户体验,就拿QQ的登陆来说吧,效果如下: 当点击密码框右侧的小×图标时输入的内容

随机推荐