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

用UICollectionView及其controller相关UICollectionViewDataSource,UICollectionViewDelegate代理实现多列显示方法

2013-07-01 22:08 405 查看


用UICollectionView及其controller相关UICollectionViewDataSource,UICollectionViewDelegate代理实现多列显示方法如下:

1.创建CollectionView所需要的addTableView,

//层声明实列化
     UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
     [flowLayout setItemSize:CGSizeMake(90,90)]; //设置每个cell显示数据的宽和高必须
     //[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal]; //水平滑动
     [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical]; //控制滑动分页用
     flowLayout.sectionInset = UIEdgeInsetsMake(0, 2, 0, 0);
    
     //创建一屏的视图大小
     _tableView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 44, 320, 380) collectionViewLayout:flowLayout];
     //对Cell注册(必须否则程序会挂掉)
     [_tableView registerClass:[BrandCell class] forCellWithReuseIdentifier:[NSString stringWithFormat:@"_brandCell_%d", _xid]]; 
     [_tableView setBackgroundColor:[UIColor whiteColor]];
     [_tableView setUserInteractionEnabled:YES];
    
     [_tableView setDelegate:self]; //代理-视图
     [_tableView setDataSource:self]; //代理-数据
    
     [self.view addSubview:_tableView];
     [flowLayout release];


2.实现代理要求的三个方法,行数,每行的cell及点击推出相应页面

//集合代理-每一部分数据项
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [_dataList count];
}

//Cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    BrandCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:[NSString stringWithFormat:@"_brandCell_%d", _xid] forIndexPath:indexPath];    

    [cell setValueForDictionary:[_dataList objectAtIndex:indexPath.row] indexPath:indexPath];
    return cell;
}

//代理-选择行的触发事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    //点击推出页面
    DetailViewController *rvc = [[DetailViewController alloc] init];
    [self.navigationController pushViewController:rvc animated:YES];
    [rvc release];
}


3.实现每行cell的样式 BrandCell 并通过接口完成相关数据设值即可

@interface BrandCell : UICollectionViewCell
{
    UIImageView *_iconView; //应用logo
    UIImage *_icon; //图片
    UILabel *_name; //应用名称
}
@end


//cell数据值
#pragma mark initData
- (void)setValueForDictionary:(NSDictionary *)dic indexPath:(NSIndexPath *)indexPath
{
    //图片初始值置空
    _icon = nil;
    
    //应用名称
    int len = [[dic objectForKey:@"name"] length];
    [_name setText:[[dic objectForKey:@"name"] substringWithRange:NSMakeRange(0,len>2?2:len)]];

    //是否有图片,有则下载图片数据并缓存
    if ([dic objectForKey:@"icon"] != nil ) {
        NSURL *url = [NSURL URLWithString:[dic objectForKey:@"icon"]];
        [self getASICacheData:url tag:102];
    }
}


//cell视图创建
- (void)addView
{
    //列表图片
    _iconView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 64, 64)];
    [_iconView setImage:[UIImage imageNamed:@"placeholder.png"]];
    _iconView.layer.masksToBounds = YES;
    _iconView.layer.cornerRadius  = 10;
    [self.contentView addSubview:_iconView];
    [_iconView release];
    
    //列表标题
    _name = [[UILabel alloc] initWithFrame:CGRectMake(34, 75, 35, 20)];
    [_name setFont:[UIFont systemFontOfSize:16.0f]];
    [_name setTextColor:[UIColor blackColor]];
    [self.contentView addSubview:_name];
    [_name release];
}


注: UICollectionView 跟UITableView在实现上有些相似之处,都有相应的代理在多列显示上UICollectionView相对灵活很多,

在实现列表后再写两个上拉、下拉(FDPullCollectionView.h\FDPullCollectionView.m)自动分页就可以完成多列分页列表显示功能。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: