【0111】【項目實戰】-【Android通用框架設計與完整電商APP開發】-【11】購物車，訂單，支付功能開發（包含支付寶支付和微信支付）

本文轉載自查看原文 2018-04-11 09:56 1179 _0005_Android開發

1.購物車UI編寫

1.1 購物車布局

【新建包和類】

【ToolBar的布局】

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:background="#1111"
 7     android:orientation="vertical">
 8 
 9     <android.support.v7.widget.Toolbar
10         android:layout_width="match_parent"
11         android:layout_height="75dp"
12         android:background="@color/app_main"
13         android:gravity="center">
14 
15         <RelativeLayout
16             android:layout_width="match_parent"
17             android:layout_height="match_parent">
18 
19             <android.support.v7.widget.AppCompatTextView
20                 android:id="@+id/tv_top_shop_cart_clear"
21                 android:layout_width="wrap_content"
22                 android:layout_height="match_parent"
23                 android:layout_alignParentLeft="true"
24                 android:layout_marginLeft="20dp"
25                 android:gravity="center"
26                 android:text="清空"
27                 android:textColor="@android:color/white"
28                 android:textSize="18sp"
29                 tools:ignore="HardcodedText,RtlHardcoded" />
30 
31             <android.support.v7.widget.AppCompatTextView
32                 android:layout_width="wrap_content"
33                 android:layout_height="match_parent"
34                 android:layout_centerHorizontal="true"
35                 android:gravity="center"
36                 android:text="購物車"
37                 android:textColor="@android:color/white"
38                 android:textSize="20sp"
39                 tools:ignore="HardcodedText" />
40 
41             <android.support.v7.widget.AppCompatTextView
42                 android:id="@+id/tv_top_shop_cart_remove_selected"
43                 android:layout_width="wrap_content"
44                 android:layout_height="match_parent"
45                 android:layout_alignParentRight="true"
46                 android:layout_marginLeft="20dp"
47                 android:layout_marginRight="20dp"
48                 android:gravity="center"
49                 android:text="刪除"
50                 android:textColor="@android:color/white"
51                 android:textSize="18sp"
52                 tools:ignore="HardcodedText,RtlHardcoded" />
53         </RelativeLayout>
54     </android.support.v7.widget.Toolbar>

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
  3     xmlns:tools="http://schemas.android.com/tools"
  4     android:layout_width="match_parent"
  5     android:layout_height="match_parent"
  6     android:background="#1111"
  7     android:orientation="vertical">
  8 
  9     <android.support.v7.widget.Toolbar
 10         android:layout_width="match_parent"
 11         android:layout_height="75dp"
 12         android:background="@color/app_main"
 13         android:gravity="center">
 14 
 15         <RelativeLayout
 16             android:layout_width="match_parent"
 17             android:layout_height="match_parent">
 18 
 19             <android.support.v7.widget.AppCompatTextView
 20                 android:id="@+id/tv_top_shop_cart_clear"
 21                 android:layout_width="wrap_content"
 22                 android:layout_height="match_parent"
 23                 android:layout_alignParentLeft="true"
 24                 android:layout_marginLeft="20dp"
 25                 android:gravity="center"
 26                 android:text="清空"
 27                 android:textColor="@android:color/white"
 28                 android:textSize="18sp"
 29                 tools:ignore="HardcodedText,RtlHardcoded" />
 30 
 31             <android.support.v7.widget.AppCompatTextView
 32                 android:layout_width="wrap_content"
 33                 android:layout_height="match_parent"
 34                 android:layout_centerHorizontal="true"
 35                 android:gravity="center"
 36                 android:text="購物車"
 37                 android:textColor="@android:color/white"
 38                 android:textSize="20sp"
 39                 tools:ignore="HardcodedText" />
 40 
 41             <android.support.v7.widget.AppCompatTextView
 42                 android:id="@+id/tv_top_shop_cart_remove_selected"
 43                 android:layout_width="wrap_content"
 44                 android:layout_height="match_parent"
 45                 android:layout_alignParentRight="true"
 46                 android:layout_marginLeft="20dp"
 47                 android:layout_marginRight="20dp"
 48                 android:gravity="center"
 49                 android:text="刪除"
 50                 android:textColor="@android:color/white"
 51                 android:textSize="18sp"
 52                 tools:ignore="HardcodedText,RtlHardcoded" />
 53         </RelativeLayout>
 54     </android.support.v7.widget.Toolbar>
 55 
 56     <android.support.v7.widget.RecyclerView //購物車中的貨物展示都是使用recyclerView控件顯示的  57         android:id="@+id/rv_shop_cart"
 58         android:layout_width="match_parent"
 59         android:layout_height="0dp"
 60         android:layout_weight="8" />
 61 
 62     <android.support.v7.widget.ViewStubCompat  //如果購物車中沒有貨物，進行占位的功能  63         android:id="@+id/stub_no_item"
 64         android:layout_width="match_parent"
 65         android:layout_height="0dp"
 66         android:layout_weight="8"
 67         android:background="@android:color/white"
 68         android:layout="@layout/stub_shop_cart_no_item"
 69         android:minHeight="50dp"
 70         android:orientation="horizontal" />
 71 
 72     <android.support.v7.widget.LinearLayoutCompat
 73         android:layout_width="match_parent"
 74         android:layout_height="0dp"
 75         android:layout_gravity="bottom"
 76         android:layout_weight="1"
 77         android:minHeight="50dp"
 78         android:orientation="horizontal">
 79 
 80         <!--全選圖標模塊-->
 81         <android.support.v7.widget.LinearLayoutCompat
 82             android:layout_width="0dp"
 83             android:layout_height="match_parent"
 84             android:layout_weight="1"
 85             android:minHeight="50dp"
 86             android:orientation="horizontal">
 87 
 88             <com.joanzapata.iconify.widget.IconTextView
 89                 android:id="@+id/icon_shop_cart_select_all"
 90                 android:layout_width="0dp"
 91                 android:layout_height="match_parent"
 92                 android:layout_weight="1"
 93                 android:gravity="center"
 94                 android:text="{fa-check-circle}"
 95                 android:textColor="@android:color/darker_gray"
 96                 android:textSize="20sp" />
 97 
 98             <android.support.v7.widget.AppCompatTextView
 99                 android:layout_width="0dp"
