仿餓了麼購物車下單效果

前一段由于新項目需要，開發一個類似餓了麼購物車下單效果，電商類、外賣類、點餐類項目都可以用的上,廢話不多說請看效果。效果圖如下:

仿餓了麼購物車下單效果

主要的功能：就是左側展示分類，右側展示分類下商品的，點選右側分類下的商品，如果商品是套餐類型的話，點選可以看套餐詳情，下單選擇完商品後，可以在購物車裡面添加或減少商品數量。

主要功能實作： 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.

1     public void handlerCarNum(int type, GoodsBean goodsBean, boolean refreshGoodList){
 2         if (type == 0) {
 3             GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
 4             if(temp!=null){
 5                 if(temp.getNum()<2){
 6                     goodsBean.setNum(0);
 7                     selectedList.remove(goodsBean.getProduct_id());
 8                 }else{
 9                     int i =  goodsBean.getNum();
10                     goodsBean.setNum(--i);
11                 }
12             }
13         } else if (type == 1) {
14             GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
15             if(temp==null){
16                 goodsBean.setNum(1);
17                 selectedList.append(goodsBean.getProduct_id(), goodsBean);
18             }else{
19                 int i= goodsBean.getNum();
20                 goodsBean.setNum(++i);
21             }
22         }
23         update(refreshGoodList);
24     }

1  //重新整理布局 總價、購買數量等
 2     private void update(boolean refreshGoodList){
 3         int size = selectedList.size();
 4         int count =0;
 5         for(int i=0;i<size;i++){
 6             GoodsBean item = selectedList.valueAt(i);
 7             count += item.getNum();
 8             totleMoney += item.getNum()*Double.parseDouble(item.getPrice());
 9         }
10         tv_totle_money.setText("￥"+String.valueOf(df.format(totleMoney)));
11         totleMoney = 0.00;
12         if(count<1){
13             bv_unm.setVisibility(View.GONE);
14         }else{
15             bv_unm.setVisibility(View.VISIBLE);
16         }
17 
18         bv_unm.setText(String.valueOf(count));
19 
20         if(productAdapter!=null){
21             productAdapter.notifyDataSetChanged();
22         }
23 
24         if(goodsAdapter!=null){
25             goodsAdapter.notifyDataSetChanged();
26         }
27 
28         if(catograyAdapter!=null){
29             catograyAdapter.notifyDataSetChanged();
30         }
31 
32         if(bottomSheetLayout.isSheetShowing() && selectedList.size()<1){
33             bottomSheetLayout.dismissSheet();
34         }
35     }

2：底部購物車商品清單

點選購物車檢視購物車清單時，就是給含有下單商品的HashMap作為參數傳入ProductAdapter中，在購物車中添加或減少商品數量同樣是調 MainActivity的handlerCarNum方法。除此之外，購物車清單彈起的效果可以用一個bottomsheet效果。as直接內建 compile'com.flipboard:bottomsheet-core:1.5.1'即可。

3：選擇左側分類效果

由于選擇分類時，既要改變分類的背景色也要改變選擇分類文字的顔色，就不能直接在xml裡面設定了，需要在getview裡面根據外面傳進來選擇的selection與position比較後設定。

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

1  if (position == selection) {
2             viewholder.tv_catogray.setBackgroundResource(R.drawable.rec_red_left_stroke);
3             viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.black));
4         } else {
5             viewholder.tv_catogray.setBackgroundResource(R.drawable.empty);
6             viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.gray));
7         }

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水準位移和旋轉動畫效果。

1  //顯示減号的動畫
 2     private Animation getShowAnimation(){
 3         AnimationSet set = new AnimationSet(true);
 4         RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
 5         set.addAnimation(rotate);
 6         TranslateAnimation translate = new TranslateAnimation(
 7                 TranslateAnimation.RELATIVE_TO_SELF,2f
 8                 ,TranslateAnimation.RELATIVE_TO_SELF,0
 9                 ,TranslateAnimation.RELATIVE_TO_SELF,0
10                 ,TranslateAnimation.RELATIVE_TO_SELF,0);
11         set.addAnimation(translate);
12         AlphaAnimation alpha = new AlphaAnimation(0,1);
13         set.addAnimation(alpha);
14         set.setDuration(500);
15         return set;
16     }
17     //隐藏減号的動畫
18     private Animation getHiddenAnimation(){
19         AnimationSet set = new AnimationSet(true);
20         RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
21         set.addAnimation(rotate);
22         TranslateAnimation translate = new TranslateAnimation(
23                 TranslateAnimation.RELATIVE_TO_SELF,0
24                 ,TranslateAnimation.RELATIVE_TO_SELF,2f
25                 ,TranslateAnimation.RELATIVE_TO_SELF,0
26                 ,TranslateAnimation.RELATIVE_TO_SELF,0);
27         set.addAnimation(translate);
28         AlphaAnimation alpha = new AlphaAnimation(1,0);
29         set.addAnimation(alpha);
30         set.setDuration(500);
31         return set;
32     }

