Android组合多个NumberPicker实现整体数字效果及样式优化

一、调整布局为密码锁式规整对齐 #

XML布局实现 #

用横向LinearLayout作为容器，设置gravity="center"让内部控件整体居中，给每个NumberPicker设置固定宽度、居中属性，再添加分隔线强化密码锁的视觉分割感：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="16dp">

    <NumberPicker
        android:id="@+id/np_digit1"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginHorizontal="4dp"
        android:descendantFocusability="blocksDescendants"/>

    <!-- 数字分隔线 -->
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/black"/>

    <NumberPicker
        android:id="@+id/np_digit2"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginHorizontal="4dp"
        android:descendantFocusability="blocksDescendants"/>

    <!-- 按需添加更多NumberPicker和分隔线 -->
</LinearLayout>

代码优化样式（可选） #

如果要去掉默认上下箭头、调整数字大小，可在Java代码中设置：

NumberPicker npDigit1 = findViewById(R.id.np_digit1);
// 固定数字范围为0-9
npDigit1.setMinValue(0);
npDigit1.setMaxValue(9);
npDigit1.setDisplayedValues(new String[]{"0","1","2","3","4","5","6","7","8","9"});
// 放大数字字号
npDigit1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 24);

// 隐藏默认分割线（兼容高低版本）
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    npDigit1.setDividerColor(Color.TRANSPARENT);
} else {
    try {
        Field dividerField = NumberPicker.class.getDeclaredField("mSelectionDivider");
        dividerField.setAccessible(true);
        dividerField.set(npDigit1, null);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

二、实现统一的 onChange 事件监听 #

1. 封装数字组合逻辑 #

先写一个方法，把所有NumberPicker的数值拼接成完整数字：

private int getCombinedNumber() {
    NumberPicker np1 = findViewById(R.id.np_digit1);
    NumberPicker np2 = findViewById(R.id.np_digit2);
    // 三位数则是 np1.getValue()*100 + np2.getValue()*10 + np3.getValue()，以此类推
    return np1.getValue() * 10 + np2.getValue();
}

2. 绑定统一监听器 #

创建一个通用的OnValueChangeListener实例，给所有NumberPicker绑定同一个监听器，触发时统一处理逻辑：

NumberPicker.OnValueChangeListener unifiedListener = new NumberPicker.OnValueChangeListener() {
    @Override
    public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
        int fullNumber = getCombinedNumber();
        // 这里写统一的业务逻辑，比如更新UI、提交数据等
        Log.d("FullNumber", "当前组合数字：" + fullNumber);
    }
};

// 给所有选择器绑定同一个监听器
findViewById(R.id.np_digit1).setOnValueChangeListener(unifiedListener);
findViewById(R.id.np_digit2).setOnValueChangeListener(unifiedListener);

进阶：封装自定义View（复用场景） #

如果需要在多个页面使用这个组合控件，可以自定义CombinedNumberPicker，内部管理所有子选择器，对外暴露统一回调：

public class CombinedNumberPicker extends LinearLayout {
    private List<NumberPicker> pickers = new ArrayList<>();
    private OnCombinedChangeListener changeListener;

    public CombinedNumberPicker(Context context) {
        super(context);
        init(context);
    }

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

    private void init(Context context) {
        setOrientation(HORIZONTAL);
        setGravity(CENTER);
        // 示例创建4位数字选择器
        for (int i = 0; i < 4; i++) {
            NumberPicker np = new NumberPicker(context);
            np.setMinValue(0);
            np.setMaxValue(9);
            np.setDisplayedValues(new String[]{"0","1","2","3","4","5","6","7","8","9"});
            np.setLayoutParams(new LayoutParams(60, LayoutParams.WRAP_CONTENT));
            np.setGravity(CENTER);
            np.setOnValueChangeListener((picker, oldVal, newVal) -> {
                if (changeListener != null) {
                    changeListener.onNumberChange(getCombinedNumber());
                }
            });
            pickers.add(np);
            addView(np);
            // 最后一个选择器不加分隔线
            if (i != 3) {
                View divider = new View(context);
                divider.setLayoutParams(new LayoutParams(1, LayoutParams.MATCH_PARENT));
                divider.setBackgroundColor(Color.BLACK);
                addView(divider);
            }
        }
    }

    private int getCombinedNumber() {
        int result = 0;
        for (int i = 0; i < pickers.size(); i++) {
            result += pickers.get(i).getValue() * Math.pow(10, pickers.size() - 1 - i);
        }
        return result;
    }

    public void setOnCombinedChangeListener(OnCombinedChangeListener listener) {
        this.changeListener = listener;
    }

    public interface OnCombinedChangeListener {
        void onNumberChange(int combinedNumber);
    }
}

XML中直接使用：

<com.yourpackage.CombinedNumberPicker
    android:id="@+id/combined_picker"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

Activity中绑定回调：

CombinedNumberPicker picker = findViewById(R.id.combined_picker);
picker.setOnCombinedChangeListener(fullNumber -> {
    // 处理统一的数字变化事件
});

内容的提问来源于stack exchange，提问作者LaCalienta