本項(xiàng)目來(lái)自菜鳥(niǎo)窩止吐，有興趣者點(diǎn)擊http://www.cniao5.com/course/
項(xiàng)目已經(jīng)做完，
https://github.com/15829238397/CN5E-shop
仿京東商城系列0------項(xiàng)目簡(jiǎn)介
仿京東商城系列1------fragmentTabHost實(shí)現(xiàn)底部導(dǎo)航欄
仿京東商城系列2------自定義toolbar
仿京東商城系列3------封裝Okhttp
仿京東商城系列4------輪播廣告條
仿京東商城系列5------商品推薦欄
仿京東商城系列6------下拉刷新上拉加載的商品列表
仿京東商城系列7------商品分類(lèi)頁(yè)面
仿京東商城系列8------自定義的數(shù)量控制器
仿京東商城系列9------購(gòu)物車(chē)數(shù)據(jù)存儲(chǔ)器實(shí)現(xiàn)
仿京東商城系列10------添加購(gòu)物車(chē)勇凭，管理購(gòu)物車(chē)功能實(shí)現(xiàn)
仿京東商城系列11------商品排序功能以及布局切換實(shí)現(xiàn)（Tablayout）
仿京東商城系列12------商品詳細(xì)信息展示（nativie與html交互）
仿京東商城系列13------商品分享（shareSDK）
仿京東商城系列14------用戶登錄以及app登錄攔截
仿京東長(zhǎng)城系列15------用戶注冊(cè)，SMSSDK集成
仿京東商城系列16------支付SDK集成
仿京東商城系列17------支付功能實(shí)現(xiàn)
仿京東商城系列18------xml文件讀热芭瘛（地址選擇器）
仿京東商城系列19------九宮格訂單展示
仿京東商城系列20------終章
前言
上一更我們成功完成了地址選擇器颠焦，以及收貨人信息管理。接下來(lái)我們還剩下什么呢里逆？對(duì)啦进胯，訂單，這也是本項(xiàng)目最后一個(gè)模塊啦原押，想必大家已經(jīng)按耐不住激動(dòng)地心情了吧胁镐？來(lái)上效果
內(nèi)容
NineGridView
以下關(guān)于NineGridView內(nèi)容來(lái)自https://github.com/jeasonlzy/NineGridView
簡(jiǎn)介
類(lèi)似QQ空間，微信朋友圈诸衔，微博主頁(yè)等盯漂，展示圖片的九宮格控件，自動(dòng)根據(jù)圖片的數(shù)量確定圖片大小和控件大小笨农，使用Adapter模式設(shè)置圖片就缆，對(duì)外提供接口回調(diào)，支持任意的圖片加載框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等磁餐，支持點(diǎn)擊圖片全屏預(yù)覽大圖违崇。
用法
1.用法
使用前阿弃，對(duì)于Android Studio的用戶，可以選擇添加:
compile 'com.lzy.widget:ninegridview:0.2.0'
或者使用
compile project(':ninegridview')
2.項(xiàng)目功能
- 使用Adapter模式設(shè)置圖片
- 當(dāng)圖片數(shù)量只有一張時(shí)羞延，自動(dòng)根據(jù)圖片大小調(diào)整控件大小
- 默認(rèn)增加了圖片點(diǎn)擊全屏預(yù)覽效果渣淳，并附帶預(yù)覽動(dòng)畫(huà)
- 使用接口加載圖片,支持任意的圖片加載框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等
- 整合了PhotoView圖片預(yù)覽
- 使用接口抽出圖片的加載方式，可以方便的將Glide替換成自己喜歡的ImageLoader等
- 支持fill個(gè)grid兩種顯示模式
- 當(dāng)獲取的圖片數(shù)量超過(guò)最大顯示的圖片數(shù)量時(shí)伴箩，最后一張圖片上會(huì)顯示剩余數(shù)量（類(lèi)似于QQ的動(dòng)態(tài)效果）
- 使用代碼簡(jiǎn)單入愧，只需要幾行代碼
3.參數(shù)含義
自定義屬性名字
ngv_singleImageSize
只顯示一張圖片時(shí)的最大圖片大小
ngv_singleImageRatio
只顯示一張圖片時(shí)圖片寬高比
ngv_gridSpacing
網(wǎng)格顯示圖片時(shí)，圖片之間的間距嗤谚，默認(rèn)3dp
ngv_maxSize
最多顯示圖片的數(shù)量棺蛛，默認(rèn)最大9張
ngv_mode
支持fill和grid兩種顯示模式，其中g(shù)rid模式在顯示4張圖片時(shí)采用2*2的布局
4.代碼演示
1.在Application中初始化NineGridView的圖片加載器
NineGridView.setImageLoader(new PicassoImageLoader());
/** Picasso 加載 */
private class PicassoImageLoader implements NineGridView.ImageLoader {
@Override
public void onDisplayImage(Context context, ImageView imageView, String url) {
Picasso.with(context).load(url)//
.placeholder(R.drawable.ic_default_image)//
.error(R.drawable.ic_default_image)//
.into(imageView);
}
@Override
public Bitmap getCacheImage(String url) {
return null;
}
}
2.在自己的Adapter中初始化NineGridView的適配器
- ImageInfo是庫(kù)中提供的數(shù)據(jù)Bean巩步，需要兩個(gè)url旁赊，分別表示小圖和大圖的url，沒(méi)有大圖或者小圖椅野，則都賦給相同的Url即可终畅。
- ClickNineGridViewAdapter是庫(kù)中提供的默認(rèn)實(shí)現(xiàn)了點(diǎn)擊預(yù)覽的Adapter，如果不想使用預(yù)覽效果竟闪，可以自己繼承 NineGridViewAdapter 實(shí)現(xiàn)其中 onDisplayImage 方法即可离福。
ArrayList<ImageInfo> imageInfo = new ArrayList<>();
List<EvaluationPic> imageDetails = item.getAttachments();
if (imageDetails != null) {
for (EvaluationPic imageDetail : imageDetails) {
ImageInfo info = new ImageInfo();
info.setThumbnailUrl(imageDetail.smallImageUrl);
info.setBigImageUrl(imageDetail.imageUrl);
imageInfo.add(info);
}
}
holder.nineGrid.setAdapter(new ClickNineGridViewAdapter(context, imageInfo));
訂單頁(yè)面實(shí)現(xiàn)
1.訂單頁(yè)面實(shí)現(xiàn)
這次的訂單頁(yè)面幾乎完全用商品列表的頁(yè)面（不熟悉的請(qǐng)看仿京東商城系列11------商品排序功能以及布局切換實(shí)現(xiàn)（Tablayout）），只是更換了填充recyclerView的adapter炼蛤。在這里不給詳細(xì)解釋妖爷。
2.adapter中九宮格的實(shí)現(xiàn)
- 在application中對(duì)nineGridView的圖片下載器進(jìn)行初始化。
/** Picasso 加載 */
private class PicassoImageLoader implements NineGridView.ImageLoader {
@Override
public void onDisplayImage(Context context, ImageView imageView, String url) {
Picasso.with(context).load(url)//
.placeholder(R.drawable.ic_default_image)//
.error(R.drawable.ic_default_image)//
.into(imageView);
}
@Override
public Bitmap getCacheImage(String url) {
return null;
}
}
@Override
public void onCreate() {
super.onCreate();
NineGridView.setImageLoader(new PicassoImageLoader());
}
- 在自己的Adapter中初始化NineGridView的適配器理朋。
private void initNineGridLayout(OrderMsg orderMsg) {
List<ImageInfo> imageInfos = new ArrayList<>() ;
for (int i = 0; i < orderMsg.getItems().size() ; i++) {
ImageInfo im = new ImageInfo() ;
im.setBigImageUrl(orderMsg.getItems().get(i).getWares().getImgUrl());
im.setThumbnailUrl(orderMsg.getItems().get(i).getWares().getImgUrl());
imageInfos.add(im) ;
}
nineGridAdapter nGridAdater = new nineGridAdapter(context , imageInfos) ;
waresImg.setAdapter(nGridAdater);
}
class nineGridAdapter extends NineGridViewAdapter {
public nineGridAdapter(Context context, List<ImageInfo> imageInfo) {
super(context, imageInfo);
}
}
這樣我們就完成了訂單列表展示頁(yè)面絮识。詳情代碼請(qǐng)戳頁(yè)首github。