5：下單動畫

下單動畫首先要擷取添加商品時的初始位置坐标，通過getLocationInWindow方法擷取初始位置的心x,y坐标，然後擷取添加商品要消失的地方的坐标，一般都選擇購物車logo的坐标。然後計算x,y的位移值後，通過TranslateAnimation轉換移動效果，x,y同時移動就實作了抛物線的效果。最後不要忘記設定當動畫結束的時候隐藏抛過來的小圖示。

1 public void setAnim(final View v, int[] startLocation) {
 2         anim_mask_layout = null;
 3         anim_mask_layout = createAnimLayout();
 4         anim_mask_layout.addView(v);//把動畫小球添加到動畫層
 5         final View view = addViewToAnimLayout(anim_mask_layout, v, startLocation);
 6         int[] endLocation = new int[2];// 存儲動畫結束位置的X、Y坐标
 7         tv_car.getLocationInWindow(endLocation);
 8         // 計算位移
 9         int endX = 0 - startLocation[0] + 40;// 動畫位移的X坐标
10         int endY = endLocation[1] - startLocation[1];// 動畫位移的y坐标
11 
12         TranslateAnimation translateAnimationX = new TranslateAnimation(0,endX, 0, 0);
13         translateAnimationX.setInterpolator(new LinearInterpolator());
14         translateAnimationX.setRepeatCount(0);// 動畫重複執行的次數
15         translateAnimationX.setFillAfter(true);
16 
17         TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
18         translateAnimationY.setInterpolator(new AccelerateInterpolator());
19         translateAnimationY.setRepeatCount(0);// 動畫重複執行的次數
20         translateAnimationY.setFillAfter(true);
21 
22         AnimationSet set = new AnimationSet(false);
23         set.setFillAfter(false);
24         set.addAnimation(translateAnimationY);
25         set.addAnimation(translateAnimationX);
26         set.setDuration(800);// 動畫的執行時間
27         view.startAnimation(set);
28         // 動畫監聽事件
29         set.setAnimationListener(new Animation.AnimationListener() {
30             // 動畫的開始
31             @Override
32             public void onAnimationStart(Animation animation) {
33                 v.setVisibility(View.VISIBLE);
34             }
35 
36             @Override
37             public void onAnimationRepeat(Animation animation) {
38                 // TODO Auto-generated method stub
39             }
40 
41             // 動畫的結束
42             @Override
43             public void onAnimationEnd(Animation animation) {
44                 v.setVisibility(View.GONE);
45             }
46         });
47 
48     }

最後肯定少不了源碼下載下傳位址:shopcar

轉載于:https://www.cnblogs.com/huolongluo/p/6214284.html

仿餓了麼購物車下單效果

仿餓了麼購物車下單效果

1：分類及商品及購物車裡面商品數量的關聯效果

2：底部購物車商品清單

3：選擇左側分類效果

4：添加商品是有0到1，減少商品有1到0動畫效果

5：下單動畫

繼續閱讀

C語言程式設計預報作業

Android ProguardAndroid Proguard

Android中Webview使用經驗總結

Android開發學習筆記：淺談WebView(轉)

轉 Android WebView應用詳解

Android WebView學習Android WebView學習

（轉）proguard 原理proguard 原理

第一個APP——GeoQuiz

參加微軟MDC大會

位元組面試官：2021年Android常見面試題，面試必備

Android 車載之車載投屏~

新聞 | Mapbox 牽手阿裡，飛豬旅行上線六大城市地圖功能

HBuilder開發App Step1——環境搭建，HelloMUI 以及真機調試

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

[轉]iOS微信小視訊優化心得

android 主線程的相關問題