Question

我是Android新手，我有以下要求。

请让我知道这是可行的。

最初EditText将包含6个空圆圈。当用户点击第一个数字时，圆圈填充如下图所示。当用户点击退格键时，圆圈变空。

任何链接或示例或代码示例都会有所帮助。

Answer 1

以下是解决我的问题的代码。来自@Booger和@Muthuraj的链接为构建此代码提供了很多帮助

MainActivity.java文件

package com.app.xyz.activity;

import android.app.Service;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build; 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.app.xyz.R;

public class MainActivity extends AppCompatActivity implements View.OnFocusChangeListener, View.OnKeyListener, TextWatcher {

private static final String TAG = "[MainActivity]";

TextView tvHello, tv_one, tv_two, tv_three, tv_four, tv_five, tv_six;

private EditText mPinFirstDigitEditText;
private EditText mPinSecondDigitEditText;
private EditText mPinThirdDigitEditText;
private EditText mPinForthDigitEditText;
private EditText mPinFifthDigitEditText;
private EditText mPinSixthDigitEditText;

private EditText mPinHiddenEditText;
@Override
public void afterTextChanged(Editable s) {
}

@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}

/**
 * Hides soft keyboard.
 *
 * @param editText EditText which has focus
 */
public void hideSoftKeyboard(EditText editText) {
    if (editText == null)
        return;

    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE);
    imm.hideSoftInputFromWindow(editText.getWindowToken(), 0);
}



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(new MainLayout(this, null));

    init();

    setPINListeners();

}

/**
 * Initialize EditText fields.
 */
private void init() {

    tvHello = (TextView) findViewById(R.id.tvHello);

    tv_one = (TextView) findViewById(R.id.tv_three);

    tv_two = (TextView) findViewById(R.id.tv_four);

    tv_three = (TextView) findViewById(R.id.tv_five);

    tv_four = (TextView) findViewById(R.id.tv_six);

    tv_five = (TextView) findViewById(R.id.tv_seven);

    tv_six = (TextView) findViewById(R.id.tv_eight);





    mPinFirstDigitEditText = (EditText) findViewById(R.id.pin_first_edittext);
    mPinSecondDigitEditText = (EditText) findViewById(R.id.pin_second_edittext);
    mPinThirdDigitEditText = (EditText) findViewById(R.id.pin_third_edittext);
    mPinForthDigitEditText = (EditText) findViewById(R.id.pin_forth_edittext);
    mPinFifthDigitEditText = (EditText) findViewById(R.id.pin_fifth_edittext);
    mPinSixthDigitEditText = (EditText) findViewById(R.id.pin_sixth_edittext);
    mPinHiddenEditText = (EditText) findViewById(R.id.pin_hidden_edittext);
    getWindow().setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);

    mPinHiddenEditText.requestFocus();
    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE);
    imm.showSoftInput(mPinHiddenEditText, InputMethodManager.SHOW_FORCED);



}


@Override
public void onFocusChange(View v, boolean hasFocus) {
    final int id = v.getId();
    switch (id) {
        case R.id.pin_first_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_second_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_third_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_forth_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_fifth_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        case R.id.pin_sixth_edittext:
            if (hasFocus) {
                setFocus(mPinHiddenEditText);
                showSoftKeyboard(mPinHiddenEditText);
            }
            break;

        default:
            break;
    }
}

@Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
    if (event.getAction() == KeyEvent.ACTION_DOWN) {
        final int id = v.getId();

        Log.e(TAG, "======================================");

        Log.d(TAG, "mPinHiddenEditText===>"+mPinHiddenEditText.getText());
        Log.d(TAG, "mPinHiddenEditText.getText().length()===>"+mPinHiddenEditText.getText().length());


        switch (id) {
            case R.id.pin_hidden_edittext:
                if (keyCode == KeyEvent.KEYCODE_DEL) {
                    if (mPinHiddenEditText.getText().length() == 6) {
                        mPinSixthDigitEditText.setText("");

                    }
                    else if (mPinHiddenEditText.getText().length() == 5) {
                        mPinFifthDigitEditText.setText("");
                    }
                    else if (mPinHiddenEditText.getText().length() == 4) {
                        mPinForthDigitEditText.setText("");
                    }
                    else if (mPinHiddenEditText.getText().length() == 3) {
                        mPinThirdDigitEditText.setText("");
                    }
                    else if (mPinHiddenEditText.getText().length() == 2) {
                        mPinSecondDigitEditText.setText("");
                    }

                    else if (mPinHiddenEditText.getText().length() == 1) {
                        mPinFirstDigitEditText.setText("");
                    }


                    if (mPinHiddenEditText.length() > 0)
                        mPinHiddenEditText.setText(mPinHiddenEditText.getText().subSequence(0, mPinHiddenEditText.getText().length() - 1));

                    Log.d(TAG, "hidden====>"+mPinHiddenEditText.getText());
                    Log.e(TAG, "======================================");

                    return true;
                }

                break;

            default:
                return false;
        }
    }

    return false;
}

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

    Log.d(TAG, "s.length()===>"+s.length());
    Log.d(TAG, "count===>"+count);
    Log.d(TAG, "s===>"+s.toString());

    if (s.length() == 0) {
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);


    } else if (s.length() == 1) {
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);

        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 2) {
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);


    } else if (s.length() == 3) {
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 4) {
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 5) {
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_panorama_fish_eye_black_24dp);



    } else if (s.length() == 6) {
        mPinSixthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFifthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinForthDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinThirdDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinSecondDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);
        mPinFirstDigitEditText.setBackgroundResource(R.drawable.ic_lens_black_24dp);


    }
}

