自定义仿微信支付输入密码方框样式输入框

于 2018-04-17 15:00:49 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuwb123xuwb/article/details/79974613
版权

效果图如下
思路： linearLayout里嵌入textview用于显示数字     上盖一层透明的editText 监听输入事件，当没输入时  光标可显示 ，长安用于粘贴复制过的数字    输入后数字后  光标消失。

NumberEditText ： 

public class NumberEditText extends LinearLayout {

  /** 输入框 */
  private TextView[] inputTv = new TextView[7];
  /** 用于接受键盘输入内容 */
  private EditText invisibleEt;
  /** 输入结束监听 */
  private OnInputFinishListener onInputFinishListener;

  public NumberEditText(Context context) {
    super(context);
    createView(context);
  }

  public NumberEditText(Context context, AttributeSet attrs) {
    super(context, attrs);
    createView(context);
  }

  public NumberEditText(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    createView(context);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public NumberEditText(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    createView(context);
  }

  private void createView(Context context) {
    View view = LayoutInflater.from(context).inflate(R.layout.lemon_number_edittext, null);
    inputTv[0] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv0);
    inputTv[1] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv1);
    inputTv[2] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv2);
    inputTv[3] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv3);
    inputTv[4] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv4);
    inputTv[5] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv5);
    inputTv[6] = (TextView) view.findViewById(R.id.lemon_number_edittext_tv6);
    invisibleEt = (EditText) view.findViewById(R.id.lemon_number_edittext_et);
    invisibleEt.addTextChangedListener(new InvisibleEtTextWatcher());
    addView(view);
  }

  public void setOnInputFinish(OnInputFinishListener listener) {
    this.onInputFinishListener = listener;
  }

  public void clearText() {
    int tvLength = inputTv.length;
    for (int i = 0; i < tvLength; i++) {
      inputTv[i].setText("");
    }
    invisibleEt.setText("");
  }

  /**
   * 处理从edittext到textview
   */
  private class InvisibleEtTextWatcher implements TextWatcher {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {}

    @Override
    public void afterTextChanged(Editable s) {
      String text = s.toString().trim();
      char[] chars = text.toCharArray();
      int length = chars.length;
      if (length > 0) {
        invisibleEt.setCursorVisible(false);
      } else {
        invisibleEt.setCursorVisible(true);
      }
      int tvLength = inputTv.length;
      for (int i = 0; i < tvLength; i++) {
        if (i < length) {
          inputTv[i].setText("" + chars[i]);
        } else {
          inputTv[i].setText("");
        }
      }
      if (onInputFinishListener != null) {
        onInputFinishListener.onInputFinish(text);
      }
    }
  }

  public interface OnInputFinishListener {
    void onInputFinish(String text);
  }
}

对应布局文件为： 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/lemon_number_edittext_rootlayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/lemon_number_edittext_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/lemon_number_edittext_tv0"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"/>

        <TextView
            android:id="@+id/lemon_number_edittext_tv1"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/lemon_number_edittext_tv2"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/lemon_number_edittext_tv3"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/lemon_number_edittext_tv4"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/lemon_number_edittext_tv5"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"
            android:layout_marginLeft="5dp"/>
        <TextView
            android:id="@+id/lemon_number_edittext_tv6"
            style="@style/lemon_number_edittext_text"
            android:layout_width="@dimen/lemon_number_text_width"
            android:layout_height="@dimen/lemon_number_text_width"
            android:layout_marginLeft="5dp"/>
    </LinearLayout>

    <EditText
        android:id="@+id/lemon_number_edittext_et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/lemon_number_edittext_layout"
        android:layout_alignLeft="@id/lemon_number_edittext_layout"
        android:layout_alignRight="@id/lemon_number_edittext_layout"
        android:layout_alignTop="@id/lemon_number_edittext_layout"
        android:background="@android:color/transparent"
        android:inputType="number"
        android:paddingLeft="2dp"
        android:cursorVisible="true"
        android:textCursorDrawable="@drawable/cursor_purl"
        android:maxLength="7"
        android:textColor="@android:color/transparent"
        android:textColorHint="@android:color/transparent"/>
</RelativeLayout>

Dialog： 

public class LemonDialog extends Dialog implements View.OnClickListener {
  private Context mContext;
  private NumberEditText active_code_edit;
  private TextView dialogTitle, tv_cancel, tv_sure;
  private TextView dialogDescribe; // dialog中间描述
  private ConfirmClickListener mConfirmClickListener;
  private String type;
  private String desString, sureText, cancelText, titleText;
  private LinearLayout ll_active_code_layout;
  private String currentActiveCode;

  public enum dialogTypes {
    ACTIVITYCODE, CHILDEINFO, UPDATAAPK
  }

  public LemonDialog(@NonNull Context context, String type) {
    super(context);
    this.mContext = context;
    this.type = type;
  }

  public interface ConfirmClickListener {
    void confirmClick();
  }

