本文实例为大家分享了iOS使用UICollectionView实现横向滚动展示照片的具体代码,供大家参考,具体内容如下
这是演示链接
<>强效果图
<>强思路
<强> 1。界面搭建
界面的搭建十分简单,采用UICollectionView和自定义细胞进行搭建即可。
//ViewController.m//下面使用到的宏和全局变量
#定义ScreenW [UIScreen mainScreen] .bounds.size.width
#定义ScreenH [UIScreen mainScreen] .bounds.size.height
静态NSString * const cellID=@“cellID”;//创建collectionView的代码
- (void) setupCollectionView
{//使用系统自带的流布局(继承自UICollectionViewLayout)
UICollectionViewFlowLayout *布局=({
UICollectionViewFlowLayout *布局=[[UICollectionViewFlowLayout alloc] init);//每个细胞的大小
布局。itemSize=CGSizeMake (180、180);//横向滚动
布局。scrollDirection=UICollectionViewScrollDirectionHorizontal;//细胞间的间距
布局。minimumLineSpacing=40;//第一个细胞和最后一个细胞居中显示(这里我的演示里忘记改了我用的是160年,最后微调数据细胞的大小是180)
CGFloat保证金=(ScreenW - 180) * 0.5;
布局。sectionInset=UIEdgeInsetsMake(0, 0,保证金);
布局;
}）;//使用UICollectionView必须设置UICollectionViewLayout属性
UICollectionView * collectionView=({
UICollectionView * collectionView=[[UICollectionView alloc] initWithFrame: CGRectZero collectionViewLayout:布局);
collectionView。中心=self.view.center;
collectionView。边界=CGRectMake (0, 0, ScreenW, 200);
collectionView。写成backgroundColor=(用户界面颜色棕色);//这里千万记得在界面哪里写& lt; UICollectionViewDataSource> ! ! !
collectionView。数据源=自我;
[collectionView setShowsHorizontalScrollIndicator:没有);
(自我。视图addSubview collectionView):;
collectionView;
}）;//实现注册细胞,其中光电池是我自定义的细胞,继承自UICollectionViewCell
UINib * collectionNib=[UINib nibWithNibName: NSStringFromClass([光电管类])
包:nil);
[collectionView registerNib: collectionNib
forCellWithReuseIdentifier cellID):;
}//UICollectionViewCellDataSource
——(NSInteger) collectionView: collectionView (UICollectionView *)
numberOfItemsInSection:(NSInteger)部分
{
返回10;
}
——(__kindof UICollectionViewCell *) collectionView:(UICollectionView *) collectionView
indexPath cellForItemAtIndexPath:(NSIndexPath *)
{
光电管*细胞=[collectionView dequeueReusableCellWithReuseIdentifier: cellID
forIndexPath indexPath):;//图片名是0 ~ 9
细胞。imageName=[NSString stringWithFormat: @ % ld》(长)indexpath。row);
返回单元;
}
之前
//界面是一个xib文件,在细胞里拖了个ImageView,约束上下左右都是10//图片名是数字0 ~ 9//PhotoCell.h
@ property(原子、强)NSString * imageName;//PhotoCell.m
@ interface光电管()
@ property(弱,原子)IBOutlet UIImageView * imageView;
@end
@ implementation光电管
- (void) awakeFromNib {
(超级awakeFromNib);//初始化代码
}
- (void) setImageName: imageName (NSString *)
{
_imageName=imageName;
self.imageView。形象=[界面图像imageNamed imageName):;
}
到这里最基础的效果就实现完了,一组大小相等的图片细胞。
<强> 2。大小变化已经居中效果实现
由于系统的UICollectionViewFlowLayout无法实现我想要的效果,因此我重写下该类中的某些方法。
在UICollectionViewLayout中有这样两句注释:
1。这个类中的方法是覆盖,将被称为集合视图收集布局信息。
在这个类中的方法意味着被重写(覆盖),并且将要被它的集合视图调用,用于收集布局信息
2。让真相>//MyFlowLayout.h
# import & lt; UIKit/UIKit.h>//注意!继承自UICollectionViewFlowLayout,因为它继承自UICollectionViewLayout。
@ interface TWLayout: UICollectionViewFlowLayout//MyFlowLayout.m/* *
该方法返回的默认实现。子类可以重写它并返回一个适当的值基于边界的集合视图的修改是否需要改变细胞的布局和补充意见。
此方法的默认实现返回没有。子类可以覆盖它,并根据集合视图的范围中的更改是否需要更改细胞和补充意见(补充视图)的布局返回适当的值。
*如果在集合视图的范围变化和该方法返回是的,集合视图布局通过调用invalidateLayoutWithContext:无效的方法。
如果集合视图的范围更改并且此方法返回是的,则集合视图通过调用invalidateLayoutWithContext:方法使布局更新。
@param newBounds新边界的集合视图。
@return是的如果集合视图需要布局更新或没有如果布局不需要改变。
*/?BOOL) shouldInvalidateLayoutForBoundsChange: newBounds (CGRect中)
{
返回YES;
}/* *
*返回所有的细胞和视图的布局属性在指定的矩形。
返回指定矩形中所有细胞和观点的布局属性。
@param矩形*矩形(集合视图中指定的坐标系)包含目标的观点。
包含目标视图的矩形(在集合视图的坐标系中指定)。
@return * UICollectionViewLayoutAttributes对象数组代表细胞的布局信息和观点。默认实现返回nil。
UICollectionViewLayoutAttributes对象数组,表示细胞和视图的布局信息。默认实现返回零。
*/?NSArray