100                 android:layout_height="match_parent"
101                 android:layout_weight="1"
102                 android:gravity="center"
103                 android:text="全選"
104                 android:textColor="@color/app_main" />
105         </android.support.v7.widget.LinearLayoutCompat>
106         <!--全選部分結束-->
107 
108         <!--合計部分-->
109         <android.support.v7.widget.LinearLayoutCompat
110             android:layout_width="0dp"
111             android:layout_height="match_parent"
112             android:layout_weight="2"
113             android:minHeight="50dp"
114             android:orientation="horizontal">
115 
116             <android.support.v7.widget.AppCompatTextView
117                 android:layout_width="0dp"
118                 android:layout_height="match_parent"
119                 android:layout_weight="1"
120                 android:gravity="center"
121                 android:text="合計"
122                 android:textColor="@android:color/darker_gray"
123                 tools:ignore="HardcodedText" />
124 
125             <android.support.v7.widget.AppCompatTextView
126                 android:id="@+id/tv_shop_cart_total_price"
127                 android:layout_width="0dp"
128                 android:layout_height="match_parent"
129                 android:layout_weight="1"
130                 android:gravity="center|left"
131                 android:text="￥0.01"
132                 android:textColor="@color/app_main"
133                 android:textSize="20sp"
134                 tools:ignore="HardcodedText,RtlHardcoded" />
135 
136         </android.support.v7.widget.LinearLayoutCompat>
137 
138         <android.support.v7.widget.AppCompatTextView
139             android:id="@+id/tv_shop_cart_pay"
140             android:layout_width="0dp"
141             android:layout_height="match_parent"
142             android:layout_weight="1"
143             android:background="@color/app_main"
144             android:gravity="center"
145             android:text="結算"
146             android:textColor="@android:color/white"
147             android:textSize="20sp"
148             tools:ignore="HardcodedText" />
149 
150     </android.support.v7.widget.LinearLayoutCompat>
151 
152 </android.support.v7.widget.LinearLayoutCompat>

