电商App中的选择器革命：Android-PickerView实现商品分类与规格三级联动

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

你是否还在为电商App中商品规格选择的卡顿、联动不流畅而烦恼？用户是否经常因为选择器操作复杂而放弃购买？Android-PickerView为你带来解决方案。本文将详细介绍如何使用Android-PickerView实现商品分类与规格的三级联动，提升用户体验和开发效率。读完本文，你将能够快速集成联动选择器，解决商品规格选择难题，让你的电商App交互更上一层楼。

项目介绍

Android-PickerView是一款仿iOS的PickerView控件，支持时间选择器（TimePickerView）和选项选择器（OptionsPickerView），主要特性包括三级联动、循环模式、自定义布局、实时回调等。该项目已停止更新，但原有版本仍可通过Jcenter库继续使用，建议直接下载源码引入module到自己项目进行改造。

项目结构中，核心代码位于pickerview/目录，其中pickerview/builder/目录下的OptionsPickerBuilder和TimePickerBuilder用于构建选择器，pickerview/view/目录下的OptionsPickerView和TimePickerView是选择器的主要实现类。示例代码位于app/src/main/java/com/bigkoo/pickerviewdemo/目录，包含了各种选择器的使用示例。

电商场景下的选择器应用痛点

在电商App中，商品规格选择是用户购买流程中的关键环节。传统的Spinner或自定义选择器往往存在以下问题：

1. 联动效果差：选择商品分类后，规格选项不能实时更新，需要手动刷新
2. 性能问题：数据量大时出现卡顿、掉帧现象
3. 用户体验不佳：界面样式不统一，操作反馈不及时
4. 开发效率低：需要自行实现联动逻辑，代码冗余

Android-PickerView的三级联动功能正好解决了这些痛点，其高效的性能和灵活的配置选项，能够满足电商场景下复杂的商品规格选择需求。

实现商品三级联动选择器

集成步骤

首先，需要在项目中集成Android-PickerView。由于Jcenter仓库可能已停止服务，建议直接下载源码引入module。在app/build.gradle中添加依赖：

compile project(':pickerview')

或者使用Gradle依赖：

compile 'com.contrarywind:Android-PickerView:4.1.9'

数据准备

商品分类与规格数据通常包括三级：分类、属性、值。例如：手机分类下有品牌、型号、颜色等属性，每个属性又有多个值。我们需要准备类似省市区的数据结构，示例如下：

private List<JsonBean> options1Items = new ArrayList<>(); // 一级分类
private ArrayList<ArrayList<String>> options2Items = new ArrayList<>(); // 二级属性
private ArrayList<ArrayList<ArrayList<String>>> options3Items = new ArrayList<>(); // 三级值

可以通过JSON文件来存储这些数据，如项目中的app/src/main/assets/province.json文件，然后使用GetJsonDataUtil类来解析数据。

构建三级联动选择器

使用OptionsPickerBuilder构建商品规格三级联动选择器的核心代码如下：

OptionsPickerView pvOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
    @Override
    public void onOptionsSelect(int options1, int options2, int options3, View v) {
        // 返回的分别是三个级别的选中位置
        String category = options1Items.get(options1).getPickerViewText();
        String attribute = options2Items.get(options1).get(options2);
        String value = options3Items.get(options1).get(options2).get(options3);
        String result = category + " - " + attribute + " - " + value;
        Toast.makeText(JsonDataActivity.this, result, Toast.LENGTH_SHORT).show();
    }
})
.setTitleText("商品规格选择")
.setDividerColor(Color.BLACK)
.setTextColorCenter(Color.BLACK)
.setContentTextSize(20)
.build();

pvOptions.setPicker(options1Items, options2Items, options3Items); // 三级选择器
pvOptions.show();

上述代码中，OptionsPickerBuilder用于配置选择器的样式和行为，setPicker方法设置三级联动数据，show方法显示选择器。当用户选择完成后，OnOptionsSelectListener监听器会返回三个级别的选中位置，我们可以根据这些位置获取对应的商品分类、属性和值。

数据解析与联动实现

数据解析是实现联动的关键步骤。以解析JSON数据为例，我们可以使用Gson库将JSON数据转换为JavaBean对象，然后构建三级联动所需的数据源。项目中的JsonDataActivity类提供了完整的解析示例：

