仿饿了么购物车下单效果

仿饿了么购物车下单效果

前一段由于新项目需要，开发一个类似饿了么购物车下单效果，电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。 效果图如下:

主要的功能： 就是左侧展示分类，右侧展示分类下商品的，点击右侧分类下的商品，如果商品是套餐类型的话，点击可以看套餐详情，下单选择完商品后，可以在购物车里面添加或减少商品数量。

主要功能实现： 1:分类及商品及购物车里面商品数量的联动效果 2:底部购物车商品列表 3:选择左侧分类效果 4:添加商品是有0到1，减少商品有1到0动画效果 5:下单动画

1：分类及商品及购物车里面商品数量的联动效果

商品的分类和商品展示分别是两个列表，每一个商品的数量取商品的number、商品分类是取每一个分类下的商品list里面遍历商品取商品数量之和。然后商品列表的 GoodsAdapter里面有一个参数传的是商品分类的CatograyAdapter,当下单时减少或则添加商品时，都会调 MainActivity的handlerCarNum方法。 减少时type传0，添加时传1。通过一个SparseArray，key是商品的product_id，value为商品的下单个数。1：当添加商品都会传入一个商品对象goodsBean，通过product_id取到这个商品对象，如果商品对象为空时，给传入的对象下单数量goodsBean.setNum(1)，否则goodsBean.setNum(++i)。2：当减少商品时，通过product_id取到这个商品对象，通过对象取对象的下单数量如果小与2的时候goodsBean.setNum(0)，并将该对象从SparseArray中remove否goodsBean.setNum(--i)。最后调update方法更新GoodsAdapter,CatograyAdapter.

    public void handlerCarNum(int type, GoodsBean goodsBean, boolean refreshGoodList){
        if (type == 0) {
            GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
            if(temp!=null){
                if(temp.getNum()<2){
                    goodsBean.setNum(0);
                    selectedList.remove(goodsBean.getProduct_id());
                }else{
                    int i =  goodsBean.getNum();
                    goodsBean.setNum(--i);
                }
            }
        } else if (type == 1) {
            GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
            if(temp==null){
                goodsBean.setNum(1);
                selectedList.append(goodsBean.getProduct_id(), goodsBean);
            }else{
                int i= goodsBean.getNum();
                goodsBean.setNum(++i);
            }
        }
        update(refreshGoodList);
    }

 //刷新布局 总价、购买数量等
    private void update(boolean refreshGoodList){
        int size = selectedList.size();
        int count =0;
        for(int i=0;i<size;i++){
            GoodsBean item = selectedList.valueAt(i);
            count += item.getNum();
            totleMoney += item.getNum()*Double.parseDouble(item.getPrice());
        }
        tv_totle_money.setText("￥"+String.valueOf(df.format(totleMoney)));
        totleMoney = 0.00;
        if(count<1){
            bv_unm.setVisibility(View.GONE);
        }else{
            bv_unm.setVisibility(View.VISIBLE);
        }

        bv_unm.setText(String.valueOf(count));

        if(productAdapter!=null){
            productAdapter.notifyDataSetChanged();
        }

        if(goodsAdapter!=null){
            goodsAdapter.notifyDataSetChanged();
        }

        if(catograyAdapter!=null){
            catograyAdapter.notifyDataSetChanged();
        }

        if(bottomSheetLayout.isSheetShowing() && selectedList.size()<1){
            bottomSheetLayout.dismissSheet();
        }
    }

2：底部购物车商品列表

点击购物车查看购物车列表时，就是给含有下单商品的HashMap作为参数传入ProductAdapter中，在购物车中添加或减少商品数量同样是调 MainActivity的handlerCarNum方法。 除此之外，购物车列表弹起的效果可以用一个bottomsheet效果。as直接集成 compile'com.flipboard:bottomsheet-core:1.5.1'即可。

3：选择左侧分类效果

由于选择分类时，既要改变分类的背景色也要改变选择分类文字的颜色，就不能直接在xml里面设置了，需要在getview里面根据外面传进来选择的selection与position比较后设置。

 public void setSelection(int selection) {
        this.selection = selection;
    }

 if (position == selection) {
            viewholder.tv_catogray.setBackgroundResource(R.drawable.rec_red_left_stroke);
            viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.black));
        } else {
            viewholder.tv_catogray.setBackgroundResource(R.drawable.empty);
            viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.gray));
        }

