设为首页 收藏本站 662p开源网
开启辅助访问 切换到宽版

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 立即注册 找回密码

安卓教程网

发表于 2017-12-29 18:00:41 | 显示全部楼层 |阅读模式
更多
1.密码输入框
attrs.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="PasswordEditText">
  4.         <!-- 密码的个数 -->
  5.         <attr name="passwordNumber" format="integer"/>
  6.         <!-- 密码圆点的半径 -->
  7.         <attr name="passwordRadius" format="dimension" />
  8.         <!-- 密码圆点的颜色 -->
  9.         <attr name="passwordColor" format="color" />
  10.         <!-- 分割线的颜色 -->
  11.         <attr name="divisionLineColor" format="color" />
  12.         <!-- 分割线的大小 -->
  13.         <attr name="divisionLineSize" format="color" />
  14.         <!-- 背景边框的颜色 -->
  15.         <attr name="bgColor" format="color" />
  16.         <!-- 背景边框的大小 -->
  17.         <attr name="bgSize" format="dimension" />
  18.         <!-- 背景边框的圆角大小 -->
  19.         <attr name="bgCorner" format="dimension"/>
  20.     </declare-styleable>
  21. </resources>
复制代码
PasswordEditText
  1. public class PasswordEditText extends EditText {
  2.     // 画笔
  3.     private Paint mPaint;
  4.     // 一个密码所占的宽度
  5.     private int mPasswordItemWidth;
  6.     // 密码的个数默认为6位数
  7.     private int mPasswordNumber = 6;
  8.     // 背景边框颜色
  9.     private int mBgColor = Color.parseColor("#d1d2d6");
  10.     // 背景边框大小
  11.     private int mBgSize = 1;
  12.     // 背景边框圆角大小
  13.     private int mBgCorner = 0;
  14.     // 分割线的颜色
  15.     private int mDivisionLineColor = mBgColor;
  16.     // 分割线的大小
  17.     private int mDivisionLineSize = 1;
  18.     // 密码圆点的颜色
  19.     private int mPasswordColor = mDivisionLineColor;
  20.     // 密码圆点的半径大小
  21.     private int mPasswordRadius = 4;
  22.     private PasswordFullListener mListener;

  23.     public PasswordEditText(Context context) {
  24.         this(context, null);
  25.     }

  26.     public PasswordEditText(Context context, AttributeSet attrs) {
  27.         super(context, attrs);
  28.         initPaint();
  29.         initAttributeSet(context, attrs);
  30.         // 设置输入模式是密码
  31.         setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
  32.         // 不显示光标
  33.         setCursorVisible(false);
  34.     }

  35.     /**
  36.      * 初始化属性
  37.      */
  38.     private void initAttributeSet(Context context, AttributeSet attrs) {
  39.         TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PasswordEditText);
  40.         // 获取大小
  41.         mDivisionLineSize = (int) array.getDimension(R.styleable.PasswordEditText_divisionLineSize, dip2px(mDivisionLineSize));
  42.         mPasswordRadius = (int) array.getDimension(R.styleable.PasswordEditText_passwordRadius, dip2px(mPasswordRadius));
  43.         mBgSize = (int) array.getDimension(R.styleable.PasswordEditText_bgSize, dip2px(mBgSize));
  44.         mBgCorner = (int) array.getDimension(R.styleable.PasswordEditText_bgCorner, 0);
  45.         // 获取颜色
  46.         mBgColor = array.getColor(R.styleable.PasswordEditText_bgColor, mBgColor);
  47.         mDivisionLineColor = array.getColor(R.styleable.PasswordEditText_divisionLineColor, mDivisionLineColor);
  48.         mPasswordColor = array.getColor(R.styleable.PasswordEditText_passwordColor, mDivisionLineColor);
  49.         array.recycle();
  50.     }

  51.     /**
  52.      * 初始化画笔
  53.      */
  54.     private void initPaint() {
  55.         mPaint = new Paint();
  56.         mPaint.setAntiAlias(true);
  57.         mPaint.setDither(true);
  58.     }

  59.     /**
  60.      * dip 转 px
  61.      */
  62.     private int dip2px(int dip) {
  63.         return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  64.                 dip, getResources().getDisplayMetrics());
  65.     }

  66.     @Override
  67.     protected void onDraw(Canvas canvas) {
  68.         int passwordWidth = getWidth() - (mPasswordNumber - 1) * mDivisionLineSize;
  69.         mPasswordItemWidth = passwordWidth / mPasswordNumber;
  70.         // 绘制背景
  71.         drawBg(canvas);
  72.         // 绘制分割线
  73.         drawDivisionLine(canvas);
  74.         // 绘制密码
  75.         drawHidePassword(canvas);
  76.     }

  77.     /**
  78.      * 绘制背景
  79.      */
  80.     private void drawBg(Canvas canvas) {
  81.         mPaint.setColor(mBgColor);
  82.         // 设置画笔为空心
  83.         mPaint.setStyle(Paint.Style.STROKE);
  84.         mPaint.setStrokeWidth(mBgSize);
  85.         RectF rectF = new RectF(mBgSize, mBgSize, getWidth() - mBgSize, getHeight() - mBgSize);
  86.         // 如果没有设置圆角,就画矩形
  87.         if (mBgCorner == 0) {
  88.             canvas.drawRect(rectF, mPaint);
  89.         } else {
  90.             // 如果有设置圆角就画圆矩形
  91.             canvas.drawRoundRect(rectF, mBgCorner, mBgCorner, mPaint);
  92.         }
  93.     }

  94.     /**
  95.      * 绘制隐藏的密码
  96.      */
  97.     private void drawHidePassword(Canvas canvas) {
  98.         int passwordLength = getText().length();
  99.         mPaint.setColor(mPasswordColor);
  100.         // 设置画笔为实心
  101.         mPaint.setStyle(Paint.Style.FILL);
  102.         for (int i = 0; i < passwordLength; i++) {
  103.             int cx = i * mDivisionLineSize + i * mPasswordItemWidth + mPasswordItemWidth / 2 + mBgSize;
  104.             canvas.drawCircle(cx, getHeight() / 2, mPasswordRadius, mPaint);
  105.         }
  106.         // 判断密码是否填充完毕
  107.         if (passwordLength >= mPasswordNumber) {
  108.             // 代表密码已经填充满了
  109.             if (mListener != null) {
  110.                 mListener.passwordFull(getText().toString().trim());
  111.             }
  112.         }
  113.     }

  114.     /**
  115.      * 绘制分割线
  116.      */
  117.     private void drawDivisionLine(Canvas canvas) {
  118.         mPaint.setStrokeWidth(mDivisionLineSize);
  119.         mPaint.setColor(mDivisionLineColor);
  120.         for (int i = 0; i < mPasswordNumber - 1; i++) {
  121.             int startX = (i + 1) * mDivisionLineSize + (i + 1) * mPasswordItemWidth + mBgSize;
  122.             canvas.drawLine(startX, mBgSize, startX, getHeight() - mBgSize, mPaint);
  123.         }
  124.     }

  125.     /**
  126.      * 添加密码
  127.      */
  128.     public void addPassword(String number) {
  129.         number = getText().toString().trim() + number;
  130.         if (number.length() > mPasswordNumber) {
  131.             return;
  132.         }
  133.         setText(number);
  134.     }

  135.     /**
  136.      * 删除最后一位密码
  137.      */
  138.     public void deleteLastPassword() {
  139.         String currentText = getText().toString().trim();
  140.         if (TextUtils.isEmpty(currentText)) {
  141.             return;
  142.         }
  143.         currentText = currentText.substring(0, currentText.length() - 1);
  144.         setText(currentText);
  145.     }

  146.     /**
  147.      * 设置密码填充满的监听
  148.      */
  149.     public void setOnPasswordFullListener(PasswordFullListener listener) {
  150.         this.mListener = listener;
  151.     }

  152.     /**
  153.      * 密码已经全部填满
  154.      */
  155.     public interface PasswordFullListener {
  156.         public void passwordFull(String password);
  157.     }
  158. }
