preface

In the project, I needed a control to select the number of people, so I thought of NumberPicker. This control is not so popular. I used it for the first time, so I encountered some problems. Here is a summary.

text

First, let's look at the final effect:

NumberPicker.png

The requirement is actually very simple, that is, play a Dialog, select a number and click OK. I won't talk more about Dialog and these buttons. I'll mainly talk about how to use NumberPicker, mainly including the following points:

• Set content
• Set cycle status
• Settings are not editable
• Set listening
• Set split line color
• Set font color and size

First, set the content. If only the maximum and minimum values are set, only numbers will be displayed. If you want to display strings, you need to define an array yourself. Take the above effect as an example. Since there is a "10 +" in the display content, we can't just display numbers. We have to define an array ourselves:

    private String[] numbers = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "10+"};
    //Set the content array to be displayed
    numberPicker.setDisplayedValues(numbers);
    //Set maximum and minimum values
    numberPicker.setMinValue(1);
    numberPicker.setMaxValue(numbers.length);
    //Set default location
    numberPicker.setValue(1);

To set circular display, note that the setWrapSelectorWheel method must be called after the above code.

    //It is set here as no circular display, and the default value is true
    numberPicker.setWrapSelectorWheel(false);

NumberPicker can be edited by default, as follows:

Editable status.png

So we need to add a line of code to make NumberPicker uneditable:

    //Settings are not editable
    numberPicker.setDescendantFocusability(NumberPicker.FOCUS_BLOCK_DESCENDANTS);

This basically works. Now we need to set monitoring on it to get the selection result:

    numberPicker.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() {
        @Override
        public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
            //Get selection results
        }
    });

The next operation may be a little troublesome. Let's take a look at how to set the color of the split line. Here we use the reflection method:

    private void setNumberPickerDividerColor(NumberPicker numberPicker) {
        Field[] pickerFields = NumberPicker.class.getDeclaredFields();
        for (Field pf : pickerFields) {
            if (pf.getName().equals("mSelectionDivider")) {
                pf.setAccessible(true);
                try {
                    //Sets the color value of the split line
                    pf.set(numberPicker, new ColorDrawable(getResources().getColor(R.color.numberpicker_divider_color)));
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
                break;
            }
        }
    }

Finally, let's take a look at how to modify the font color and size and create a new class to inherit NumberPicker:

public class TextConfigNumberPicker extends NumberPicker {

    public TextConfigNumberPicker(Context context) {
        super(context);
    }

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

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

    @Override
    public void addView(View child) {
        super.addView(child);
        updateView(child);
    }

    @Override
    public void addView(View child, ViewGroup.LayoutParams params) {
        super.addView(child, params);
        updateView(child);
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        super.addView(child, index, params);
        updateView(child);
    }

    private void updateView(View view) {
        if (view instanceof EditText) {
            //Sets the color and size of the text
            ((EditText) view).setTextColor(getResources().getColor(R.color.black));
            ((EditText) view).setTextSize(16);
        }
    }
}

epilogue

Well, that's all for the basic usage and frequently asked questions of NumberPicker. I hope it will be helpful to you. If you have any questions, please correct them.

Author: example wave
Link: https://www.jianshu.com/p/1042995703ad
Source: Jianshu
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.