您的位置:首页 > 产品设计 > UI/UE

手写CollectionVeiwCell和UICollectionView

2015-06-09 16:36 716 查看
其中创建一个继承于UICollectionViewCell的类

点h中描述出上面想要添加的控件

#import <UIKit/UIKit.h>

@interface CollectionViewCell :UICollectionViewCell

@property(nonatomic,strong)UIImageView *CollimageView;

@property(nonatomic,strong)UILabel *Colllab;

类然后再点m中给它设定一下大小

#import "CollectionViewCell.h"

@implementation CollectionViewCell

-(instancetype)initWithFrame:(CGRect)frame
{

    
   self=[superinitWithFrame:frame];
   if (self)
    {

        //设置CollimageView的大小和在CollCell自带的contentVeiw上面的位置

        self.CollimageView=[[UIImageViewalloc]initWithFrame:CGRectMake(0,
0, 120, 130)];

        //设置Colllabel的大小和所在的位置

        self.Colllab=[[UILabelalloc]initWithFrame:CGRectMake(20,
40, 100, 20)];

        

      //添加到Collection上面,其中self就是这个sell本身,因为Collimage和Colllab都是它自身的东西,所以要用self掉,但是又要加到Cell的contentView上面

        

        [self.contentViewaddSubview:self.CollimageView];

        [self.contentViewaddSubview:self.Colllab];
    }

//返回一个cell

    return
self;
}

@end



然后创建一个继承于UIViewController

在点h文件中添加代理和数据源方法

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
Collectioncell与tableviewcell的区别在于它有三个代理方法
其中UICollectionViewDelegateFlowLayout这个可以认为是UICollectionViewDelegateFlowLayout  的子类

数据然后在点m文件中实现

#import "ViewController.h"

#import "CollectionViewCell.h"

@interface
ViewController ()
{

   UICollectionView * _collectionView;

    NSMutableArray *MuArry;
   NSMutableArray *MuArry2;

}

@end

@implementation ViewController

- (void)viewDidLoad
{

    [superviewDidLoad];

    

    

    //给需要用的图片放到一个数组内部

    MuArry =[[NSMutableArrayalloc]initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",@"7.jpg",@"8.jpg",@"9.jpg",nil];

    

    MuArry2=[[NSMutableArrayalloc]initWithObjects:@"这是第几个",@"这是第几个",@"这是第几个",@"这是第几个",@"这是第几个",@"这是第几个",@"这是第几个",@"这是第几个",@"这是第几个",nil];

    

    

    //实现CollectionView的布局UICollectionViewFlowLayout也是代理的一部分

    UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayoutalloc]init];

    

    //初始化_collectionView使用flowLayout

    _collectionView=[[UICollectionViewalloc]initWithFrame:CGRectMake(0,
50,self.view.bounds.size.width,self.view.bounds.size.height)collectionViewLayout:flowLayout];

    [_collectionViewsetBackgroundColor:[UIColorwhiteColor]];

    //设置代理

    _collectionView.delegate=self;

    //设置数据源

    _collectionView.dataSource=self;

    

    

    

    //把collectionView添加到self.view上面

    [self.viewaddSubview:_collectionView];
}

//设定UICollectionview内部Cell的数量
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{

    returnMuArry.count;

    
}

//设定每个cell的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout
*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
   return
CGSizeMake(120, 130);
}

//设置每个Collcell距离另外一个Cell的距离
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout
*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
   return
UIEdgeInsetsMake(10, 10, 10, 10);
}

//初始化cell重用
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath
*)indexPath
{

    [_collectionViewregisterClass:[CollectionViewCellclass]forCellWithReuseIdentifier:@"CollCell"];

    CollectionViewCell *cell=[collectionViewdequeueReusableCellWithReuseIdentifier:@"CollCell"forIndexPath:indexPath];

    cell.CollimageView.image=[UIImageimageNamed:MuArry[indexPath.row]];
    cell.Colllab.text=MuArry2[indexPath.row];

    //cell.backgroundColor=[UIColor grayColor];
   return cell;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息