【0121】【項目實戰】-【組件化封裝思想實戰Android App】-【4】App公共模塊之圖片加載組件首頁列表開發與測試

時間 2019-11-11

標籤項目實戰組件封裝思想實戰 android app 公共模塊圖片加載首頁列表開發測試欄目軟件設計简体版

原文原文鏈接

1.首頁列表開發概述

1.1 須要開發的功能

1.2 思路1

【問題描述】在listView的item中使用適配器存在一個ArrayList，在VIewPager中存在一個ArrayList，怎樣將爲二維的數據結構顯示在ListView的item中？前端

【答】將二維的數據結構轉換爲一維的數據結構；java

【流程圖軟件】OmniGraffleandroid

1.3 思路2

【問題】如何讓VIewPager實現無限的循環滑動；ios

【答】web

【方法1】重寫ViewPager控件的方法，滑動到最後一張圖片的時候切換到第一也滑動；面試

[缺點]①工做量大；②切換的時候會存在卡頓的現象；json

【方法2】ViewPager只是容器，在adapter中對數據無限循環的處理；數組

2.首頁列表數據請求

2.1 佈局

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2               android:layout_width="match_parent"
 3               android:layout_height="match_parent"
 4               android:background="@color/color_cccccc"
 5               android:orientation="vertical"
 6 >
 7     <!--titleBar-->
 8     <RelativeLayout
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content"
11         android:background="@color/color_fed952"
12         android:padding="8dp"
13     >
14         <TextView
15             android:id="@+id/qrcode_view"
16             android:layout_width="wrap_content"
17             android:layout_height="wrap_content"
18             android:layout_centerVertical="true"
19             android:background="@drawable/bar_code_scan_icon"
20         />
21 
22         <TextView
23             android:id="@+id/category_view"
24             android:layout_width="wrap_content"
25             android:layout_height="wrap_content"
26             android:layout_alignParentRight="true"
27             android:layout_centerVertical="true"
28             android:background="@drawable/category"
29         />
30         <TextView
31             android:id="@+id/search_view"
32             android:layout_width="match_parent"
33             android:layout_height="wrap_content"
34             android:layout_marginLeft="10dp"
35             android:layout_marginRight="10dp"
36             android:layout_toLeftOf="@id/category_view"
37             android:layout_toRightOf="@id/qrcode_view"
38             android:background="@drawable/bg_home_edittext"
39             android:gravity="center"
40             android:padding="6dp"
41             android:text="@string/home_edittext_hint"
42             android:textColor="@color/color_cdcdcd"
43             android:textSize="16sp"
44         />
45     </RelativeLayout>
46 
47     <!--加載progressBar-->
48     <ImageView
49         android:id="@+id/loading_view"
50         android:layout_width="match_parent"
51         android:layout_height="match_parent"
52         android:background="@color/white"
53         android:scaleType="center"
54         android:src="@drawable/loading_data_anim"
55     />
56     <ListView
57         android:id="@+id/list_view"
58         android:layout_width="match_parent"
59         android:layout_height="match_parent"
60         android:alwaysDrawnWithCache="false"
61         android:divider="@color/color_cccccc"
62         android:dividerHeight="10dp"
63         android:visibility="gone"
64     />
65 </LinearLayout>

2.2 全部控件View的查找

2.3 業務層的網絡請求封裝

【發送請求】微信

【對網絡請求的再次封裝】在一個應用中會有不少的請求，若是修改一個請求還須要查找到對應的頁面，因此會在應用層再次封裝一次；網絡

【應用層的封裝】將全部的請求放在一個類中；以後對一個請求進行修改就沒必要要在去查找相關頁面；

【爲何不放在組件中封裝呢？】與業務邏輯無關的代碼纔會封裝爲一個組件；具體的請求的發送與業務邏輯有關係，

登陸請求、列表請求等等都屬於業務請求；此處的封裝屬於業務邏輯，與核心的網絡請求沒有必要放在一塊兒；

2.4 網路請求的使用

【測試】

【報錯】由於該網址實際不存在，須要使用charles代理模擬；

【設置代理】

【結果】轉化以後直接就是實體對象；

2.5 總結

2.6 實體對象的定義

如何定義實體對象，能夠順利的將json對象轉化爲實體對象？

