本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/
项目已经做完，
https://github.com/15829238397/CN5E-shop
仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章
前言
上一更我们成功完成了地址选择器，以及收货人信息管理。接下来我们还剩下什么呢？对啦，订单，这也是本项目最后一个模块啦，想必大家已经按耐不住激动地心情了吧？来上效果
订单.gif
内容
NineGridView
以下关于NineGridView内容来自https://github.com/jeasonlzy/NineGridView
简介
类似QQ空间，微信朋友圈，微博主页等，展示图片的九宫格控件，自动根据图片的数量确定图片大小和控件大小，使用Adapter模式设置图片，对外提供接口回调，支持任意的图片加载框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等，支持点击图片全屏预览大图。
用法
1.用法
使用前，对于Android Studio的用户，可以选择添加:
compile 'com.lzy.widget:ninegridview:0.2.0'
或者使用
compile project(':ninegridview')
2.项目功能
- 使用Adapter模式设置图片
- 当图片数量只有一张时，自动根据图片大小调整控件大小
- 默认增加了图片点击全屏预览效果，并附带预览动画
- 使用接口加载图片,支持任意的图片加载框架,如 Glide,ImageLoader,Fresco,xUtils3,Picasso 等
- 整合了PhotoView图片预览
- 使用接口抽出图片的加载方式，可以方便的将Glide替换成自己喜欢的ImageLoader等
- 支持fill个grid两种显示模式
- 当获取的图片数量超过最大显示的图片数量时，最后一张图片上会显示剩余数量（类似于QQ的动态效果）
- 使用代码简单，只需要几行代码
3.参数含义
自定义属性名字
ngv_singleImageSize
只显示一张图片时的最大图片大小
ngv_singleImageRatio
只显示一张图片时图片宽高比
ngv_gridSpacing
网格显示图片时，图片之间的间距，默认3dp
ngv_maxSize
最多显示图片的数量，默认最大9张
ngv_mode
支持fill和grid两种显示模式，其中grid模式在显示4张图片时采用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是库中提供的数据Bean，需要两个url，分别表示小图和大图的url，没有大图或者小图，则都赋给相同的Url即可。
- ClickNineGridViewAdapter是库中提供的默认实现了点击预览的Adapter，如果不想使用预览效果，可以自己继承 NineGridViewAdapter 实现其中 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));
订单页面实现
1.订单页面实现
这次的订单页面几乎完全用商品列表的页面（不熟悉的请看仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）），只是更换了填充recyclerView的adapter。在这里不给详细解释。
2.adapter中九宫格的实现
- 在application中对nineGridView的图片下载器进行初始化。
/** 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);
}
}
这样我们就完成了订单列表展示页面。详情代码请戳页首github。
网友评论