如何自定义collectionview组间距中每个元素的大小和间距

当前访客身份:游客 [
这个人很懒,啥也没写
:感谢分享,让我恍然大悟
:引用来自“zouqilin”的评论http://git.oschina....
:http://git.oschina.net/progit...
:大家好,最近有很多外单项目APP,想组建一个兼职...
今日访问:17
昨日访问:17
本周访问:34
本月访问:34
所有访问:1696
UICollectionView基础用法
发表于3个月前( 13:29)&&
阅读(75)&|&评论()
0人收藏此文章,
#import&"ViewController.h"
#define&kScreenSize&[UIScreen&mainScreen].bounds.size
//遵守协议
@interface&ViewController&()&&UICollectionViewDataSource,UICollectionViewDelegate&
&&&&UICollectionView&*_collectionV
@property&(nonatomic,strong)&UICollectionView&*collectionV
@implementation&ViewController
-&(void)viewDidLoad&{
&&&&[super&viewDidLoad];
&&&&[self&creatCollectionView];
-&(void)creatCollectionView&{
&&&&//1.先创建一个&UICollectionViewFlowLayout&(是集合视图的核心)
&&&&//通过UICollectionViewFlowLayout&来进行布局
&&&&UICollectionViewFlowLayout&*layout&=&[[UICollectionViewFlowLayout&alloc]&init];
&&&&//2.对layout&做一些基本的设置
&&&&//设置cell&的大小(全局设置)(如果要单个对cell&大小进行设置需要遵守UICollectionViewDelegateFlowLayout协议实现方法)
&&&&layout.itemSize&=&CGSizeMake(100,&100);
&&&&//设置滚动的方向(水平和竖直)
&&&&//UICollectionViewScrollDirectionHorizontal水平
&&&&//UICollectionViewScrollDirectionVertical
&&&&layout.scrollDirection&=&UICollectionViewScrollDirectionV
&&&&//设置&cell&之间的最小竖直间隔&(上下cell间隔)
&&&&layout.minimumLineSpacing&=&30;
&&&&//cell&之间的&最小水平间隔(水平方向的cell&间隔)
&&&&layout.minimumInteritemSpacing&=&10;
&&&&//设置分区头视图的大小&(如果是竖直滚动那么设置height有效,width无效,水平滚动那么width&有效)
&&&&//分区头间隔
&&&&layout.headerReferenceSize&=&CGSizeMake(50,&50);
&&&&//分区尾间隔(实际上就是尾视图的高)
&&&&layout.footerReferenceSize&=&CGSizeMake(50,&50);
&&&&//设置整个分区中所有cell(整体)&距离分区的上左下右的间距
&&&&layout.sectionInset&=&UIEdgeInsetsMake(20,&20,&20,&20);
&&&&//实例化一个&集合视图对象&通过layout&布局
&&&&self.collectionView&=&[[UICollectionView&alloc]&initWithFrame:CGRectMake(0,&20,&kScreenSize.width,&kScreenSize.height-20)&collectionViewLayout:layout];
&&&&//设置代理和数据源对象
&&&&self.collectionView.dataSource&=&
&&&&self.collectionView.delegate&=&
&&&&//cell&必须提前注册&复用标志要和下面队列获取cell&的时候一样
&&&&[self.collectionView&registerClass:[UICollectionViewCell&class]&forCellWithReuseIdentifier:@"CollectionViewCell"];
&&&&//如果设置分区的头尾视图那么需要进行注册(注册之后就可以采用复用队列)
&&&&//kind&表示&是头视图还是尾视图&第三个参数就是一个复用标识符&要和下面使用保持一致
&&&&[self.collectionView&registerClass:[UICollectionReusableView&class]&forSupplementaryViewOfKind:UICollectionElementKindSectionHeader&withReuseIdentifier:@"Header"];
&&&&//注册分区尾视图
&&&&[self.collectionView&registerClass:[UICollectionReusableView&class]&forSupplementaryViewOfKind:UICollectionElementKindSectionFooter&withReuseIdentifier:@"Footer"];
&&&&[self.view&addSubview:self.collectionView];
&&&&self.view.backgroundColor&=&[UIColor&lightGrayColor];
#pragma&mark&UICollectionViewDataSource&delegate
//有多少分区
-&(NSInteger)numberOfSectionsInCollectionView:(UICollectionView&*)collectionView&{
&&&&return&2;
//每个分区有多少个cell
-&(NSInteger)collectionView:(UICollectionView&*)collectionView&numberOfItemsInSection:(NSInteger)section&{
&&&&return&25;
//获取指定分区内的cell
-&(UICollectionViewCell&*)collectionView:(UICollectionView&*)collectionView&cellForItemAtIndexPath:(NSIndexPath&*)indexPath&{
&&&&static&NSString&*cellId&=&@"CollectionViewCell";
&&&&//从复用队列获取&cell&(需要提前注册)
&&&&UICollectionViewCell&*cell&=&[collectionView&dequeueReusableCellWithReuseIdentifier:cellId&forIndexPath:indexPath];
&&&&//设置背景颜色
&&&&cell.backgroundColor&=&[UIColor&yellowColor];
&&&&return&
#pragma&mark&-&获取分区头尾视图&
//创建&分区头尾视图调用
-&(UICollectionReusableView&*)collectionView:(UICollectionView&*)collectionView&viewForSupplementaryElementOfKind:(NSString&*)kind&atIndexPath:(NSIndexPath&*)indexPath&{
&&&&//创建/获取头尾视图的时候也要用复用队列
&&&&//判断kind&来区分头尾
&&&&if&([kind&isEqualToString:UICollectionElementKindSectionHeader])&{
&&&&&&&&//头视图
&&&&&&&&//(如果满足不了需要那么就定制)
&&&&&&&&UICollectionReusableView&*header&=&[collectionView&dequeueReusableSupplementaryViewOfKind:kind&withReuseIdentifier:@"Header"&forIndexPath:indexPath];
&&&&&&&&header.backgroundColor&=&[UIColor&greenColor];
&&&&&&&&return&
&&&&}else&{
&&&&&&&&//尾视图
&&&&&&&&//复用队列获取
&&&&&&&&UICollectionReusableView&*footer&=&[collectionView&dequeueReusableSupplementaryViewOfKind:kind&withReuseIdentifier:@"Footer"&forIndexPath:indexPath];
&&&&&&&&footer.backgroundColor&=&[UIColor&yellowColor];
&&&&&&&&return&
-&(void)didReceiveMemoryWarning&{
&&&&[super&didReceiveMemoryWarning];
&&&&//&Dispose&of&any&resources&that&can&be&recreated.
更多开发者职位上
1)">1)">1" ng-class="{current:{{currentPage==page}}}" ng-repeat="page in pages"><li class='page' ng-if="(endIndex<li class='page next' ng-if="(currentPage
相关文章阅读当前位置:
& Swift - 使用网格(UICollectionView)进行流布局
Swift - 使用网格(UICollectionView)进行流布局
发布:hangge
浏览:5917
一、网格UICollectionView最典型的例子是iBooks。其主要属性如下:
该属性表示布局方式,有Flow、Custom两种布局方式。默认是Flow流式布局。
2,Accessories
是否显示页眉和页脚
3,各种尺寸属性
Cell Size:单元格尺寸
Header Size:页眉尺寸
Footer Size:页脚尺寸
Min Spacing:单元格之间间距
Section Insets:格分区上下左右空白区域大小。
二、流布局的简单样例
1,先创建一个应用Simple View Application,删除默认的 View Controller,拖入一个 Collection View Controller 到界面上,这时我们可以看到已经同时添加了&Collection View&和 Collection View Cell&控件。
2,勾选&Collection View Controller&属性面板里的 Is Initial View Controller 复选框,设置为启动视图控制器。
3,在 Collection View Cell里拖入一个Image View和Label并摆放好位置和大小,用于显示图标和名称。
4,设置Image View的tag为1,Label的tag为2,Colletion View Cell的Identifier为DesignViewCell。
效果图如下:
--- ViewController.swift ---
import UIKit
class ViewController: UICollectionViewController {
//课程名称和图片,每一门课程用字典来表示
let courses = [
["name":"Swift","pic":"swift.png"],
["name":"OC","pic":"oc.jpg"],
["name":"java","pic":"java.png"],
["name":"php","pic":"php.jpeg"]
override func viewDidLoad() {
super.viewDidLoad()
// 已经在界面上设计了Cell并定义了identity,不需要注册CollectionViewCell
//self.collectionView.registerClass(UICollectionViewCell.self,
forCellWithReuseIdentifier: "DesignViewCell")
self.collectionView?.backgroundColor = UIColor.whiteColor()
// CollectionView行数
override func collectionView(collectionView: UICollectionView,
numberOfItemsInSection section: Int) -& Int {
return courses.
// 获取单元格
override func collectionView(collectionView: UICollectionView,
cellForItemAtIndexPath indexPath: NSIndexPath) -& UICollectionViewCell {
// storyboard里设计的单元格
let identify:String = "DesignViewCell"
// 获取设计的单元格,不需要再动态添加界面元素
let cell = (self.collectionView?.dequeueReusableCellWithReuseIdentifier(
identify, forIndexPath: indexPath))! as UICollectionViewCell
// 从界面查找到控件元素并设置属性
(cell.contentView.viewWithTag(1) as! UIImageView).image =
UIImage(named: courses[indexPath.item]["pic"]!)
(cell.contentView.viewWithTag(2) as! UILabel).text =
courses[indexPath.item]["name"]
return cell
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()}

我要回帖

更多关于 collectionview 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信