瀑布流-03-通过封装的自定义布局快速实现商品展示

概述


  • 实现效果

  • 设计思路

    • 采用MVC架构,即模型—视图-控制器架构
    • 使用MJExtension框架实现字典转模型
    • 使用MJRefresh框架实现上拉和下拉刷新
      • 上拉刷新,加载新的数据
      • 下拉刷新,加载更多的数据
    • 使用SDWebImage框架加载图片

模型


  • 商品模型需要包含以下属性

    /**商品控件宽度*/
    @property (nonatomic, assign) CGFloat w;
    /**商品控件高度*/
    @property (nonatomic, assign) CGFloat h;
    /**商品图片*/
    @property (nonatomic, copy) NSString *img;
    /**商品价格*/
    @property (nonatomic, copy) NSString *price;
    

视图


  • 通过xib来实现自定义cell(继承自UICollectionViewCell),xib的结构如图

  • 视图的代码实现

    • 包含商品模型属性

      /**商品模型*/
      @property (nonatomic, strong) LYPShop *shop;
      
    • 引用xib中的控件

      //展示商品图片
      @property (weak, nonatomic) IBOutlet UIImageView *imageView;
      //显示商品价格
      @property (weak, nonatomic) IBOutlet UILabel *priceLabel;
      
    • 重写商品模型的setter,使xib中的控件显示乡音的内容

      - (void)setShop:(LYPShop *)shop
      {
          _shop = shop;
          
          //使用SDWebImage设置商品图片
          [self.imageView sd_setImageWithURL:[NSURL URLWithString:shop.img] placeholderImage:[UIImage imageNamed:@"loading"]];
          //设置商品价格
          self.priceLabel.text = shop.price;
      }
      

控制器


  • 创建展示商品的容器,即UICollectionView对象,并初始化

    - (void)setupCollectionView
    {
        //通过封装的自定义布局,创建布局
        LYPWaterFlowLayout *layout = [[LYPWaterFlowLayout alloc] init];
        
        //设置layout的代理
        layout.delegate = self;
        
        //创建collectionView
        UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
        self.collectionView = collectionView;
        
        //设置数据源
        collectionView.dataSource = self;
        //将collectionView添加到控制器的view中
        [self.view addSubview:collectionView];
    }
    
  • 注册通过xib自定义的cell

    /**设置cell的重用标示*/
    static NSString *const LYPShopID = @"shop";
    - (void)registerCell
    {
        //注册cell
        [self.collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([LYPShopCell class]) bundle:nil] forCellWithReuseIdentifier:LYPShopID];
    }
    
  • 设置商品模型数组

    • 添加成员属性

      /**所有的商品模型数组*/
      @property (nonatomic, strong) NSMutableArray *shops;
      
    • 通过懒加载的方式,初始化模型数组

      - (NSMutableArray *)shops
      {
          if (_shops == nil)
          {
              _shops = [NSMutableArray array];
          }
          return _shops;
      }
      
  • 实现刷新功能

    • 刷新的业务逻辑,如图

    • 设置上拉刷新和下拉刷新控件

      - (void)setupRefresh
      {
      	//下拉刷新控件
          self.collectionView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewShops)];
          //view加载完毕,开始下拉刷新
          [self.collectionView.header beginRefreshing];
          
          //上拉刷新控件
          self.collectionView.footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreShops)];
          //一开始隐藏footer
          self.collectionView.footer.hidden = YES;
      }
      
    • 实现加载数据功能

      /**下拉刷新*/
      - (void)loadNewShops
      {
          //通过该函数模拟网络延迟
          dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
              
              //将字典转成模型
              NSArray *shops = [LYPShop objectArrayWithFilename:@"1.plist"];
              
              //清空之前所有的商品模型信息
              [self.shops removeAllObjects];
              //将最新的商品模型信息添加到模型数组中
              [self.shops addObjectsFromArray:shops];
              
              //刷新数据
              [self.collectionView reloadData];
              //结束刷新
              [self.collectionView.header endRefreshing];
          });
      }
      /**上拉刷新*/
      - (void)loadMoreShops
      {
          //通过该函数模拟网络延迟
          dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
              //通过该函数模拟网络延迟
              NSArray *shops = [LYPShop objectArrayWithFilename:@"1.plist"];
              //将新加载的商品模型信息添加到模型数组中
              [self.shops addObjectsFromArray:shops];
              
              //刷新数据
              [self.collectionView reloadData];
              //结束刷新
              [self.collectionView.footer endRefreshing];
          });
      }
      
  • 设置collectionView的数据源

    • 遵守协议UICollectionViewDataSource

    • 设置cell的个数

      - (NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
      {
          //设置上拉刷新控件的状态,无商品时不显示
          self.collectionView.footer.hidden = self.shops.count == 0;
          //返回cell的个数
          return self.shops.count;
      }
      
    • 创建indexPath位置的cell

      - (UICollectionViewCell *)collectionView:(nonnull UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
      {
          //通过重用标示从缓存池中取,若取不到,则自动创建
          LYPShopCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:LYPShopID forIndexPath:indexPath];
          
          //给视图cell的模型赋值,使其设置cell中控件的显示内容
          cell.shop = self.shops[indexPath.item];
          
          return cell;
      }
      
  • 实现layout的代理方法,定制布局

    • 设置每个cell的高度

      - (CGFloat)waterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout heightForItemAtIndex:(NSInteger)index itemWith:(CGFloat)itemWith
      {
          LYPShop *shop = self.shops[index];
          //通过比例计算cell的高度
          return itemWith * shop.h / shop.w;
      }
      
    • 设置列数

      - (NSInteger)columnCountInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
      {
          return 2;
      }
      
    • 设置行间距

      - (CGFloat)rowMarginInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
      {
          return 20;
      }
      
    • 设置列间距

      - (CGFloat)columnMarginInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
      {
          return 40;
      }
      
    • 设置内边距

      - (UIEdgeInsets)edgeInsetsInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
      {
          return UIEdgeInsetsMake(20, 10, 10, 30);
      }
      

改变布局


  • 可以简单地通过改变返回列数的代理方法,来改变布局

    - (NSInteger)columnCountInWaterFlowLayout:(LYPWaterFlowLayout *)waterFlowLayout
    {
    	//返回3列
        return 3;
    }
    
  • 效果如图

posted @ 2015-09-11 09:28  世俗孤岛  阅读(1083)  评论(4编辑  收藏