复制代码
目前的效果就是点击之后会弹出系统的键盘,实现了基本的效果,接下来我们再加入监听也就说当密码输入完成我们需要回调监听。
 
 

2.自定义键盘:
ui_customer_keyboard.xml:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/activity_main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     android:background="#EBEBEB"
  7.     android:orientation="vertical">

  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content">

  11.         <TextView
  12.             android:layout_width="0dp"
  13.             android:layout_height="wrap_content"
  14.             android:layout_marginRight="1dp"
  15.             android:layout_weight="1"
  16.             android:background="#FFFFFF"
  17.             android:gravity="center"
  18.             android:padding="20dp"
  19.             android:text="1" />

  20.         <TextView
  21.             android:layout_width="0dp"
  22.             android:layout_height="wrap_content"
  23.             android:layout_marginRight="1dp"
  24.             android:layout_weight="1"
  25.             android:background="#FFFFFF"
  26.             android:gravity="center"
  27.             android:padding="20dp"
  28.             android:text="2" />

  29.         <TextView
  30.             android:layout_width="0dp"
  31.             android:layout_height="wrap_content"
  32.             android:layout_weight="1"
  33.             android:background="#FFFFFF"
  34.             android:gravity="center"
  35.             android:padding="20dp"
  36.             android:text="3" />
  37.     </LinearLayout>

  38.     <LinearLayout
  39.         android:layout_width="match_parent"
  40.         android:layout_height="wrap_content"
  41.         android:layout_marginTop="1dp">

  42.         <TextView
  43.             android:layout_width="0dp"
  44.             android:layout_height="wrap_content"
  45.             android:layout_marginRight="1dp"
  46.             android:layout_weight="1"
  47.             android:background="#FFFFFF"
  48.             android:gravity="center"
  49.             android:padding="20dp"
  50.             android:text="4" />

  51.         <TextView
  52.             android:layout_width="0dp"
  53.             android:layout_height="wrap_content"
  54.             android:layout_marginRight="1dp"
  55.             android:layout_weight="1"
  56.             android:background="#FFFFFF"
  57.             android:gravity="center"
  58.             android:padding="20dp"
  59.             android:text="5" />

  60.         <TextView
  61.             android:layout_width="0dp"
  62.             android:layout_height="wrap_content"
  63.             android:layout_weight="1"
  64.             android:background="#FFFFFF"
  65.             android:gravity="center"
  66.             android:padding="20dp"
  67.             android:text="6" />
  68.     </LinearLayout>

  69.     <LinearLayout
  70.         android:layout_width="match_parent"
  71.         android:layout_height="wrap_content"
  72.         android:layout_marginTop="1dp">

  73.         <TextView
  74.             android:layout_width="0dp"
  75.             android:layout_height="wrap_content"
  76.             android:layout_marginRight="1dp"
  77.             android:layout_weight="1"
  78.             android:background="#FFFFFF"
  79.             android:gravity="center"
  80.             android:padding="20dp"
  81.             android:text="7" />

  82.         <TextView
  83.             android:layout_width="0dp"
  84.             android:layout_height="wrap_content"
  85.             android:layout_marginRight="1dp"
  86.             android:layout_weight="1"
  87.             android:background="#FFFFFF"
  88.             android:gravity="center"
  89.             android:padding="20dp"
  90.             android:text="8" />

  91.         <TextView
  92.             android:layout_width="0dp"
  93.             android:layout_height="wrap_content"
  94.             android:layout_weight="1"
  95.             android:background="#FFFFFF"
  96.             android:gravity="center"
  97.             android:padding="20dp"
  98.             android:text="9" />

  99.     </LinearLayout>

  100.     <LinearLayout
  101.         android:layout_width="match_parent"
  102.         android:layout_height="wrap_content"
  103.         android:layout_marginTop="1dp"
  104.         android:orientation="horizontal">

  105.         <TextView
  106.             android:layout_width="0dp"
  107.             android:layout_height="wrap_content"
  108.             android:layout_marginRight="1dp"
  109.             android:layout_weight="1"
  110.             android:gravity="center"
  111.             android:padding="20dp" />

  112.         <TextView
  113.             android:layout_width="0dp"
  114.             android:layout_height="wrap_content"
  115.             android:layout_marginRight="1dp"
  116.             android:layout_weight="1"
  117.             android:background="#FFFFFF"
  118.             android:gravity="center"
  119.             android:padding="20dp"
  120.             android:text="0" />

  121.         <ImageView
  122.             android:layout_width="0dp"
  123.             android:layout_height="wrap_content"
  124.             android:layout_weight="1"
  125.             android:gravity="center"
  126.             android:padding="15dp"
  127.             android:layout_gravity="center_vertical"
  128.             android:src="@drawable/customer_password_keyboard_delete" />
  129.     </LinearLayout>
  130. </LinearLayout>