【json數據的源碼】

  1 {
  2     "ecode": "0",
  3     "emsg": "",
  4     "data": {
  5         "head": {
  6             "ads": [
  7                 "http://img.mukewang.com/54bf7e1f000109c506000338-590-330.jpg",
  8                 "http://upload.techweb.com.cn/2015/0114/1421211858103.jpg",
  9                 "http://img1.cache.netease.com/catchpic/A/A0/A0153E1AEDA115EAE7061A0C7EBB69D2.jpg",
 10                 "http://image.tianjimedia.com/uploadImages/2015/202/27/57RF8ZHG8A4T_5020a2a4697650b89c394237ba9ffbb45fe8555a2cbec-6O6nmI_fw658.jpg"
 11             ],
 12             "middle": [
 13                 "http://img.mukewang.com/54f55ee60001850f05000280.jpg",
 14                 "http://img7.doubanio.com/view/note/large/public/p26832324.jpg",
 15                 "http://img.mukewang.com/546570370001f8a906000338-590-330.jpg",
 16                 "http://img.mukewang.com/55f93f980001f52125001408-590-330.jpg"
 17             ],
 18             "footer": [
 19                 {
 20                     "title": "5個新ios課程",
 21                     "info": "jack大拿發佈",
 22                     "from": "來自上海的講師",
 23                     "imageOne": "http://i7.hexunimg.cn/2015-07-07/177346079.jpg",
 24                     "imageTwo": "http://imgsrc.baidu.com/forum/w%3D580/sign=2ca8123a261f95caa6f592bef9167fc5/bc1cae51f81986188dd8f8c049ed2e738ad4e6da.jpg",
 25                     "destationUrl": "http://www.imooc.com/learn/677"
 26                 },
 27                 {
 28                     "title": "3個新android課程",
 29                     "info": "herry-android高級開發",
 30                     "from": "來自北京的講師",
 31                     "imageOne": "http://imgsrc.baidu.com/forum/w%3D580/sign=4e0ee1bcd2c8a786be2a4a065709c9c7/bc71953eb13533fae99ad268abd3fd1f40345bf5.jpg",
 32                     "imageTwo": "https://images0.cnblogs.com/news/66372/201412/041520272014384.png",
 33                     "destationUrl": "http://www.imooc.com/learn/690"
 34                 }
 35             ]
 36         },
 37         "list": [
 38             {
 39                 "type": 2,
 40                 "logo": "http://v1.qzone.cc/avatar/201305/17/22/06/519639762c4e6138.jpg%21200x200.jpg",
 41                 "title": "tb73399384",
 42                 "info": "1",
 43                 "price": "$1200",
 44                 "text": "還在手動寫繁鎖的頁面嗎？GRUT讓你脫離苦海.",
 45                 "from": " 來自北京|新中關",
 46                 "zan": "5",
 47                 "url": [
 48                     "http://img.mukewang.com/54f55ee60001850f05000280.jpg"
 49                 ]
 50             },
 51             {
 52                 "type": 3,
 53                 "title": "7天搞定Node.js微信公衆號@前端到後臺ThinkPHP開發整站@組件方式開發WebAPP全站@飛速上手的跨平臺App開始@Yii2.0全力出擊打造完整電商",
 54                 "price": "當前價格:128.00@當前價格:268.00@當前價格:78.00@當前價格:88.00@當前價格:168.00",
 55                 "info": "【專治各類疑問】什麼是收費課?@【專治各類疑問】爲何要收費?@【專治各類疑問】收費課程的核心價值?@【專治各類疑問】收費課與免費課的區別?@【專治各類疑問】如何購買課程?",
 56                 "text": "842人在學@1353人在學@345人在學@1264人在學@737人在學",
 57                 "url": [
 58                     "http://img.zcool.cn/community/01bba8564aefde32f87512f6a47ea3.jpg",
 59                     "http://i8.hexunimg.cn/2015-08-21/178515688.jpg",
 60                     "http://img.mukewang.com/54b619d70001294906000338-590-330.jpg",
 61                     "http://img.mukewang.com/539a5dac0001199007200404-500-284.jpg",
 62                     "http://img.mukewang.com/55657fa600015fe206000338-590-330.jpg",
 63                     "http://img.mukewang.com/5668dc790001aa2b06000338-590-330.jpg",
 64                     "http://img.mukewang.com/55f93f980001f52125001408-590-330.jpg",
 65                     "http://img0.imgtn.bdimg.com/it/u=2174499043,1857890027&fm=21&gp=0.jpg",
 66                     "http://img.mukewang.com/56556ecb00010b7806000338-590-330.jpg",
 67                     "http://img4.imgtn.bdimg.com/it/u=3072502270,3193310350&fm=21&gp=0.jpg",
 68                     "http://img.mukewang.com/56e617dd0001583d06000338-590-330.jpg",
 69                     "http://img.mukewang.com/5487a78e000105b606000338-590-330.jpg",
 70                     "http://img3.imgtn.bdimg.com/it/u=1105015795,3331123080&fm=21&gp=0.jpg",
 71                     "http://i0.hdslb.com/bfs/archive/cd265f24dae73ad0afaae638735b67749a8acfb5.jpg",
 72                     "http://i0.hdslb.com/bfs/archive/db522f316a9f555d8fa9bfe856c5a606612747d6.jpg"
 73                 ]
 74             },
 75             {
 76                 "type": 0,
 77                 "logo": "http://b.hiphotos.baidu.com/zhidao/pic/item/d1a20cf431adcbefef0f982fabaf2edda3cc9fe4.jpg",
 78                 "title": "今日必學",
 79                 "info": "1",
 80                 "text": "想成爲全棧工程師嗎，MogoDB你的不二法寶.",
 81                 "site": "http://www.imooc.com/learn/595",
 82                 "from": "來自南京",
 83                 "zan": "10",
 84                 "resource": "http://fairee.vicp.net:83/2016rm/0116/baishi160116.mp4",
 85                 "adid": "00000001112",
 86                 "clickUrl": "http://www.imooc.com/",
 87                 "clickMonitor": [
 88                     {
 89                         "ver": "0",
 90                         "url": "http://imooc.com/click??click=1"
 91                     },
 92                     {
 93                         "ver": "0",
 94                         "url": "http://imooc.com/click?click=2"
 95                     }
 96                 ],
 97                 "startMonitor": [
 98                     {
 99                         "ver": "0",
100                         "url": "http://imooc.com/show?impression=1"
101                     },
102                     {
103                         "ver": "0",
104                         "url": "http: //imooc.com/show?impression=2"
105                     }
106                 ],
107                 "middleMonitor": [
108                     {
109                         "ver": "0",
110                         "url": "http://imooc.com/show?SU=1",
111                         "time": 5
112                     },
113                     {
114                         "ver": "0",
115                         "url": "http: //imooc.com/show?impression=2",
116                         "time": 5
117                     }
118                 ],
119                 "endMonitor": [
120                     {
121                         "ver": "0",
122                         "url": "http://imooc.com/show?end=1",
123                         "time": 5
124                     },
125                     {
126                         "ver": "0",
127                         "url": "http: //imooc.com/show?end=2",
128                         "time": 5
129                     }
130                 ]
131             },
132             {
133                 "type": 1,
134                 "logo": "http://img3.duitang.com/uploads/item/201407/01/20140701222607_AnKfj.thumb.224_0.jpeg",
135                 "title": "qndroid",
136                 "info": "2",
137                 "price": "$2400",
138                 "text": "來慕課網,你能夠學到任何你想學的知識.看視頻還不夠？別擔憂，咱們還有大神手把手教你。",
139                 "from": " 來自北京|德外大街",
140                 "zan": "5",
141                 "url": [
142                     "http://img.mukewang.com/549bda090001c53e06000338-590-330.jpg",
143                     "http://img.mukewang.com/5707604300018d0406000338-590-330.jpg",
144                     "http://articles.csdn.net/uploads/allimg/150617/6_150617172820_1.png",
145                     "http://f1.diyitui.com/b3/e1/db/5f/24/ea/d8/59/1e/ea/28/04/b3/57/d6/6f.jpg",
146                     "http://upload1.techweb.com.cn/s/320/2015/0527/1432714922459.jpg"
147                 ]
148             },
149             {
150                 "type": 2,
151                 "logo": "http://img0.imgtn.bdimg.com/it/u=3266845821,3017593921&fm=21&gp=0.jpg",
152                 "title": "臭腳0000",
153                 "info": "1",
154                 "price": "$1199",
155                 "text": "還不會IM程序嗎？找我就對了，5小時讓你從IM小白到大神.",
156                 "from": "來自珠海",
157                 "zan": "2",
158                 "url": [
159                     "http://it.enorth.com.cn/pic2014/002/000/092/00200009288_502cc21c.png"
160                 ]
161             },
162             {
163                 "type": 1,
164                 "logo": "http://minimg.hexun.com/i1.hexunimg.cn/2014-03-07/162829724_250x200.jpg",
165                 "title": "慕課風采",
166                 "info": "3",
167                 "price": "只求贊",
168                 "text": "慕課網，一家致力於爲全部互聯網學子提供幫助的情懷培訓機構，還要猶豫什麼，加入慕課網這個你們庭，一塊兒和喜歡的人作喜歡的事兒.",
169                 "from": "來自北京",
170                 "zan": "1",
171                 "url": [
172                     "http://img3.imgtn.bdimg.com/it/u=3328472612,2780698499&fm=15&gp=0.jpg",
173                     "http://minimg.hexun.com/i1.hexunimg.cn/2014-03-07/162829724_250x200.jpg",
174                     "http://www.tzkd.com/uploadfile/2015/0917/20150917114818920.jpg"
175                 ]
176             },
177             {
178                 "type": 2,
179                 "logo": "http://awb.img.xmtbang.com/img/uploadnew/201510/23/ccaeb2d2abe94fa6b3efe014e9146e94.jpg",
180                 "title": "xiaopangzi",
181                 "info": "3",
182                 "price": "$130",
183                 "text": "還在爲面試而發愁嗎，還在爲BAT而日思夜想嗎？來跟大神學面試技巧.",
184                 "from": "來自大連",
185                 "zan": "3",
186                 "url": [
187                     "http://awb.img1.xmtbang.com/cover201510/20151023/thumb/abdaa24b3aa742e880c743e49a516b78.jpg"
188                 ]
189             }
190         ]
191     }
192 }

 1 package com.youdu.module.recommand;
 2 
 3 import com.youdu.module.BaseModel;
 4 import com.youdu.module.monitor.Monitor;
 5 import com.youdu.module.monitor.emevent.EMEvent;
 6 
 7 import java.util.ArrayList;
 8 
 9 /**
10  * *******************************************************
11  *
12  * @文件名稱：RecommandValue.java
13  * @文件描述：搜索實體
14  ********************************************************
15  */
16 public class RecommandBodyValue extends BaseModel {
17 
18     public int type;
19     public String logo;
20     public String title;
21     public String info;
22     public String price;
23     public String text;
24     public String site;
25     public String from;
26     public String zan;
27     public ArrayList<String> url;
28 
29     //視頻專用
30     public String thumb;
31     public String resource;
32     public String resourceID;
33     public String adid;
34     public ArrayList<Monitor> startMonitor;
35     public ArrayList<Monitor> middleMonitor;
36     public ArrayList<Monitor> endMonitor;
37     public String clickUrl;
38     public ArrayList<Monitor> clickMonitor;
39     public EMEvent event;
40 
41 }

