Android仿美团外卖点菜联动列表

Android高仿美团外卖点菜联动列表效果

最近项目中有一个添加购物车的需求，需要做成美团外卖点菜联动ListView的效果，可能有的朋友觉得这很简单，不就是2个Listview点击事件联动处理机制吗？没错，基本思路就是这样子，只是美团外卖点菜效果上有一种根据右边列表滑动可以监听到左边分类信息的变化状态。

可能言语上表达你们没法想象，先上一张效果图：

完成此效果需要掌握以下知识点：

• ListView基本使用
• ListView点击监听事件setOnItemClickListener和setOnScrollListener的了解掌握
• 简单动画的技能(主要是点击添加复制一个图层进行抛物线落到购物车内)
• 接口回调的基本使用

不多说了，直接上代码比较靠谱！
以下就是两个ListView最主要的两个监听，来实现美团外卖点菜效果。

//左边ListView的点击事件切换右边列表数据
left_listView.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> arg0, View view,
            int position, long arg3) {
        isScroll = false;

        for (int i = 0; i < left_listView.getChildCount(); i++) {
            if (i == position) {
                left_listView.getChildAt(i).setBackgroundColor(
                        Color.rgb(255, 255, 255));
            } else {
                left_listView.getChildAt(i).setBackgroundColor(
                        Color.TRANSPARENT);
            }
        }
        int rightSection = 0;
        for (int i = 0; i < position; i++) {
            rightSection += sectionedAdapter.getCountForSection(i) + 1;
        }
        right_listview.setSelection(rightSection);

    }

});
//右边ListView滑动位置来更新左边ListView分类信息的位置切换
right_listview.setOnScrollListener(new OnScrollListener() {
    @Override
    public void onScrollStateChanged(AbsListView arg0, int arg1) {
    }
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        if (isScroll) {
            for (int i = 0; i < left_listView.getChildCount(); i++) {

                if (i == sectionedAdapter
                        .getSectionForPosition(firstVisibleItem)) {
                    left_listView.getChildAt(i).setBackgroundColor(
                            Color.rgb(255, 255, 255));
                } else {
                    left_listView.getChildAt(i).setBackgroundColor(
                            Color.TRANSPARENT);

                }
            }

        } else {
            isScroll = true;
        }
    }
});

其实代码很简单，看到上述2个ListView的监听事件后就能明白什么原理了。
1.左边ListView通过setOnItemClickListener点击item来切换更新右边列表数据
2.右边ListView通过setOnScrollListener滑动item来更新左边ListView列表
3.右边ListView的适配器需要大家注意一下：

下面主要实现购物车增加、删减商品功能

• 自己定义2个接口onCallBackListener和ShopToDetailListener
• onCallBackListener接口主要用于用户操作商品列表时增加和删减商品后对购物车商品价格以及数量的更新

    /**
     * Type表示添加或减少
     * @param product
     * @param type
     */
    void updateProduct(ShopProduct product, String type);

• ShopToDetailListener接口主要用于用户操作购物车商品时，对商品列表进行更新和购物车商品数目为0时更新删除购物车该商品信息

    /**
     * Type表示添加或减少
     * @param product
     * @param type
     */
    void onUpdateDetailList(ShopProduct product, String type);
    /**
     * 删除购物车商品信息
     * @param product
     */
    void onRemovePriduct(ShopProduct product);

下面操作是界面右边ListView适配器Adapter中增加和减少商品的点击事件处理：

viewHolder.increase.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int num = product.getNumber();