【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 }

【在首页中添加头布局】此处使用的的add方法，而在设置适配器的时候使用的是setAdapter（会覆盖原始的数据）；add能够能够添加多个布局的；由于能够设置多个头布局；尾部的布局也是能够屡次添加的；