4：添加商品是有0到1，减少商品有1到0动画效果

其实动画效果做起来也不是特别复杂，首先要搞清android的几种动画效果，分为在Android3.0（即API Level11）以前，Android仅支持2种动画：分别是Frame Animation（逐帧动画）和Tween Animation（补间动画），在3.0之后Android支持了一种新的动画系统，称为：Property Animation（属性动画）。 最常用的补间动画最常用的4中效果如下： 渐变透明度动画效果 渐变尺寸伸缩动画效果 画面转换位置移动动画效果 画面转移旋转动画效果

添加商品是有0到1，减少商品有1到0动画效果其实就是利用了translate、rotate水平位移和旋转动画效果。

 //显示减号的动画
    private Animation getShowAnimation(){
        AnimationSet set = new AnimationSet(true);
        RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
        set.addAnimation(rotate);
        TranslateAnimation translate = new TranslateAnimation(
                TranslateAnimation.RELATIVE_TO_SELF,2f
                ,TranslateAnimation.RELATIVE_TO_SELF,0
                ,TranslateAnimation.RELATIVE_TO_SELF,0
                ,TranslateAnimation.RELATIVE_TO_SELF,0);
        set.addAnimation(translate);
        AlphaAnimation alpha = new AlphaAnimation(0,1);
        set.addAnimation(alpha);
        set.setDuration(500);
        return set;
    }
    //隐藏减号的动画
    private Animation getHiddenAnimation(){
        AnimationSet set = new AnimationSet(true);
        RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
        set.addAnimation(rotate);
        TranslateAnimation translate = new TranslateAnimation(
                TranslateAnimation.RELATIVE_TO_SELF,0
                ,TranslateAnimation.RELATIVE_TO_SELF,2f
                ,TranslateAnimation.RELATIVE_TO_SELF,0
                ,TranslateAnimation.RELATIVE_TO_SELF,0);
        set.addAnimation(translate);
        AlphaAnimation alpha = new AlphaAnimation(1,0);
        set.addAnimation(alpha);
        set.setDuration(500);
        return set;
    }

5：下单动画

下单动画首先要获取添加商品时的初始位置坐标，通过getLocationInWindow方法获取初始位置的心x,y坐标，然后获取添加商品要消失的地方的坐标，一般都选择购物车logo的坐标。然后计算x,y的位移值后，通过TranslateAnimation转换移动效果，x,y同时移动就实现了抛物线的效果。最后不要忘记设置当动画结束的时候隐藏抛过来的小图标。

public void setAnim(final View v, int[] startLocation) {
        anim_mask_layout = null;
        anim_mask_layout = createAnimLayout();
        anim_mask_layout.addView(v);//把动画小球添加到动画层
        final View view = addViewToAnimLayout(anim_mask_layout, v, startLocation);
        int[] endLocation = new int[2];// 存储动画结束位置的X、Y坐标
        tv_car.getLocationInWindow(endLocation);
        // 计算位移
        int endX = 0 - startLocation[0] + 40;// 动画位移的X坐标
        int endY = endLocation[1] - startLocation[1];// 动画位移的y坐标

        TranslateAnimation translateAnimationX = new TranslateAnimation(0,endX, 0, 0);
        translateAnimationX.setInterpolator(new LinearInterpolator());
        translateAnimationX.setRepeatCount(0);// 动画重复执行的次数
        translateAnimationX.setFillAfter(true);

        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
        translateAnimationY.setInterpolator(new AccelerateInterpolator());
        translateAnimationY.setRepeatCount(0);// 动画重复执行的次数
        translateAnimationY.setFillAfter(true);

        AnimationSet set = new AnimationSet(false);
        set.setFillAfter(false);
        set.addAnimation(translateAnimationY);
        set.addAnimation(translateAnimationX);
        set.setDuration(800);// 动画的执行时间
        view.startAnimation(set);
        // 动画监听事件
        set.setAnimationListener(new Animation.AnimationListener() {
            // 动画的开始
            @Override
            public void onAnimationStart(Animation animation) {
                v.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub
            }

            // 动画的结束
            @Override
            public void onAnimationEnd(Animation animation) {
                v.setVisibility(View.GONE);
            }
        });

    }

最后肯定少不了源码下载地址:shopcar