  public void setConfirmClickListener(ConfirmClickListener mConfirmClickListener) {
    this.mConfirmClickListener = mConfirmClickListener;
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.new_lemon_dialog);
    // 设置遮罩透明度
    WindowManager.LayoutParams params = getWindow().getAttributes();
    params.dimAmount = 0.7f;
    getWindow().setAttributes(params);
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
    initView();
  }

  private void initView() {
    tv_cancel = (TextView) findViewById(R.id.tv_cancel);
    tv_sure = (TextView) findViewById(R.id.tv_sure);
    tv_cancel.setOnClickListener(this);
    tv_sure.setOnClickListener(this);
    active_code_edit = (NumberEditText) findViewById(R.id.active_code_edit);
    ll_active_code_layout = (LinearLayout) findViewById(R.id.ll_active_code_layout);
    dialogTitle = (TextView) findViewById(R.id.tv_title);
    dialogDescribe = (TextView) findViewById(R.id.tv_lemon_dialog_describe);
    // 孩子信息
    if (dialogTypes.CHILDEINFO.name().equals(type)) {
      ViewUtils.setVisibility(ll_active_code_layout, View.GONE);
      ViewUtils.setVisibility(dialogDescribe, View.VISIBLE);
    } else if (dialogTypes.UPDATAAPK.name().equals(type)) { // 升级dialog
      ViewUtils.setVisibility(ll_active_code_layout, View.GONE);
      ViewUtils.setVisibility(dialogDescribe, View.VISIBLE);
      dialogDescribe.setText(desString);
    } else if (dialogTypes.ACTIVITYCODE.name().equals(type)) { // 活动码
      ViewUtils.setVisibility(ll_active_code_layout, View.VISIBLE);
      ViewUtils.setVisibility(dialogDescribe, View.GONE);
      active_code_edit.setOnInputFinish(new NumberEditText.OnInputFinishListener() {
        @Override
        public void onInputFinish(String text) {
          currentActiveCode = text;
        }
      });
    }
    if (!TextUtils.isEmpty(sureText)) {
      tv_sure.setText(sureText);
    }
    if (!TextUtils.isEmpty(cancelText)) {
      tv_cancel.setText(cancelText);
    }
    if (!TextUtils.isEmpty(titleText)) {
      dialogTitle.setText(titleText);
    }
  }

  public String getActivityCode() {
    return currentActiveCode;
  }

  public void clearActiveCode() {
    active_code_edit.clearText();
  }

  public void setTitle(String title) {
    titleText = title;
  }

  public void setSureText(String sureText) {
    this.sureText = sureText;
  }

  public void setCancelText(String cancelText) {
    this.cancelText = cancelText;
  }

  public void setDescribeText(String desText) {
    desString = desText;
  }

  @Override
  public void onClick(View view) {
    switch (view.getId()) {
      case R.id.tv_cancel:
        dismiss();
        break;
      case R.id.tv_sure:
        mConfirmClickListener.confirmClick();
        dismiss();
        break;
    }
  }
}

对应布局文件为： 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="280dp"
                android:layout_height="200dp"
                android:background="@drawable/lemon_dialog_bg">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="13dp"
        android:gravity="center"
        android:text="活动码"
        android:textColor="@color/lemon_primary_green"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/tv_line"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_below="@+id/tv_title"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:background="@color/lemon_primary_green"/>

    <TextView
        android:id="@+id/tv_lemon_dialog_describe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_title"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:textSize="18sp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="请先完善孩子信息"
        android:textColor="@color/lemon_primary_black"
        android:visibility="gone"/>
    <LinearLayout
        android:id="@+id/ll_active_code_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true">
        <com.example.wbxu.myedittextnuminput.NumberEditText
            android:layout_marginTop="19dp"
            android:layout_marginBottom="12dp"
            android:layout_gravity="center_horizontal"
            android:id="@+id/active_code_edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </com.example.wbxu.myedittextnuminput.NumberEditText>
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center_horizontal"
           android:textColor="@color/lemon_primary_gray1"
           android:text="输入或粘贴活动码搜索活动"/>
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_above="@+id/ll_bootom"
        android:background="@color/lemon_primary_gray3"/>

    <LinearLayout
        android:id="@+id/ll_bootom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/tv_sure"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="确认"
            android:textColor="@color/lemon_primary_green"
            android:textSize="15sp"/>
        <TextView
            android:layout_width="0.5dp"
            android:layout_height="match_parent"
            android:background="@color/lemon_primary_gray3"/>
        <TextView
            android:id="@+id/tv_cancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:text="取消"
            android:textColor="@color/lemon_primary_gray2"
            android:textSize="15sp"/>
    </LinearLayout>
</RelativeLayout>

使用： MainActivity： 

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void click(View view) {
        final LemonDialog lemonDialog = new LemonDialog(this, LemonDialog.dialogTypes.ACTIVITYCODE.name());
        lemonDialog.show();
        lemonDialog.setConfirmClickListener(new LemonDialog.ConfirmClickListener() {
            @Override
            public void confirmClick() {
                if (!TextUtils.isEmpty(lemonDialog.getActivityCode())) {
                    Toast.makeText(MainActivity.this, "活动码为：" + lemonDialog.getActivityCode(), Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}
源码：https://github.com/FarmCoder007/myedittextnuminput
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值