3.單一item的初始化

3.1 更新UI

【說明】獲取到數據以後通常就是更新UI

3.2 數據適配器中的數據的處理

【單圖的佈局】q0pwzp\Client_Code\app\src\main\res\layout\item_product_card_one_layout.xml

  1 <RelativeLayout
  2     xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:layout_width="match_parent"
  4     android:layout_height="wrap_content"
  5     android:background="@color/white"
  6 >
  7 
  8     <de.hdodenhof.circleimageview.CircleImageView
  9         android:id="@+id/item_logo_view"
 10         android:layout_width="50dp"
 11         android:layout_height="50dp"
 12         android:layout_marginBottom="10dp"
 13         android:layout_marginLeft="15dp"
 14         android:layout_marginRight="5dp"
 15         android:layout_marginTop="10dp"
 16         android:background="@drawable/default_user_avatar"
 17     />
 18 
 19     <TextView
 20         android:id="@+id/item_title_view"
 21         android:layout_width="wrap_content"
 22         android:layout_height="wrap_content"
 23         android:layout_alignTop="@id/item_logo_view"
 24         android:layout_toRightOf="@id/item_logo_view"
 25         android:text="微微一笑很優酷"
 26         android:textColor="@color/color_333333"
 27         android:textSize="18sp"
 28         android:textStyle="bold"/>
 29 
 30     <TextView
 31         android:id="@+id/item_price_view"
 32         android:layout_width="wrap_content"
 33         android:layout_height="wrap_content"
 34         android:layout_alignParentRight="true"
 35         android:layout_alignTop="@id/item_title_view"
 36         android:layout_marginRight="15dp"
 37         android:text="$123"
 38         android:textColor="@color/color_ffff4444"
 39         android:textSize="18sp"
 40     />
 41 
 42     <TextView
 43         android:id="@+id/item_info_view"
 44         android:layout_width="wrap_content"
 45         android:layout_height="wrap_content"
 46         android:layout_alignBottom="@id/item_logo_view"
 47         android:layout_toRightOf="@id/item_logo_view"
 48         android:text="@string/video"
 49         android:textColor="@color/result_view"
 50         android:textSize="16sp"
 51     />
 52 
 53 
 54     <ImageView
 55         android:id="@+id/product_photo_view"
 56         android:layout_width="250dp"
 57         android:layout_height="150dp"
 58         android:layout_below="@id/item_logo_view"
 59         android:layout_marginLeft="15dp"
 60         android:layout_marginRight="5dp"
 61     />
 62 
 63     <TextView
 64         android:id="@+id/item_footer_view"
 65         android:layout_width="match_parent"
 66         android:layout_height="wrap_content"
 67         android:layout_below="@id/product_photo_view"
 68         android:layout_marginBottom="12dp"
 69         android:layout_marginTop="12dp"
 70         android:ellipsize="end"
 71         android:lines="2"
 72         android:paddingLeft="15dp"
 73         android:paddingRight="15dp"
 74         android:text="楊洋鄭爽「聊」破次元盛,甜蜜演繹《微微一笑很優酷》優酷獨家熱播中"
 75         android:textColor="@color/color_333333"
 76         android:textSize="16sp"/>
 77 
 78     <View
 79         android:id="@+id/divider"
 80         android:layout_width="match_parent"
 81         android:layout_height="0.5dp"
 82         android:layout_below="@id/item_footer_view"
 83         android:layout_marginLeft="15dp"
 84         android:layout_marginRight="15dp"
 85         android:background="@color/color_d0d0d0"
 86     />
 87 
 88     <TextView
 89         android:id="@+id/item_from_view"
 90         android:layout_width="wrap_content"
 91         android:layout_height="wrap_content"
 92         android:layout_below="@id/divider"
 93         android:layout_marginBottom="12dp"
 94         android:layout_marginLeft="15dp"
 95         android:layout_marginTop="12dp"
 96         android:text="來自北京"
 97         android:textColor="@android:color/holo_blue_light"
 98         android:textSize="15sp"
 99     />