1.2 recycleView中的item的布局

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <android.support.v7.widget.LinearLayoutCompat 
  3     xmlns:android="http://schemas.android.com/apk/res/android"
  4     xmlns:tools="http://schemas.android.com/tools"
  5     android:layout_width="match_parent"
  6     android:layout_height="100dp"
  7     android:layout_marginBottom="5dp"
  8     android:background="@android:color/white"
  9     android:orientation="horizontal">
 10 
 11     <com.joanzapata.iconify.widget.IconTextView
 12         android:id="@+id/icon_item_shop_cart"
 13         android:layout_width="wrap_content"
 14         android:layout_height="wrap_content"
 15         android:layout_gravity="center_vertical"
 16         android:layout_marginLeft="10dp"
 17         android:gravity="center"
 18         android:text="{fa-check-circle}"
 19         android:textColor="@android:color/darker_gray"
 20         tools:ignore="HardcodedText,RtlHardcoded" />
 21 
 22     <android.support.v7.widget.AppCompatImageView
 23         android:id="@+id/image_item_shop_cart"
 24         android:layout_width="80dp"
 25         android:layout_height="80dp"
 26         android:layout_gravity="center_vertical"
 27         android:layout_marginLeft="10dp"
 28         android:layout_marginRight="10dp" />
 29 
 30     <!--商品信息-->
 31     <android.support.v7.widget.LinearLayoutCompat
 32         android:layout_width="0dp"
 33         android:layout_height="match_parent"
 34         android:layout_weight="2"
 35         android:gravity="center_vertical"
 36         android:orientation="vertical"
 37         android:padding="10dp">
 38 
 39         <android.support.v7.widget.AppCompatTextView
 40             android:id="@+id/tv_item_shop_cart_title"
 41             android:layout_width="wrap_content"
 42             android:layout_height="wrap_content"
 43             android:layout_marginBottom="5dp"
 44             android:text="商品標題"
 45             tools:ignore="HardcodedText" />
 46 
 47         <android.support.v7.widget.AppCompatTextView
 48             android:id="@+id/tv_item_shop_cart_desc"
 49             android:layout_width="wrap_content"
 50             android:layout_height="wrap_content"
 51             android:layout_marginBottom="5dp"
 52             android:text="商品描述"
 53             tools:ignore="HardcodedText" />
 54 
 55         <android.support.v7.widget.AppCompatTextView
 56             android:id="@+id/tv_item_shop_cart_price"
 57             android:layout_width="wrap_content"
 58             android:layout_height="wrap_content"
 59             android:text="2.00"
 60             android:textColor="@color/app_main"
 61             android:typeface="monospace"
 62             tools:ignore="HardcodedText" />
 63     </android.support.v7.widget.LinearLayoutCompat>
 64     <!--商品信息結束-->
 65 
 66     <android.support.v7.widget.LinearLayoutCompat
 67         android:layout_width="0dp"
 68         android:layout_height="match_parent"
 69         android:layout_marginBottom="20dp"
 70         android:layout_weight="1"
 71         android:gravity="bottom"
 72         android:orientation="horizontal">
 73 
 74         <com.joanzapata.iconify.widget.IconTextView
 75             android:id="@+id/icon_item_minus"
 76             android:layout_width="20dp"
 77             android:layout_height="20dp"
 78             android:gravity="center"
 79             android:text="{fa-minus-square-o}"
 80             android:textSize="24sp"
 81             tools:ignore="HardcodedText" />
 82 
 83         <android.support.v7.widget.AppCompatTextView
 84             android:id="@+id/tv_item_shop_cart_count"
 85             android:layout_width="20dp"
 86             android:layout_height="20dp"
 87             android:gravity="center"
 88             android:text="1"
 89             android:textSize="18sp"
 90             tools:ignore="HardcodedText" />
 91 
 92         <com.joanzapata.iconify.widget.IconTextView
 93             android:id="@+id/icon_item_plus"
 94             android:layout_width="20dp"
 95             android:layout_height="20dp"
 96             android:gravity="center"
 97             android:text="{fa-plus-square-o}"
 98             android:textSize="24sp"
 99             tools:ignore="HardcodedText" />