/**
 * Sets default PIN background.
 *
 * @param editText edit text to change
 */
private void setDefaultPinBackground(EditText editText) {
    setViewBackground(editText, getResources().getDrawable(R.drawable.ic_panorama_fish_eye_black_24dp));
}

/**
 * Sets focus on a specific EditText field.
 *
 * @param editText EditText to set focus on
 */
public static void setFocus(EditText editText) {
    if (editText == null)
        return;



    editText.setFocusable(true);
    editText.setFocusableInTouchMode(true);
    editText.requestFocus();
}



/**
 * Sets listeners for EditText fields.
 */
private void setPINListeners() {

    mPinHiddenEditText.addTextChangedListener(this);

    mPinFirstDigitEditText.setOnFocusChangeListener(this);
    mPinSecondDigitEditText.setOnFocusChangeListener(this);
    mPinThirdDigitEditText.setOnFocusChangeListener(this);
    mPinForthDigitEditText.setOnFocusChangeListener(this);
    mPinFifthDigitEditText.setOnFocusChangeListener(this);
    mPinSixthDigitEditText.setOnFocusChangeListener(this);

    mPinFirstDigitEditText.setOnKeyListener(this);
    mPinSecondDigitEditText.setOnKeyListener(this);
    mPinThirdDigitEditText.setOnKeyListener(this);
    mPinForthDigitEditText.setOnKeyListener(this);
    mPinFifthDigitEditText.setOnKeyListener(this);
    mPinSixthDigitEditText.setOnKeyListener(this);

    mPinHiddenEditText.setOnKeyListener(this);
}

/**
 * Sets background of the view.
 * This method varies in implementation depending on Android SDK version.
 *
 * @param view       View to which set background
 * @param background Background to set to view
 */
@SuppressWarnings("deprecation")
public void setViewBackground(View view, Drawable background) {
    if (view == null || background == null)
        return;

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        view.setBackground(background);
    } else {
        view.setBackgroundDrawable(background);
    }
}

/**
 * Shows soft keyboard.
 *
 * @param editText EditText which has focus
 */
public void showSoftKeyboard(EditText editText) {
    Log.d(TAG,"showSoftKeyboard"+editText.getText());
    if (editText == null)
        return;


    InputMethodManager imm = (InputMethodManager) getSystemService(Service.INPUT_METHOD_SERVICE);
    imm.showSoftInput(editText, InputMethodManager.SHOW_IMPLICIT);


}

/**
 * Custom LinearLayout with overridden onMeasure() method
 * for handling software keyboard show and hide events.
 */
public class MainLayout extends LinearLayout {

    public MainLayout(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        inflater.inflate(R.layout.activity_main, this);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int proposedHeight = MeasureSpec.getSize(heightMeasureSpec);
        final int actualHeight = getHeight();

        Log.d("TAG", "proposed: " + proposedHeight + ", actual: " + actualHeight);

        if (actualHeight >= proposedHeight) {

        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
  }


}

activity_main.xml中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pin_content_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:padding="15dp"
android:layout_alignParentBottom="true">



<LinearLayout
    android:id="@+id/pin_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="35dp"

    android:orientation="horizontal">

    <EditText
        android:id="@+id/pin_first_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"
        />

    <EditText
        android:id="@+id/pin_second_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"

        />

    <EditText
        android:id="@+id/pin_third_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"

        />

    <EditText
        android:id="@+id/pin_forth_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"

        />

    <EditText
        android:id="@+id/pin_fifth_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"
        />

    <EditText
        android:id="@+id/pin_sixth_edittext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@drawable/ic_panorama_fish_eye_black_24dp"
        />
</LinearLayout>

<EditText
    android:id="@+id/pin_hidden_edittext"
    android:layout_width="1dp"
    android:layout_height="1dp"
    android:gravity="center_horizontal"
    android:layout_gravity="center_horizontal"
    android:background="@null"
    android:inputType="number|numberPassword"
    android:maxLength="6"
    android:textColor="#00000000"
    />


 </LinearLayout>

我使用了drawables来填充（ic_lens_black_24dp）和空（ic_panorama_fish_eye_black_24dp）圈子。

Answer 2

这很简单，您只需为每个数字按钮创建一个onClickListener，并跟踪填充的点数。然后，对于每个点击事件，您将更改要填充的点（要清楚，这些点将是2个drawable，一个填充，另一个没有填充，你将切换背景drawable适当）。

最重要的是，这是一件非常简单的事情，因此可能没有一个库可以做到这一点。

https://developer.android.com/reference/android/view/View.OnClickListener.html

Answer 3

使用TextWatcher。在onTextChanged中获取输入文本的长度并相应地为圆圈着色。要填充颜色，请将圆圈放在ImageView数组中，以便您可以轻松操作它们。

在Edittext中添加图像，并在用户输入时将其替换为另一个图像

3 个答案: