Custom imitation WeChat payment input password box style input box

Others 2022-04-27 15:00:43 views: 0

The effect diagram is as follows
Ideas: Embed textview in linearLayout to display numbers, cover a layer of transparent editText to monitor input events, when there is no input, the cursor can be displayed, and Changan is used to paste copied numbers. After the numbers are entered, the cursor disappears.

NumberEditText ： 

public class NumberEditText extends LinearLayout {

  /** Input box*/
  private TextView[] inputTv = new TextView[7];
  /** Used to accept keyboard input */
  private EditText invisibleEt;
  /** Input end monitor */
  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("");
  }

  /**
   * Handle from edittext to 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);
  }
}

The corresponding layout file is: 

<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; // middle description of 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);
    // set the mask transparency
    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);
    // child info
    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;
    }
  }
}

The corresponding layout file is: 

<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="activity code"
        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="Please complete the child's information first"
        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="Enter or paste the activity code to search for activities"/>
    </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="Confirm"
            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="Cancel"
            android:textColor="@color/lemon_primary_gray2"
            android:textSize="15sp"/>
    </LinearLayout>
</RelativeLayout>

Use: 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, "Activity code is:" + lemonDialog.getActivityCode(), Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}
Source code: https://github.com/FarmCoder007/myedittextnuminput

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325678731&siteId=291194637
Recommended
LFOSSA Yuanlaisusu Open Course | Mastering the Cloud Native Future: Comprehensive Guide to CNCF Certification and Exam Preparation Tips
Ranking
C++ Basic Syntax
bootstrapTable hides a column based on a condition
Why is reentrant lock recommended instead of Synchronized when dynamic high concurrency?
hexo create a blog
[Fully open source and non-encrypted version] Imitation of the eighth district distribution/online signature/multiple sets of download templates/APP distribution hosting/APP packaging and packaging
Polymerization combination
https://www.flysnow.org/2017/05/06/go-in-action-go-log.html
From the perspective of Flutter and the front-end, talk about how to ensure UI fluency under the single-threaded model
nginx-301, 302 redirect
Geolocation by IP Address in ASP.NET
Daily
More
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)

Code World

© 2018 codetd.com