private void initJsonData() {
    String JsonData = new GetJsonDataUtil().getJson(this, "province.json");
    ArrayList<JsonBean> jsonBean = parseData(JsonData);
    options1Items = jsonBean;
    
    for (int i = 0; i < jsonBean.size(); i++) {
        ArrayList<String> cityList = new ArrayList<>();
        ArrayList<ArrayList<String>> province_AreaList = new ArrayList<>();
        
        for (int c = 0; c < jsonBean.get(i).getCityList().size(); c++) {
            String cityName = jsonBean.get(i).getCityList().get(c).getName();
            cityList.add(cityName);
            ArrayList<String> city_AreaList = new ArrayList<>();
            city_AreaList.addAll(jsonBean.get(i).getCityList().get(c).getArea());
            province_AreaList.add(city_AreaList);
        }
        
        options2Items.add(cityList);
        options3Items.add(province_AreaList);
    }
}

在实际电商项目中，我们可以将province.json替换为商品规格数据JSON文件，然后按照相同的解析方式构建数据源。

高级自定义与优化

自定义布局

Android-PickerView支持自定义布局，以满足不同的UI需求。例如，我们可以自定义标题栏、添加额外的按钮或修改滚轮样式。项目中的MainActivity类中的initCustomOptionPicker方法展示了如何自定义选项选择器的布局：

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 = (TextView) v.findViewById(R.id.tv_finish);
        ImageView ivCancel = (ImageView) 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();
            }
        });
    }
})
.build();

自定义布局文件需要放在app/src/main/res/layout/目录下，如pickerview_custom_options.xml。注意，自定义布局中id为optionspicker或timepicker的布局及其子控件必须存在，否则会报空指针异常。

性能优化

当商品规格数据量较大时，可能会出现选择器卡顿的问题。以下是一些优化建议：

1. 数据懒加载：只加载当前需要显示的数据，避免一次性加载所有数据
2. 复用视图：使用RecyclerView或ListView的复用机制，减少视图创建开销
3. 避免主线程阻塞：数据解析等耗时操作放在子线程中执行，如JsonDataActivity中使用Handler和Thread来解析数据：

private Handler mHandler = new Handler() {
    public void handleMessage(Message msg) {
        switch (msg.what) {
            case MSG_LOAD_DATA:
                if (thread == null) {
                    thread = new Thread(new Runnable() {
                        @Override
                        public void run() {
                            initJsonData();
                        }
                    });
                    thread.start();
                }
                break;
            case MSG_LOAD_SUCCESS:
                isLoaded = true;
                break;
        }
    }
};

样式定制

Android-PickerView提供了丰富的样式定制选项，如修改文字颜色、分割线颜色、背景颜色等。以下是一些常用的样式定制方法：

pvOptions = new OptionsPickerBuilder(this, new OnOptionsSelectListener() {
    // ...
})
.setSubmitText("确定")
.setCancelText("取消")
.setTitleText("商品规格选择")
.setSubCalSize(18)
.setTitleSize(20)
.setTitleColor(Color.BLACK)
.setSubmitColor(Color.BLUE)
.setCancelColor(Color.BLUE)
.setTitleBgColor(0xFF333333)
.setBgColor(0xFF000000)
.setContentTextSize(18)
.setLinkage(true)
.setLabels("分类", "属性", "值")
.isCenterLabel(false)
.setCyclic(false, false, false)
.setSelectOptions(0, 0, 0)
.build();

通过这些方法，我们可以将选择器的样式调整为与App整体风格一致。

实际案例与效果展示

Android-PickerView在实际电商项目中有广泛的应用，例如招商银行的"掌上生活"App就使用了该库的条件选择器。项目中的preview/目录提供了一些效果展示图片和GIF，如pickerdemo_zhangshangshenghuo.gif展示了类似电商选择器的效果。

上图展示了使用Android-PickerView实现的三级联动选择器效果，类似省市区选择，可直接应用于商品分类与规格选择场景。

总结与展望

Android-PickerView为电商App中的商品规格选择提供了高效、灵活的解决方案。通过本文的介绍，我们了解了如何集成、使用和自定义Android-PickerView来实现商品分类与规格的三级联动。虽然该项目已停止更新，但现有功能已能满足大部分电商场景的需求，建议开发者下载源码后根据自身项目需求进行定制化开发。

未来，随着Jetpack Compose的普及，我们可以考虑使用Compose来实现更现代化的选择器组件，但在此之前，Android-PickerView仍然是一个可靠的选择。希望本文能够帮助你解决电商App中的选择器难题，提升用户体验和开发效率。

如果你觉得本文对你有帮助，请点赞、收藏并关注，以便获取更多Android开发技巧和最佳实践。如有任何问题或建议，欢迎在评论区留言讨论。

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