复制代码
CustomerKeyboard.java
  1. public class CustomerKeyboard extends LinearLayout implements View.OnClickListener {
  2.     private CustomerKeyboardClickListener mListener;

  3.     public CustomerKeyboard(Context context) {
  4.         this(context, null);
  5.     }

  6.     public CustomerKeyboard(Context context, AttributeSet attrs) {
  7.         this(context, attrs, 0);
  8.     }

  9.     public CustomerKeyboard(Context context, AttributeSet attrs, int defStyleAttr) {
  10.         super(context, attrs, defStyleAttr);
  11.         inflate(context, R.layout.ui_customer_keyboard, this);
  12.         setChildViewOnclick(this);
  13.     }

  14.     /**
  15.      * 设置键盘子View的点击事件
  16.      */
  17.     private void setChildViewOnclick(ViewGroup parent) {
  18.         int childCount = parent.getChildCount();
  19.         for (int i = 0; i < childCount; i++) {
  20.             // 不断的递归设置点击事件
  21.             View view = parent.getChildAt(i);
  22.             if (view instanceof ViewGroup) {
  23.                 setChildViewOnclick((ViewGroup) view);
  24.                 continue;
  25.             }
  26.             view.setOnClickListener(this);
  27.         }
  28.     }

  29.     @Override
  30.     public void onClick(View v) {
  31.         View clickView = v;
  32.         if (clickView instanceof TextView) {
  33.             // 如果点击的是TextView
  34.             String number = ((TextView) clickView).getText().toString();
  35.             if (!TextUtils.isEmpty(number)) {
  36.                 if (mListener != null) {
  37.                     // 回调
  38.                     mListener.click(number);
  39.                 }
  40.             }
  41.         } else if (clickView instanceof ImageView) {
  42.             // 如果是图片那肯定点击的是删除
  43.             if (mListener != null) {
  44.                 mListener.delete();
  45.             }
  46.         }
  47.     }

  48.     /**
  49.      * 设置键盘的点击回调监听
  50.      */
  51.     public void setOnCustomerKeyboardClickListener(CustomerKeyboardClickListener listener) {
  52.         this.mListener = listener;
  53.     }

  54.     /**
  55.      * 点击键盘的回调监听
  56.      */
  57.     public interface CustomerKeyboardClickListener {
  58.         public void click(String number);
  59.         public void delete();
  60.     }
  61. }
