超实用！Android-PickerView自定义布局与样式全攻略

原创 于 2025-09-10 19:51:39 发布 · 392 阅读 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

超实用！Android-PickerView自定义布局与样式全攻略

【免费下载链接】Android-PickerView This is a picker view for android , support linkage effect, timepicker and optionspicker.（时间选择器、省市区三级联动） 【免费下载链接】Android-PickerView 项目地址: https://gitcode.com/gh_mirrors/an/Android-PickerView

你还在为App中的选择器样式千篇一律而烦恼？还在为自定义选择器布局需要重写大量代码而头疼？本文将带你全面掌握Android-PickerView的自定义布局与样式配置技巧，让你的选择器既美观又实用，轻松实现产品经理的各种奇葩需求！

读完本文你将学会：

  • 使用OptionsPickerBuilder构建个性化选择器
  • 自定义布局文件实现独特UI效果
  • 修改滚轮样式、颜色和间距
  • 实现三级联动与非联动选择
  • 处理选择器交互事件

为什么选择Android-PickerView

Android-PickerView是一款功能强大的选择器控件，支持时间选择器（TimePickerView）和选项选择器（OptionsPickerView），具有以下优势：

  • 支持三级联动选择，满足省市区选择等复杂场景
  • 提供丰富的样式配置接口，无需自定义View
  • 内置多种布局样式，也支持完全自定义布局
  • 支持对话框模式和嵌入布局两种显示方式
  • 轻量级设计，性能优秀

项目核心代码位于：pickerview/src/main/java/com/bigkoo/pickerview/

基础样式配置

Android-PickerView提供了OptionsPickerBuilder类，通过链式调用可以轻松配置选择器的各种样式。以下是一些常用的样式配置方法：

pvOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
    @Override
    public void onOptionsSelect(int options1, int options2, int options3, View v) {
        // 选择回调处理
    }
})
.setTitleText("城市选择") // 设置标题文字
.setContentTextSize(20) // 设置滚轮文字大小
.setDividerColor(Color.LTGRAY) // 设置分割线颜色
.setSelectOptions(0, 1) // 设置默认选中项
.setBgColor(Color.WHITE) // 设置滚轮背景色
.setTitleBgColor(Color.DKGRAY) // 设置标题背景色
.setTitleColor(Color.WHITE) // 设置标题文字颜色
.setCancelColor(Color.YELLOW) // 设置取消按钮颜色
.setSubmitColor(Color.YELLOW) // 设置确认按钮颜色
.setTextColorCenter(Color.BLACK) // 设置选中项文字颜色
.isRestoreItem(true) // 切换时是否还原第一项
.isCenterLabel(false) // 是否只显示中间选中项的label文字
.setLabels("省", "市", "区") // 设置选择的三级单位
.build();

上述代码演示了如何配置一个城市选择器的基本样式。通过OptionsPickerBuilder，我们可以设置标题、文字大小、颜色、分割线等各种视觉元素。完整的配置选项可以查看OptionsPickerBuilder.java

自定义布局实现

当内置样式无法满足需求时，Android-PickerView允许我们通过自定义布局文件来实现完全个性化的UI。下面以一个自定义选项选择器为例，介绍实现步骤：

1. 创建自定义布局文件

首先，在res/layout目录下创建自定义布局文件pickerview_custom_options.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- 标题栏部分 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#EEEEEE">
        <!-- 取消按钮 -->
        <ImageView
            android:id="@+id/iv_cancel"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="17dp"
            android:padding="8dp"
            android:src="@drawable/to_down" />
        <!-- 确认按钮 -->
        <TextView
            android:id="@+id/tv_finish"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="17dp"
            android:padding="8dp"
            android:text="完成"
            android:textColor="#24AD9D"
            android:textSize="18sp" />
    </RelativeLayout>

    <!-- 滚轮选择部分：注意id必须为optionspicker -->
    <LinearLayout
        android:id="@+id/optionspicker"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:minHeight="150dp"
        android:gravity="center"
        android:background="@android:color/white"
        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>

    <!-- 自定义底部按钮 -->
    <TextView
        android:id="@+id/tv_add"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#E5E9EC"
        android:gravity="center"
        android:text="+ 添加选项"
        android:textColor="#24AD9D"
        android:textSize="18sp" />
</LinearLayout>

自定义布局文件路径：app/src/main/res/layout/pickerview_custom_options.xml

2. 使用自定义布局

在代码中使用setLayoutRes方法指定自定义布局，并通过CustomListener处理自定义布局中的交互事件：

pvCustomOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
    @Override
    public void onOptionsSelect(int options1, int option2, int options3, View v) {
        // 选择回调处理
        String tx = cardItem.get(options1).getPickerViewText();
        btn_CustomOptions.setText(tx);
    }
})
.setLayoutRes(R.layout.pickerview_custom_options, new CustomListener() {
    @Override
    public void customLayout(View v) {
        // 自定义布局中控件的事件处理
        final TextView tvSubmit = v.findViewById(R.id.tv_finish);
        final TextView tvAdd = v.findViewById(R.id.tv_add);
        ImageView ivCancel = v.findViewById(R.id.iv_cancel);
        
        // 确认按钮点击事件
        tvSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pvCustomOptions.returnData();
                pvCustomOptions.dismiss();
            }
        });
        
        // 取消按钮点击事件
        ivCancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pvCustomOptions.dismiss();
            }
        });
        
        // 自定义添加按钮点击事件
        tvAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 添加新选项的逻辑
                getData();
                pvCustomOptions.setPicker(cardItem);
            }
        });
    }
})
.isDialog(true) // 是否显示为对话框模式
.setOutSideCancelable(false) // 点击外部是否可取消
.build();