100 
101     <TextView
102         android:id="@+id/item_zan_view"
103         android:layout_width="wrap_content"
104         android:layout_height="wrap_content"
105         android:layout_alignParentRight="true"
106         android:layout_below="@id/divider"
107         android:layout_marginBottom="12dp"
108         android:layout_marginRight="15dp"
109         android:layout_marginTop="12dp"
110         android:text="來自北京"
111         android:textColor="@color/color_bfbfbf"
112         android:textSize="15sp"
113     />
114 </RelativeLayout>

【單圖的效果】

4. 多圖item的開發

【說明】由於多圖的圖的數量不必定，所以須要動態的添加圖片的數量，而且經過水平的scrollView進行包裹；

【佈局】

  1 <RelativeLayout
  2     xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:layout_width="match_parent"
  4     android:layout_height="wrap_content"
  5     android:background="@color/white"
  6 >
  7 
  8     <de.hdodenhof.circleimageview.CircleImageView
  9         android:id="@+id/item_logo_view"
 10         android:layout_width="50dp"
 11         android:layout_height="50dp"
 12         android:layout_marginBottom="10dp"
 13         android:layout_marginLeft="15dp"
 14         android:layout_marginRight="5dp"
 15         android:layout_marginTop="10dp"
 16         android:background="@drawable/default_user_avatar"
 17     />
 18 
 19     <TextView
 20         android:id="@+id/item_title_view"
 21         android:layout_width="wrap_content"
 22         android:layout_height="wrap_content"
 23         android:layout_alignTop="@id/item_logo_view"
 24         android:layout_toRightOf="@id/item_logo_view"
 25         android:text="微微一笑很優酷"
 26         android:textColor="@color/color_333333"
 27         android:textSize="18sp"
 28         android:textStyle="bold"/>
 29 
 30     <TextView
 31         android:id="@+id/item_price_view"
 32         android:layout_width="wrap_content"
 33         android:layout_height="wrap_content"
 34         android:layout_alignParentRight="true"
 35         android:layout_alignTop="@id/item_title_view"
 36         android:layout_marginRight="15dp"
 37         android:text="$123"
 38         android:textColor="@color/color_ffff4444"
 39         android:textSize="18sp"
 40     />
 41 
 42     <TextView
 43         android:id="@+id/item_info_view"
 44         android:layout_width="wrap_content"
 45         android:layout_height="wrap_content"
 46         android:layout_alignBottom="@id/item_logo_view"
 47         android:layout_toRightOf="@id/item_logo_view"
 48         android:text="@string/video"
 49         android:textColor="@color/result_view"
 50         android:textSize="16sp"
 51     />
 52 
 53     <HorizontalScrollView
 54         android:id="@+id/item_product_layout"
 55         android:layout_width="match_parent"
 56         android:layout_height="100dp"
 57         android:layout_below="@id/item_logo_view"
 58         android:layout_marginLeft="15dp"
 59         android:layout_marginRight="5dp"
 60         android:scrollbars="none"
 61     >
 62 
 63         <LinearLayout
 64             android:id="@+id/product_photo_layout"
 65             android:layout_width="match_parent"
 66             android:layout_height="match_parent"
 67             android:orientation="horizontal"
 68         >
 69         </LinearLayout>
 70     </HorizontalScrollView>
 71 
 72     <TextView
 73         android:id="@+id/item_footer_view"
 74         android:layout_width="match_parent"
 75         android:layout_height="wrap_content"
 76         android:layout_below="@id/item_product_layout"
 77         android:layout_marginBottom="12dp"
 78         android:layout_marginTop="12dp"
 79         android:ellipsize="end"
 80         android:lines="2"
 81         android:paddingLeft="15dp"
 82         android:paddingRight="15dp"
 83         android:text="楊洋鄭爽「聊」破次元盛,甜蜜演繹《微微一笑很優酷》優酷獨家熱播中"
 84         android:textColor="@color/color_333333"
 85         android:textSize="16sp"/>
 86 
 87     <View
 88         android:id="@+id/divider"
 89         android:layout_width="match_parent"
 90         android:layout_height="0.5dp"
 91         android:layout_below="@id/item_footer_view"
 92         android:layout_marginLeft="15dp"
 93         android:layout_marginRight="15dp"
 94         android:background="@color/color_d0d0d0"
 95     />
 96 
 97     <TextView
 98         android:id="@+id/item_from_view"
 99         android:layout_width="wrap_content"