复制代码
3.最后的测试
activity_main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/activity_main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     xmlns:app="http://schemas.android.com/apk/res-auto"
  7.     android:background="#f7f7f7"
  8.     android:orientation="vertical">

  9.     <com.hc.passwordedittext.PasswordEditText
  10.         android:id="@+id/password_edit_text"
  11.         android:layout_width="match_parent"
  12.         android:layout_marginTop="23dp"
  13.         android:layout_marginRight="45dp"
  14.         android:background="@null"
  15.         android:padding="10dp"
  16.         app:bgCorner="3dp"
  17.         android:layout_marginLeft="45dp"
  18.         android:layout_height="wrap_content" />


  19.     <com.hc.passwordedittext.CustomerKeyboard
  20.         android:id="@+id/custom_key_board"
  21.         android:layout_marginTop="23dp"
  22.         android:layout_width="match_parent"
  23.         android:layout_height="wrap_content"/>
  24. </LinearLayout>
复制代码
MainActivity.java
  1. public class MainActivity extends Activity implements CustomerKeyboard.CustomerKeyboardClickListener,
  2.         PasswordEditText.PasswordFullListener{

  3.     private CustomerKeyboard mCustomerKeyboard;
  4.     private PasswordEditText mPasswordEditText;

  5.     @Override
  6.     protected void onCreate(Bundle savedInstanceState) {
  7.         super.onCreate(savedInstanceState);
  8.         setContentView(R.layout.activity_main);
  9.         mPasswordEditText = (PasswordEditText) findViewById(R.id.password_et);
  10.         mCustomerKeyboard = (CustomerKeyboard) findViewById(R.id.custom_key_board);
  11.         // 设置监听
  12.         mCustomerKeyboard.setOnCustomerKeyboardClickListener(this);
  13.         mPasswordEditText.setOnPasswordFullListener(this);
  14.     }

  15.     /**
  16.      * 键盘数字点击监听回调方法
  17.      */
  18.     @Override
  19.     public void click(String number) {
  20.         mPasswordEditText.addPassword(number);
  21.     }

  22.     /**
  23.      * 键盘删除点击监听回调方法
  24.      */
  25.     @Override
  26.     public void delete() {
  27.         mPasswordEditText.deleteLastPassword();
  28.     }

  29.     /**
  30.      * 密码输入完毕回调方法
  31.      */
  32.     @Override
  33.     public void passwordFull(String password) {
  34.         Toast.makeText(this, "密码填充完毕:" + password, Toast.LENGTH_SHORT).show();
  35.     }
  36. }