100 
101     </android.support.v7.widget.LinearLayoutCompat>
102 
103 </android.support.v7.widget.LinearLayoutCompat>

2. 購物車數據結構分析、解析與轉化

2.1 解析的數據

【json數據】data中的每個字段就是要解析的item的數據；

2.2 數據的轉化

【構建entivity】

2.3 數據適配器的添加

【添加購物車的布局】

【取出所有的值】

【取出控件】

【賦值】

【設置適配器】

[視圖綁定]

3. 購物車邏輯梳理與實現

3.1 是否選中的事件的響應

【完成icon的點擊事件】

【說明】此處的點擊事件：不要實現接口，要單獨的書寫onClick方法，否則，每個item無法響應事件；

3.2 全選按鈕事件的響應

【item對全選事件的響應】

【完善】

【item對全選狀態的改變】

【效果】但是會閃一下，需要去除掉更新的動畫效果；

3.3 閃屏bug

3.4 刪除按鈕的功能實現

3.5 清空購物車

【修改】

3.6 清空購物車之后的額外內容的顯示

【原理】填充一個新的View；

【調用】

【bug1】

【bug2】下半部變得很寬

3.7 左右加號減號的功能的實現

【減號功能的實現】與服務器的數據實時的進行更新同步；每次都需要請求服務器更新數據；

【加號功能的實現】

3.8 結算功能的實現

【接口的定義】因為在全選、點擊加減按鈕的時候，都需要進行全局的數據的價格的更新，以接口的形式返回數據；

【取出總價】

【BUG】

【現象】之前顯示的數據是不正確的；現在增加一個變量；

4.訂單和支付邏輯梳理和處理

4.1 支付的流程

【說明】需要我們自己的服務向第三方的支付平台進行請求，然后進行認證等之后返回狀態；

【區別】區別訂單和支付的不同；

4.2 額外梳理、整理module結構、升級依賴、更好的進行分離

【fragment的依賴的處理】已經進行了升級；降低了耦合度；

5. 封裝傻瓜式操作支付工具

【說明】主要是界面的布局和完善；

【引入依賴】

【封裝返回狀態的回調接口】

【封裝工具類】

[注意]更新fragment的依賴之后的mActivity有所改變；

【彈框的layout】

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="wrap_content"
 6     android:background="@android:color/white"
 7     android:orientation="vertical"
 8     android:paddingBottom="20dp">
 9 
10     <LinearLayout
11         android:layout_width="match_parent"
12         android:layout_height="200dp"
13         android:orientation="horizontal">
14 
15         <com.joanzapata.iconify.widget.IconTextView
16             android:id="@+id/btn_dialog_pay_alpay"
17             android:layout_width="0dp"
18             android:layout_height="match_parent"
19             android:layout_weight="1"
20             android:gravity="center"
21             android:text="{icon-ali-pay}"
22             android:textColor="@android:color/holo_blue_bright"
23             android:textSize="50sp"
24             tools:ignore="HardcodedText" />
25 
26         <com.joanzapata.iconify.widget.IconTextView
27             android:id="@+id/btn_dialog_pay_wechat"
28             android:layout_width="0dp"
29             android:layout_height="match_parent"
30             android:layout_weight="1"
31             android:gravity="center"
32             android:text="{fa-weixin}"
33             android:textColor="#04b00f"
34             android:textSize="50sp"
35             tools:ignore="HardcodedText" />
36     </LinearLayout>
37 
38     <Button
39         android:id="@+id/btn_dialog_pay_cancel"
40         android:layout_width="match_parent"
41         android:layout_height="50dp"
42         android:layout_marginLeft="50dp"
43         android:layout_marginRight="50dp"
44         android:background="@color/app_main"
45         android:gravity="center"
46         android:text="取消支付"
47         android:textColor="@android:color/white"
48         android:textSize="16sp" />
49 
50 </LinearLayout>

