界面如下,主要是想要巩固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