100         android:layout_height="wrap_content"
101         android:layout_below="@id/divider"
102         android:layout_marginBottom="12dp"
103         android:layout_marginLeft="15dp"
104         android:layout_marginTop="12dp"
105         android:text="來自北京"
106         android:textColor="@android:color/holo_blue_light"
107         android:textSize="15sp"
108     />
109 
110     <TextView
111         android:id="@+id/item_zan_view"
112         android:layout_width="wrap_content"
113         android:layout_height="wrap_content"
114         android:layout_alignParentRight="true"
115         android:layout_below="@id/divider"
116         android:layout_marginBottom="12dp"
117         android:layout_marginRight="15dp"
118         android:layout_marginTop="12dp"
119         android:text="來自北京"
120         android:textColor="@color/color_bfbfbf"
121         android:textSize="15sp"
122     />
123 </RelativeLayout>

【初始化view數據】

【綁定數據】

【動態建立ImageView】與靜態xml中建立iamgeView控件的步驟是一致的，先建立對象，而後設置一系列的屬性；【注意】設置設置屬性的佈局要與父控件保持一致；

【效果】

5.ViewpagerItem的開發

5.1 效果及思路

【目標效果】

【思路】

5.2佈局

 1 <RelativeLayout
 2     xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="wrap_content"
 5     android:background="@color/color_cccccc"
 6     android:clipChildren="false"
 7     >
 8 
 9     <android.support.v4.view.ViewPager
