告别单调选择框：Android-PickerView 自定义选中效果全攻略
项目地址: https://gitcode.com/gh_mirrors/an/Android-PickerView 你是否还在为App中默认选择框的呆板样式发愁？用户滑动选择时总是看不清当前选中项？本文将带你从零开始，通过3个实战案例掌握Android-PickerView的选中效果定制技巧，让你的选择器既美观又易用。读完本文，你将能够：定制选中项的颜色与字体、修改分割线样式、实现渐变效果，以及解决常见的视觉交互问题。
了解选择器的核心结构
Android-PickerView的核心组件是WheelView（滚轮视图），它负责渲染选择列表和处理选中状态。在布局文件中，通常以三级联动的形式出现：
pickerview/src/main/res/layout/pickerview_options.xml
<LinearLayout
android:id="@+id/optionspicker"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.contrarywind.view.WheelView
android:id="@+id/options1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<com.contrarywind.view.WheelView
android:id="@+id/options2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<com.contrarywind.view.WheelView
android:id="@+id/options3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
每个WheelView通过WheelOptions类进行控制，该类提供了设置文本颜色、分割线样式等视觉属性的方法：
pickerview/src/main/java/com/bigkoo/pickerview/view/WheelOptions.java
// 设置选中项文本颜色
public void setTextColorCenter(int textColorCenter) {
wv_option1.setTextColorCenter(textColorCenter);
wv_option2.setTextColorCenter(textColorCenter);
wv_option3.setTextColorCenter(textColorCenter);
}
// 设置分割线颜色
public void setDividerColor(int dividerColor) {
wv_option1.setDividerColor(dividerColor);
wv_option2.setDividerColor(dividerColor);
wv_option3.setDividerColor(dividerColor);
}
下面是默认选择器的显示效果，注意中间选中区域的样式特点：
基础定制：修改颜色与字体
案例1：实现红色高亮选中效果
最常见的定制需求是修改选中项的颜色。通过setTextColorCenter()方法可以轻松实现：
OptionsPickerView pvOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int options2, int options3, View v) {
// 选择回调
}
})
.setSubmitText("确定")
.setCancelText("取消")
// 设置选中项文本颜色为红色
.setTextColorCenter(Color.RED)
// 设置未选中项文本颜色为灰色
.setTextColorOut(Color.GRAY)
.build();
案例2：使用粗体突出选中项
除了颜色，还可以通过设置字体样式来突出选中项。WheelView类提供了setTypeface()方法：
wheelview/src/main/java/com/contrarywind/view/WheelView.java
public final void setTypeface(Typeface font) {
typeface = font;
paintOuterText.setTypeface(typeface);
paintCenterText.setTypeface(typeface);
}
应用加粗字体的代码示例：
// 获取系统粗体字体
Typeface boldTypeface = Typeface.defaultFromStyle(Typeface.BOLD);
// 设置给选择器
pvOptions.getPickerOptions().wheelOptions.setTypeface(boldTypeface);
进阶定制：分割线与背景样式
修改分割线样式
WheelOptions类提供了多种分割线样式的设置方法，包括颜色、宽度和类型：
pickerview/src/main/java/com/bigkoo/pickerview/view/WheelOptions.java
// 设置分割线类型（FILL:填充整个宽度，WRAP:包裹内容宽度，CIRCLE:圆形）
public void setDividerType(WheelView.DividerType dividerType) {
wv_option1.setDividerType(dividerType);
wv_option2.setDividerType(dividerType);
wv_option3.setDividerType(dividerType);
}
实现圆形分割线的代码示例：
pvOptions.getPickerOptions().wheelOptions.setDividerType(WheelView.DividerType.CIRCLE);
pvOptions.getPickerOptions().wheelOptions.setDividerColor(Color.BLUE);
pvOptions.getPickerOptions().wheelOptions.setDividerWidth(5);
添加选中项背景
要实现选中项背景效果，需要自定义WheelView的绘制逻辑。首先创建一个自定义WheelView子类，重写onDraw()方法：
public class CustomWheelView extends WheelView {
// 构造方法省略...
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 绘制选中项背景
if (selectedItem >= 0 && adapter != null) {
// 计算选中项位置并绘制背景矩形
float centerY = (firstLineY + secondLineY) / 2;
canvas.drawRect(0, firstLineY, getWidth(), secondLineY, bgPaint);
}
}
}
然后在布局文件中替换原有的WheelView：
<com.yourpackage.CustomWheelView
android:id="@+id/options1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
高级定制：动画与交互效果
实现透明度渐变效果
通过设置setAlphaGradient()方法，可以实现选中项向上下两端的透明度渐变效果：
pickerview/src/main/java/com/bigkoo/pickerview/view/WheelOptions.java
public void setAlphaGradient(boolean isAlphaGradient) {
wv_option1.setAlphaGradient(isAlphaGradient);
wv_option2.setAlphaGradient(isAlphaGradient);
wv_option3.setAlphaGradient(isAlphaGradient);
}
启用渐变效果的代码：
pvOptions.getPickerOptions().wheelOptions.setAlphaGradient(true);
效果对比：
- 普通效果：所有选项透明度一致
- 渐变效果：选中项完全不透明，上下选项逐渐透明
自定义选中动画
如果需要更复杂的选中动画，可以通过监听滚动事件实现。OnOptionsSelectChangeListener接口提供了选中项变化的回调：
pickerview/src/main/java/com/bigkoo/pickerview/listener/OnOptionsSelectChangeListener.java
public interface OnOptionsSelectChangeListener {
void onOptionsSelectChanged(int options1, int options2, int options3);
}
实现缩放动画的示例代码：
pvOptions.setOnOptionsSelectChangeListener(new OnOptionsSelectChangeListener() {
@Override
public void onOptionsSelectChanged(int options1, int options2, int options3) {
// 获取当前选中项的View
View itemView = getSelectedItemView(options1, options2, options3);
// 执行缩放动画
ValueAnimator animator = ValueAnimator.ofFloat(1.0f, 1.2f, 1.0f);
animator.setDuration(300);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float scale = (float) animation.getAnimatedValue();
itemView.setScaleX(scale);
itemView.setScaleY(scale);
}
});
animator.start();
}
});
实战案例：电商地址选择器
下面是一个综合案例，实现电商App中常见的地址选择器效果，包含省市区三级联动和自定义选中样式：
// 初始化选择器
OptionsPickerView addressPicker = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
@Override
public void onOptionsSelect(int options1, int options2, int options3, View v) {
String province = options1Items.get(options1).getPickerViewText();
String city = options2Items.get(options1).get(options2).getPickerViewText();
String district = options3Items.get(options1).get(options2).get(options3).getPickerViewText();
String address = province + city + district;
// 更新UI显示选中的地址
addressTextView.setText(address);
}
})
.setSubmitText("确认选择")
.setCancelText("取消")
.setTitleText("选择收货地址")
// 自定义选中效果
.setTextColorCenter(0xFFE53935) // 红色选中项
.setDividerColor(0xFFE0E0E0) // 灰色分割线
.setDividerType(WheelView.DividerType.WRAP) // 包裹内容的分割线
.setLineSpacingMultiplier(2.0f) // 增加行间距
.setTextSize(16) // 设置文字大小
.build();
// 加载地址数据
addressPicker.setPicker(options1Items, options2Items, options3Items);
// 显示选择器
addressPicker.show();
实现效果如下，注意选中项的红色文字和包裹内容的分割线样式：
常见问题解决方案
问题1：选中项颜色不生效
如果设置了setTextColorCenter()但没有效果，检查是否同时设置了全局样式覆盖了局部设置。解决方法是确保在Builder中设置的样式优先级最高：
// 正确的设置顺序：先设置全局样式，再设置具体属性
OptionsPickerView pvOptions = new OptionsPickerBuilder(this, listener)
.setStyleId(R.style.MyCustomPickerStyle) // 全局样式
.setTextColorCenter(Color.RED) // 具体属性，会覆盖样式中的设置
.build();
问题2：分割线显示异常
当设置DividerType.WRAP时分割线不显示，可能是因为文字宽度计算错误。可以通过setTextXOffset()调整文字偏移来解决：
pickerview/src/main/java/com/bigkoo/pickerview/view/WheelOptions.java
public void setTextXOffset(int x_offset_one, int x_offset_two, int x_offset_three) {
wv_option1.setTextXOffset(x_offset_one);
wv_option2.setTextXOffset(x_offset_two);
wv_option3.setTextXOffset(x_offset_three);
}
调整代码：
// 设置文字X轴偏移，为分割线留出空间
pvOptions.getPickerOptions().wheelOptions.setTextXOffset(10, 10, 10);
总结与扩展
通过本文介绍的方法，你已经掌握了Android-PickerView选中效果定制的核心技巧。这些技巧不仅适用于地址选择器，还可以应用到时间选择器、自定义选项选择器等场景。
pickerview/src/main/java/com/bigkoo/pickerview/view/TimePickerView.java
尝试将这些定制技巧应用到时间选择器，实现如下的农历选择效果：
记住，好的选择器设计应该平衡美观与易用性，选中效果既要醒目又不能过于刺眼。建议在实际开发中进行用户测试，根据反馈调整视觉效果，打造最佳的用户体验。
希望本文对你有所帮助，如果你有其他定制需求或发现新的技巧，欢迎在项目的Issues中分享交流。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
