对第二个demo进行修改

界面如下，主要是想要巩固UIcollectionview的用法，将第二块食品部分用UIcollectionview来实现。其他各部分不变。即第一部分用UIscrollview，第二部分用UIcollectionview，第三第四部分用UItableview 。对应的将UItableview的section值由3改为2。

首先，创建FoodCollectionViewCell ，.h文件如下

#import <UIKit/UIKit.h>
#import "FoodModel.h"
@interface FoodCollectionViewCell : UICollectionViewCell
@property UIImageView *foodPhoto;
@property UILabel *foodNameLabel;
-(void)setModel:(FoodModel *)foodModel;
@end

.m文件如下

#import "FoodCollectionViewCell.h"

@implementation FoodCollectionViewCell
-(id)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if(self){
       
        [self createUI];
    }
    return self;
}

-(void)createUI{
    self.foodPhoto=[[UIImageView alloc]initWithFrame:CGRectMake(5, 10, 70, 70)];
    [self.contentView addSubview:self.foodPhoto];
    
    self.foodNameLabel=[[UILabel alloc]initWithFrame:CGRectMake(5, _foodPhoto.frame.size.height+20, self.frame.size.width, 20)];  //这个self指的是cell，所以定义宽度self.frame.size.width，即食品名称标签的宽度就是各个cell的宽度。共8个cell
    self.foodNameLabel.textAlignment=NSTextAlignmentCenter;
    [self.contentView addSubview:self.foodNameLabel];
}

-(void)setModel:(FoodModel *)foodModel{
    self.foodNameLabel.text=foodModel.foodName;
    self.foodPhoto.image=[UIImage imageNamed:foodModel.foodPhotoName];
}

@end

接下来就是进行viewcontroller中代码的修改，引入FoodCollectionViewCell.h ，然后生成UIcollectionview，

注意需要先声明layout，然后才能生成UIcollectionview 。在viewDidLoad中加入如下代码

UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
    self.collectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 230, MAINSCREENWIDTH, 220) collectionViewLayout:layout];
    self.collectionView.showsVerticalScrollIndicator=NO;
    self.collectionView.delegate=self;
    self.collectionView.dataSource=self;
    self.collectionView.backgroundColor=[UIColor whiteColor];
//    [self.view addSubview:self.collectionView];
    [self.backScrollView addSubview:self.collectionView];
    
    [self.collectionView registerClass:[FoodCollectionViewCell class] forCellWithReuseIdentifier:@"identifier"];   //注册cell
    layout.minimumLineSpacing=0;
    layout.sectionInset=UIEdgeInsetsMake(0, 9, 0, 9);
    layout.itemSize=CGSizeMake(MAINSCREENWIDTH/4-25, 110);

然后实现代理方法

-(NSInteger)numbersOfSectionInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _foodArray.count;
}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    FoodCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath];
    [cell setModel:_foodArray[indexPath.row]];
    return cell;
}

运行，会发现有一些问题，比如collectionview设定了不能滑动，但是tableView显示不全，需要滑动，那么界面的滑动从第三部分才开始，整个界面特别难看，可移动的区域也很小。

于是，往view里面添加一整个backscrollview ，将scrollview、collectionview、tableView以计算出来的固定值加入到backscrollview中，禁止collectionview、tableView滑动，允许整个backscrollview滑动，这样一来问题也就解决了。

然后还有一个问题就是，整个界面是一个垂直滚动的scrollview，第一部分是一个水平滚动的scrollview，垂直的会影响水平的page跳转。

百度了之后发现有人通过偏移量判断是垂直还是水平滑动，但是觉得略复杂。。。还有的说法是可以用tag区分两个scrollview，于是选了这个方法，是可行的。

 [scrollView setTag:12];  //轮播图

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//当滑动快要结束时，调用这个方法,控制下面那个滚动栏的滑动
    if(scrollView.tag==12){   //发现整个backscrollview是垂直滑动，而scrollview是水平滑动，会互相干扰，所以用tag来标识两个scrollview  。 网上还有看到判断移动距离来判断是水平滑动还是垂直滑动的，感觉略复杂，就跳过了
    CGFloat offset=scrollView.contentOffset.x;
    int page=(offset+MAINSCREENWIDTH/2)/MAINSCREENWIDTH;
        self.pageControl.currentPage=page;
    }
}

至此，基本完成。

github： https://github.com/yathe/Next2

对第二个demo进行修改

猜你喜欢