// 设置数据源
pvCustomOptions.setPicker(cardItem);

以上代码演示了如何使用自定义布局创建一个带有"添加选项"功能的选择器。完整示例可参考MainActivity.java中的initCustomOptionPicker方法。

高级样式定制

滚轮样式定制

Android-PickerView提供了丰富的滚轮样式定制选项，包括文字大小、颜色、间距、分割线等：

// 设置滚轮样式
.setContentTextSize(18) // 设置滚轮文字大小
.setDividerColor(0xFF24AD9D) // 设置分割线颜色
.setDividerType(WheelView.DividerType.CIRCLE) // 设置分割线类型
.setTextColorCenter(Color.BLACK) // 设置选中项文字颜色
.setTextColorOut(Color.GRAY) // 设置未选中项文字颜色
.setLineSpacingMultiplier(1.2f) // 设置行间距倍数
.setItemVisibleCount(5) // 设置可见条目数量
.isAlphaGradient(true) // 设置是否透明度渐变

实现多级联动选择

Android-PickerView支持多级联动选择，特别适合省市区选择等场景。以下是实现三级联动的示例代码：

// 初始化三级联动数据
private void initJsonData() {
    String JsonData = new GetJsonDataUtil().getJson(this, "province.json");// 获取assets目录下的json文件数据
    options1Items = JsonBean.parseData(JsonData);// 解析数据

    for (int i = 0; i < options1Items.size(); i++) {// 遍历省份
        ArrayList<String> cityList = new ArrayList<>();// 该省的城市列表（第二级）
        ArrayList<ArrayList<String>> province_AreaList = new ArrayList<>();// 该省的所有地区列表（第三极）

        for (int c = 0; c < options1Items.get(i).getCityList().size(); c++) {// 遍历该省份的所有城市
            String cityName = options1Items.get(i).getCityList().get(c).getName();
            cityList.add(cityName);// 添加城市

            ArrayList<String> city_AreaList = new ArrayList<>();// 该城市的所有地区列表

            // 如果无地区数据，建议添加空字符串，防止数据为null导致三个选项长度不匹配造成崩溃
            if (options1Items.get(i).getCityList().get(c).getArea() == null 
                || options1Items.get(i).getCityList().get(c).getArea().size() == 0) {
                city_AreaList.add("");
            } else {
                city_AreaList.addAll(options1Items.get(i).getCityList().get(c).getArea());
            }
            province_AreaList.add(city_AreaList);// 添加该城市所有地区数据
        }
        
        // 添加城市数据
        options2Items.add(cityList);
        // 添加地区数据
        options3Items.add(province_AreaList);
    }
}

// 创建三级联动选择器
pvOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
    @Override
    public void onOptionsSelect(int options1, int options2, int options3, View v) {
        // 返回的分别是三个级别的选中位置
        String tx = options1Items.get(options1).getPickerViewText() + 
                   options2Items.get(options1).get(options2) +
                   options3Items.get(options1).get(options2).get(options3);
        tvOptions.setText(tx);
    }
})
.setPicker(options1Items, options2Items, options3Items)// 设置三级联动数据
.setLabels("省", "市", "区")// 设置选择的三级单位
.setLinkage(true)// 设置是否联动，默认true
.build();

完整的省市区联动示例可参考JsonDataActivity.java，数据文件位于province.json。

实际效果展示

下面是一些自定义布局和样式的实际效果展示：

自定义选项选择器

自定义选项选择器

该示例展示了一个自定义布局的选项选择器，底部添加了"添加加油卡"按钮，实现了动态添加选项的功能。完整代码可参考MainActivity.java中的initCustomOptionPicker方法。

时间选择器

时间选择器

时间选择器支持年月日时分秒等多种格式，可通过setType方法设置：

// 设置时间选择类型
.setType(new boolean[]{true, true, true, true, true, true})// 年月日时分秒
// 或者
.setType(new boolean[]{true, true, true, false, false, false})// 仅年月日

农历时间选择器

农历时间选择器

Android-PickerView还支持农历时间选择，通过setLunarCalendar方法切换：

// 公农历切换
cb_lunar.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        pvCustomLunar.setLunarCalendar(isChecked);
    }
});

完整示例可参考MainActivity.java中的initLunarPicker方法。

总结

通过本文的介绍，你已经掌握了Android-PickerView的自定义布局与样式配置技巧。无论是简单的样式修改还是复杂的布局定制，Android-PickerView都能满足你的需求。赶快在你的项目中尝试使用这些技巧，打造出与众不同的选择器吧！

如果你在使用过程中遇到任何问题，可以参考项目的官方文档README.md，或者查看示例代码MainActivity.java获取更多实现细节。

希望本文对你有所帮助，祝你的App开发之路一帆风顺！

【免费下载链接】Android-PickerView This is a picker view for android , support linkage effect, timepicker and optionspicker.（时间选择器、省市区三级联动） 【免费下载链接】Android-PickerView 项目地址: https://gitcode.com/gh_mirrors/an/Android-PickerView

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值