10         android:id="@+id/pager"
11         android:layout_width="match_parent"
12         android:layout_height="290dp"
13         android:layout_marginLeft="50dp"
14         android:layout_marginRight="50dp"
15         android:clipChildren="false"
16         />
17 </RelativeLayout>

5.3 原始數據中的二維數據的轉換

【須要加載的原始數據】type：3就是viewPager要加載的數據，都是使用符號「@」進行拼接在了一塊兒；這樣將二維數據轉化爲了一維的數據；

在哪一個jsonObject後，經過字符串的分割，將合併的數據拆開，而後造成一個list；而後使用此list初始化這個pager；

【適配器】

【源碼】

 1 package com.youdu.adapter;
 2 
 3 import android.content.Context;
 4 import android.content.Intent;
 5 import android.support.v4.view.PagerAdapter;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 import android.widget.ImageView;
10 import android.widget.TextView;
11 
12 import com.youdu.R;
13 import com.youdu.activity.CourseDetailActivity;
14 import com.youdu.module.recommand.RecommandBodyValue;
15 import com.youdu.util.ImageLoaderManager;
16 
17 import java.util.ArrayList;
18 
19 
20 public class HotSalePagerAdapter extends PagerAdapter {
21     private Context mContext;
22     private ArrayList<RecommandBodyValue> mData;
23     private LayoutInflater mInflate;
24     private ImageLoaderManager mImageLoader;
25 
26     public HotSalePagerAdapter(Context context, ArrayList<RecommandBodyValue> list) {
27         mContext = context;
28         mData = list;
29         mInflate = LayoutInflater.from(mContext);
30         mImageLoader = ImageLoaderManager.getInstance(mContext);
31     }
32 
33     @Override
34     public int getCount() {
35         return Integer.MAX_VALUE; //設置爲無限循環--此處有問題；
36     }
37 
38     @Override
39     public boolean isViewFromObject(View arg0, Object arg1) {
40         return arg0 == arg1;
41     }
42 
43     @Override
44     public void destroyItem(ViewGroup container, int position, Object object) {
45         container.removeView((View) object);
46     }
47 
48     /**
49      * 載入圖片進去，用當前的position 除以 圖片數組長度取餘數是關鍵
50      */
51     @Override
52     public Object instantiateItem(ViewGroup container, int position) {
53         //拿到數據
54         final RecommandBodyValue value = mData.get(position % mData.size());
55         //初始化佈局
56         View rootView = mInflate.inflate(R.layout.item_hot_product_pager_layout, null);
57         TextView titleView = (TextView) rootView.findViewById(R.id.title_view);
58         TextView infoView = (TextView) rootView.findViewById(R.id.info_view);
59         TextView gonggaoView = (TextView) rootView.findViewById(R.id.gonggao_view);
60         TextView saleView = (TextView) rootView.findViewById(R.id.sale_num_view);
61         ImageView[] imageViews = new ImageView[3];
62         imageViews[0] = (ImageView) rootView.findViewById(R.id.image_one);
63         imageViews[1] = (ImageView) rootView.findViewById(R.id.image_two);
64         imageViews[2] = (ImageView) rootView.findViewById(R.id.image_three);
65         //添加監聽事件
66         rootView.setOnClickListener(new View.OnClickListener() {
67             @Override
68             public void onClick(View v) {
69                 Intent intent = new Intent(mContext, CourseDetailActivity.class);
70                 intent.putExtra(CourseDetailActivity.COURSE_ID, value.adid);
71                 mContext.startActivity(intent);
72             }
73         });
74         //初始化數據
75         titleView.setText(value.title);
76         infoView.setText(value.price);
77         gonggaoView.setText(value.info);
78         saleView.setText(value.text);
79         for (int i = 0; i < imageViews.length; i++) {
80             mImageLoader.displayImage(imageViews[i], value.url.get(i));
81         }
82         //增長此佈局
83         container.addView(rootView, 0);
84         return rootView;
85     }
86 }