复制代码



源码下载:
http://code.662p.com/view/15999.html




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

x

新浪微博达人勋

高级会员

1802

积分

601

威望

0

金钱

Rank: 6Rank: 6

积分
1802
发表于 2017-12-29 18:01:32 | 显示全部楼层
我也顶起出售广告位
发表于 2018-1-2 10:29:17 | 显示全部楼层
定一点先

新浪微博达人勋

注册会员

66

积分

22

威望

0

金钱

Rank: 2

积分
66
发表于 2018-2-8 21:52:20 | 显示全部楼层
广告位,,坐下看看

新浪微博达人勋

注册会员

138

积分

43

威望

1

金钱

Rank: 2

积分
138
发表于 2018-2-10 02:10:40 | 显示全部楼层
有空一起交流一下
发表于 2018-2-15 03:34:36 | 显示全部楼层
跟随,看看先
发表于 2018-2-22 01:50:46 | 显示全部楼层
支持楼主,用户楼主,楼主英明呀!!!

新浪微博达人勋

注册会员

69

积分

23

威望

0

金钱

Rank: 2

积分
69
发表于 2018-3-20 17:08:07 | 显示全部楼层
楼主呀,,,您太有才了。。。
发表于 2018-3-20 20:11:25 | 显示全部楼层
确实不错,顶先
发表于 2018-4-10 12:25:42 | 显示全部楼层
一直在看
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

Archiver|手机版|小黑屋|安卓教程网 ( 粤ICP备12089784号  

GMT+8, 2018-5-22 22:03 , Processed in 0.645888 second(s), 57 queries .

Powered by Discuz X3.1

© 2001-2013 IOS教程网

快速回复 返回顶部 返回列表