`

IOS之集合视图UICollectionView

 
阅读更多

        实现效果如下。


 

1.往ViewController添加UICollectionView,并绑定Delegate和DataSource。

2.新建单元类BookCell,继承UICollectionViewCell

 

BookCell.h

 

#import <UIKit/UIKit.h>

@interface BookCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *imageView;//自定义单元控件1
@property (weak, nonatomic) IBOutlet UILabel *label;//自定义单元控件2
@end

 BookCell.m

#import "BookCell.h"

@implementation BookCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

@end

 3.在Interface Builder中设置UICollectionView的Cell的class为BookCell.选中设计界面的单元格,(1)把连线连接到左边View Controller Scene的UICollectionView的Cell的UIImageView,在弹出的菜当中选择imageView(即对应BookCell的imageView变量)(2)把连线连接到左边View Controller Scene的UICollectionView的Cell的UILabel,在弹出的菜当中选择label(即对应BookCell的label变量)(3)选中UICollectionView的Cell,将identifier设置为bookCell(下面第5步会有说明)

 4.设置UICollectionView的数据源初始化。user_head.plist以及图片请见附件。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    [self initCollectionView];
}

-(void)initCollectionView{
    NSBundle *bundle = [NSBundle mainBundle];
    NSString *plistPath = [bundle pathForResource:@"user_head" ofType:@"plist"];
    dataArr = [[NSArray alloc] initWithContentsOfFile:plistPath];//dataArr为.h文件定义的变量
    NSLog(@"data count = %d",[dataArr count]);
}

 5.将数据源绑定到UICollectionView

 

//显示多少行
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 3;
}
//显示多少列
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 2;
}
//为每个单元设置UI
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    BookCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"bookCell" forIndexPath:indexPath];//"bookCell" 对应第三步的cell的identifier
    NSDictionary *dict = [dataArr objectAtIndex:(indexPath.section*2+indexPath.row)];//2为每行的个数
    cell.label.text = [dict objectForKey:@"itemName"];
    NSLog(@"itemName= %@",[dict objectForKey:@"itemName"]);
    cell.imageView.image = [UIImage imageNamed:[dict objectForKey:@"itemImagePath"]];
    return cell;
}

 

 6.添加选择单元格之后的触发事件。

//选择单元格触发事件
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSDictionary *dict = [dataArr objectAtIndex:(indexPath.section*2+indexPath.row)];//2为每行的个数
    NSString *userName = [dict objectForKey:@"itemName"];
    NSString *userHead = [dict objectForKey:@"itemImagePath"];
    NSLog(@"userName = %@, userHead = %@", userName,userHead);
}

 

  • 大小: 42.9 KB
分享到:
评论
2 楼 yanransysu 2014-11-03  
为啥结果没有显示图片嘞,我都已经把你共享的文件给放进去了?
1 楼 如果宅 2014-08-15  
附件下载下来是图片!

相关推荐

    集合视图UICollectionView 表格 布局 iOS

    在iOS开发中,UICollectionView是一种强大的UI组件,用于展示可滚动的、排列有序的视图集合。这个组件在处理网格布局、瀑布流布局等复杂布局时非常有用,比UITableView更加灵活。本教程将深入探讨如何使用...

    ios-集合视图简单自定义布局.zip

    在iOS开发中,集合视图(UICollectionView)是一个强大的控件,用于展示大量数据,具有高度可定制性。这个“ios-集合视图简单自定义布局.zip”文件包含了一个名为"CollectionLayerDemo"的示例项目,它展示了如何...

    iOS UICollectionView 纯代码布局,添加Section Header 头部视图跟 Section Footer尾部视图

    在iOS开发中,UICollectionView是一种强大的UI组件,用于展示可滚动的、网格布局的数据集合。它提供了高度自定义的布局方式,使得开发者可以构建各种复杂的视图结构,如瀑布流、宫格等。在这个主题中,我们将深入...

    集合视图 iOS开发

    集合视图(UICollectionView)是iOS开发中的重要组件,它允许开发者以网格布局、瀑布流、时间线等多种形式展示数据集合。在iOS应用中,集合视图通常用于展示大量的可交互内容,如照片库、社交媒体 feed 或应用商店的...

    ios-表格视图,自定义UICollectionView实现.zip

    在iOS开发中,`UICollectionView`是一种非常强大的控件,它允许开发者以高度自定义的方式展示数据集合。这个压缩包“ios-表格视图,自定义UICollectionView实现.zip”显然是一个教学资源,旨在帮助初学者理解如何...

    ios-UICollectionView的简单示例.zip

    UICollectionView与UITableView类似,都是用来展示数据集合的视图,但UICollectionView提供了更大的灵活性,可以实现更复杂的布局,比如瀑布流、宫格等。在本示例中,开发者可能主要展示了如何设置UICollectionView...

    UICollectionView集合视图的demo

    总的来说,这个"UICollectionView集合视图的demo"旨在教授开发者如何在Xcode 6.4环境下创建和自定义UICollectionView,通过实践理解其工作原理和布局机制。对于iOS应用的界面设计和数据展示,掌握UICollectionView的...

    IOS 动态添加视图

    动态添加视图在实际开发中有着广泛的应用,比如在表格视图(UITableView)或集合视图(UICollectionView)中加载不确定数量的数据项,或者在游戏界面中根据用户操作动态生成元素等。掌握这项技术能让你的iOS应用更加...

    IOS UICollectionView布局详解

    在iOS开发中,UICollectionView是一种强大的UI组件,用于展示可滚动的、多列或多行的数据集合。这个组件在设计用户界面时提供了极大的灵活性,允许开发者自定义布局,展示各种复杂的数据结构。本文将深入探讨...

    iOS UICollectionView的简单使用

    在iOS开发中,UICollectionView是一个强大的视图组件,用于展示数据集合,可以自定义布局和单元格样式,实现灵活多样的展示效果。本教程将聚焦于UICollectionView的基础使用,讲解如何使用它来显示多列图片。 首先...

    iOS UICollectionView 不规则排序

    在iOS开发中,UICollectionView是一种强大的视图组件,用于展示可滚动的数据集合,它允许开发者创建各种自定义布局,以满足不同界面设计的需求。本话题主要关注"不规则排序",这意味着我们将探讨如何通过自定义...

    ios-基于UICollectionView的APP顶部菜单栏.zip

    1. `numberOfSections(in:)`:返回集合视图中的段数。 2. `collectionView:numberOfItemsInSection:`:返回指定段中的单元格数量。 3. `collectionView:cellForItemAt:`:为指定索引路径的单元格返回一个配置好的`...

    一个UICollectionView轻松搞定顶部悬停效果、顶部悬停效果、collectionView达到悬停效果

    在iOS应用开发中,UICollectionView是一种强大的视图组件,它允许我们以网格布局或者自定义布局显示数据集合。在某些设计中,我们可能需要实现“顶部悬停”效果,即当用户滚动UICollectionView时,某一特定视图始终...

    ios-UICollectionView实现图片无限滚动.zip

    在iOS开发中,UICollectionView是一个强大的组件,用于展示可滚动的、多行或多列的数据集合。在本案例中,我们关注的是如何使用UICollectionView实现图片的无限滚动效果,这通常被用在图片轮播或者滑动展示广告等...

    iOS - UICollectionView 书架效果 长按跨section拖拽cell

    在iOS开发中,UICollectionView是一种强大的视图组件,用于展示可滚动的数据集合,它可以灵活地自定义布局和交互方式。在本教程中,我们将探讨如何实现一个具有“书架效果”的UICollectionView,用户可以通过长按并...

    IOS 自定义UICollectionView的头视图或者尾视图UICollectionReusableView

    在iOS开发中,UICollectionView是一种强大的布局控件,用于展示可滚动的数据集合,具有高度自定义的能力。本篇文章将深入探讨如何在iOS中自定义UICollectionView的头视图(header)和尾视图(footer),主要使用...

    ios-UICollectionViewCell每次滚动设置特定的距离.zip

    在iOS开发中,UICollectionView是一个非常重要的组件,它允许开发者创建高度可定制的网格布局,用于显示和操作数据集合。在标题“ios-UICollectionViewCell每次滚动设置特定的距离”中提到的问题,主要是指如何在...

    ios-UICollectionView滚动加载页面.zip

    在iOS开发中,UICollectionView是一种强大的视图组件,用于展示数据集合,可以实现各种自定义布局,包括瀑布流布局。这个“ios-UICollectionView滚动加载页面.zip”文件内容显然涉及到了使用UICollectionView来实现...

    ios-UICollectionView 实现简单带标签栏滚动控件.zip

    在iOS开发中,UICollectionView是一种强大的布局控件,用于展示可滚动的数据集合,它可以自定义复杂的布局,例如网格、流水布局等。在这个项目“ios-UICollectionView 实现简单带标签栏滚动控件”中,开发者利用...

Global site tag (gtag.js) - Google Analytics