【支持左右無限循環】開始的時候直接跳轉到中間處便可；

6. 爲listView添加頭部佈局

6.1 思路

6.2 佈局

【源碼】

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2                 android:layout_width="match_parent"
 3                 android:layout_height="match_parent"
 4                 android:background="@color/white"
 5 
 6 >
 7     <cn.trinea.android.view.autoscrollviewpager.AutoScrollViewPager
 8         android:id="@+id/pager"
 9         android:layout_width="match_parent"
10         android:layout_height="150dp"
11     />
12     <com.youdu.view.viewpagerindictor.CirclePageIndicator
13         android:id="@+id/pager_indictor_view"
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"
16         android:layout_alignBottom="@id/pager"
17         android:layout_centerHorizontal="true"
18         android:layout_marginBottom="12dp"
19         android:padding="5dp"
20     />
21     <TextView
22         android:id="@+id/zuixing_view"
23         android:layout_width="match_parent"
24         android:layout_height="50dp"
25         android:layout_below="@id/pager"
26         android:gravity="center"
27         android:textColor="@color/color_ff33b5e5"
28         android:textSize="22sp"
29     />
30 
31     <LinearLayout
32         android:id="@+id/category_layout"
33         android:layout_width="match_parent"
34         android:layout_height="100dp"
35         android:layout_below="@id/zuixing_view"
36         android:orientation="horizontal"
37     >
38 
39         <ImageView
40             android:id="@+id/head_image_one"
41             android:layout_width="match_parent"
42             android:layout_height="match_parent"
43             android:layout_weight="1"
44             android:scaleType="fitXY"
45         />
46 
47         <View
48             android:layout_width="7dp"
49             android:layout_height="match_parent"
50         />
51 
52         <ImageView
53             android:id="@+id/head_image_two"
54             android:layout_width="match_parent"
55             android:layout_height="match_parent"
56             android:layout_weight="1"
57             android:scaleType="fitXY"
58         />
59 
60         <View
61             android:layout_width="7dp"
62             android:layout_height="match_parent"
63         />
64 
65         <ImageView
66             android:id="@+id/head_image_three"
67             android:layout_width="match_parent"
68             android:layout_height="match_parent"
69             android:layout_weight="1"
70             android:scaleType="fitXY"
71         />
72 
73         <View
74             android:layout_width="7dp"
75             android:layout_height="match_parent"
76         />
77 
78         <ImageView
79             android:id="@+id/head_image_four"
80             android:layout_width="match_parent"
81             android:layout_height="match_parent"
82             android:layout_weight="1"
83             android:scaleType="fitXY"
84         />
85     </LinearLayout>
86 
87     <LinearLayout
88         android:id="@+id/content_layout"
89         android:layout_width="match_parent"
90         android:layout_height="wrap_content"
91         android:layout_below="@id/category_layout"
92         android:orientation="vertical"
93     />
94 </RelativeLayout>

【自定義頭View】

 1 package com.youdu.view.home;
 2 
 3 import android.content.Context;
 4 import android.util.AttributeSet;
 5 import android.view.LayoutInflater;
 6 import android.widget.ImageView;
 7 import android.widget.LinearLayout;
 8 import android.widget.RelativeLayout;
 9 import android.widget.TextView;
10 
11 import com.youdu.R;
12 import com.youdu.adapter.PhotoPagerAdapter;
13 import com.youdu.module.recommand.RecommandFooterValue;
14 import com.youdu.module.recommand.RecommandHeadValue;
15 import com.youdu.adutil.ImageLoaderUtil;
16 import com.youdu.view.viewpagerindictor.CirclePageIndicator;
17 
18 import cn.trinea.android.view.autoscrollviewpager.AutoScrollViewPager;
19 
20 /**
21  * @author: vision
22  * @function:
23  * @date: 16/9/2
24  */
25 public class HomeHeaderLayout extends RelativeLayout {
26 
27     private Context mContext;
28 
29     /**
30      * UI
31      */
32     private RelativeLayout mRootView;
33     private AutoScrollViewPager mViewPager;
34     private CirclePageIndicator mPagerIndictor;
35     private TextView mHotView;
36     private PhotoPagerAdapter mAdapter;
37     private ImageView[] mImageViews = new ImageView[4];
38     private LinearLayout mFootLayout;
39 
40     /**
41      * Data
42      */
43     private RecommandHeadValue mHeaderValue;
44     private ImageLoaderUtil mImageLoader;
45 
46     public HomeHeaderLayout(Context context, RecommandHeadValue headerValue) {
47         this(context, null, headerValue);
48     }
49 
50     public HomeHeaderLayout(Context context, AttributeSet attrs, RecommandHeadValue headerValue) {
51         super(context, attrs);
52         mContext = context;
53         mHeaderValue = headerValue;
54         mImageLoader = ImageLoaderUtil.getInstance(mContext);
55         initView();
56     }
57 
58     private void initView() {
59         LayoutInflater inflater = LayoutInflater.from(mContext);
60         mRootView = (RelativeLayout) inflater.inflate(R.layout.listview_home_head_layout, this); //加載的佈局 61         mViewPager = (AutoScrollViewPager) mRootView.findViewById(R.id.pager);
62         mPagerIndictor = (CirclePageIndicator) mRootView.findViewById(R.id.pager_indictor_view);
63         mHotView = (TextView) mRootView.findViewById(R.id.zuixing_view);
64         mImageViews[0] = (ImageView) mRootView.findViewById(R.id.head_image_one);
65         mImageViews[1] = (ImageView) mRootView.findViewById(R.id.head_image_two);
66         mImageViews[2] = (ImageView) mRootView.findViewById(R.id.head_image_three);
67         mImageViews[3] = (ImageView) mRootView.findViewById(R.id.head_image_four);
68         mFootLayout = (LinearLayout) mRootView.findViewById(R.id.content_layout);
69 
70         //爲view填充數據；
71         mAdapter = new PhotoPagerAdapter(mContext, mHeaderValue.ads, true);
72         mViewPager.setAdapter(mAdapter);
73         mViewPager.startAutoScroll(3000);
74         mPagerIndictor.setViewPager(mViewPager);
75 
76         for (int i = 0; i < mImageViews.length; i++) {
77             mImageLoader.displayImage(mImageViews[i], mHeaderValue.middle.get(i));
78         }
79 
80         for (RecommandFooterValue value : mHeaderValue.footer) {
81             mFootLayout.addView(createItem(value));
82         }
83         mHotView.setText(mContext.getString(R.string.today_zuixing));
84     }
85 
86     private HomeBottomItem createItem(RecommandFooterValue value) {
87         HomeBottomItem item = new HomeBottomItem(mContext, value);
88         return item;
89     }
90 }