【完善支付工具類】

【增加動畫】從底向上的動畫封裝

【設置動畫和屬性】

【設置點擊事件的響應】

【響應點擊事件】

6.支付寶的接入和實現支付

【異步類的封裝】

【根據返回的狀態進行處理】

 1 package com.flj.latte.ec.pay;
 2 
 3 import android.app.Activity;
 4 import android.os.AsyncTask;
 5 
 6 import com.alipay.sdk.app.PayTask;
 7 import com.flj.latte.ui.loader.LatteLoader;
 8 import com.flj.latte.util.log.LatteLogger;
 9 
13 
14 public class PayAsyncTask extends AsyncTask<String, Void, String> {
15 
16     private final Activity ACTIVITY;
17     private final IAlPayResultListener LISTENER;
18 
19     //訂單支付成功
20     private static final String AL_PAY_STATUS_SUCCESS = "9000";
21     //訂單處理中
22     private static final String AL_PAY_STATUS_PAYING = "8000";
23     //訂單支付失敗
24     private static final String AL_PAY_STATUS_FAIL = "4000";
25     //用戶取消
26     private static final String AL_PAY_STATUS_CANCEL = "6001";
27     //支付網絡錯誤
28     private static final String AL_PAY_STATUS_CONNECT_ERROR = "6002";
29 
30     public PayAsyncTask(Activity activity, IAlPayResultListener listener) {
31         this.ACTIVITY = activity;
32         this.LISTENER = listener;
33     }
34 
35     @Override
36     protected String doInBackground(String... params) {
37         final String alPaySign = params[0];
38         final PayTask payTask = new PayTask(ACTIVITY);
39         return payTask.pay(alPaySign, true);
40     }
41 
42     @Override
43     protected void onPostExecute(String result) {
44         super.onPostExecute(result);
45         LatteLoader.stopLoading();
46         final PayResult payResult = new PayResult(result);
47         // 支付寶返回此次支付結構及加簽，建議對支付寶簽名信息拿簽約是支付寶提供的公鑰做驗簽
48         final String resultInfo = payResult.getResult();
49         final String resultStatus = payResult.getResultStatus();
50         LatteLogger.d("AL_PAY_RESULT", resultInfo);
51         LatteLogger.d("AL_PAY_RESULT", resultStatus);
52 
53         switch (resultStatus) {
54             case AL_PAY_STATUS_SUCCESS:
55                 if (LISTENER != null) {
56                     LISTENER.onPaySuccess();
57                 }
58                 break;
59             case AL_PAY_STATUS_FAIL:
60                 if (LISTENER != null) {
61                     LISTENER.onPayFail();
62                 }
63                 break;
64             case AL_PAY_STATUS_PAYING:
65                 if (LISTENER != null) {
66                     LISTENER.onPaying();
67                 }
68                 break;
69             case AL_PAY_STATUS_CANCEL:
70                 if (LISTENER != null) {
71                     LISTENER.onPayCancel();
72                 }
73                 break;
74             case AL_PAY_STATUS_CONNECT_ERROR:
75                 if (LISTENER != null) {
76                     LISTENER.onPayConnectError();
77                 }
78                 break;
79             default:
80                 break;
81         }
82     }
83 }