collectionview 边距 collectionViewCell圆角

最新推荐文章于 2021-12-09 16:19:17 发布
原创 最新推荐文章于 2021-12-09 16:19:17 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在iOS开发中使用UICollectionView，详细讲解了设置cell间间距的方法及collectionView视图边缘间距调整技巧，并演示了如何为UICollectionViewCell添加圆角。

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{}

这个方法只提供设置cell之间的距离，最左边的cell和最右边的cell到superview的间距却不能设置。

这样有两种方法来设置

1.改变collectionview的大小

2.设置flowLayout

flowLayout.sectionInset =UIEdgeInsetsMake(0,10,0,10);


collectionVIewCell圆角的设置

cell.contentView.layer.cornerRadius =10;

cell.layer.cornerRadius =10;

cell.contentView.layer.masksToBounds =YES;



ios -uiview uitabviewcell uicollectioncell 的view layer修改圆角和shadow
水星草屋博客
12-10 666
@interface UIView (Add) - (void)setCornerRadius:(CGFloat)radius withShadow:(BOOL)shadow withOpacity:(CGFloat)opacity; @end @implementation UIView (Add) - (voi
UICollectionView的Cell间距
HelloMagina的博客
09-06 1438
水平UICollectionView设置Cell间距
[iOS]UICollectionView设置cell之间的间距
热门推荐
Gamin
10-17 1万+
[iOS]UICollectionView设置cell之间的间距 demo:http://download.youkuaiyun.com/download/u012881779/10026346 简单说下，两种设置UICollectionView的cell间距的方式。 方式一: 用下面这四个代理方法设置间距。需要注意第二个方法是设置Section距四边或距下一个section的距离，并非是在设
UICollectionView的cell间距问题
sqz316的专栏
10-20 1211
cell的间距是有三个因素共同调整的 cell的最小间距 minimumInteritemSpacing cell的大小 [flowLayout setItemSize:] cell的内边距 flowLayout.sectionInset
[Swfit 5] 设置UITableViewCell和Section的圆角和边距
wenbin
05-19 1066
此文是按照原文整理直接拷贝代码使用 原文出处原文出处 此方法针对没有头尾的情况，如果带有头尾请查看原作者另一篇文章 带有头尾的section圆角 开发中常用到cell两边带有边距和圆角，如果section里有多个cell，直接设置圆角会出问题，此文把两种情况总结为一个方法，在 cellForRow 或 willDisplayCell 方法里直接调用即可 private func setCornerRadiusForSectionCell(cell: UITableViewCell, indexPath:.
基于SwiftUI的高性能CollectionView组件库实现
每个单元格（Cell）均可自定义视图结构，支持嵌套Text、Image、Button、Shape等基础组件，并可通过Modifier链式调用添加阴影、圆角、渐变背景、动画过渡等视觉特效。更重要的是，该库内置了常见的交互行为，如点击、...
// // OnlineDeviceListViewController2.swift // SurveillanceHome // // Created by MaCong on 2025/10/10. // Copyright © 2025 tplink. All rights reserved. // import UIKit class OnlineDeviceListViewController2: OnlineDeviceListViewController { private var _collectionView: UICollectionView? // 替换为图片数据（假设是 UIImage 数组） private let images = [ UIImage(named: "photo_icon")!, UIImage(named: "camera_icon")!, UIImage(named: "video_icon")!, UIImage(named: "mic_icon")! ] override var collectionView: UICollectionView { get { if let collectionView = _collectionView { return collectionView } let layout = UICollectionViewFlowLayout() // 设置两列布局 let itemSpacing: CGFloat = 10 let columnCount: CGFloat = 2 let totalSpacing = (columnCount - 1) * itemSpacing let itemWidth = (UIScreen.main.bounds.width - 20 - totalSpacing) / columnCount // 减去左右边距 layout.itemSize = CGSize(width: itemWidth, height: itemWidth) // 正方形单元格 layout.minimumInteritemSpacing = itemSpacing // 列间距 layout.minimumLineSpacing = itemSpacing // 行间距 let cv = UICollectionView(frame: .zero, collectionViewLayout: layout) cv.register(ImageCell.self, forCellWithReuseIdentifier: "ImageCell") _collectionView = cv return cv } set { _collectionView = newValue } } override func viewDidLoad() { super.viewDidLoad() setupCollectionView() } private func setupCollectionView() { collectionView.backgroundColor = .clear collectionView.translatesAutoresizingMaskIntoConstraints = false collectionView.dataSource = self collectionView.delegate = self view.addSubview(collectionView) NSLayoutConstraint.activate([ collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20), collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10), collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10), collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor) ]) } } // MARK: - UICollectionViewDataSource @available(iOS 13.0, *) extension OnlineDeviceListViewController2: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return images.count // 4张图片 } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell cell.configure(with: images[indexPath.item]) return cell } } // MARK: - 自定义图片 Cell class ImageCell: UICollectionViewCell { private let imageView = UIImageView() override init(frame: CGRect) { super.init(frame: frame) setupUI() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setupUI() { backgroundColor = .lightGray layer.cornerRadius = 8 clipsToBounds = true // 确保圆角生效 imageView.contentMode = .scaleAspectFit imageView.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(imageView) NSLayoutConstraint.activate([ imageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8), imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8), imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8), imageView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8) ]) } func configure(with image: UIImage) { imageView.image = image } } 修改为兼容所有版本的
最新发布
10-12
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell cell.configure(with: images[indexPath.item]) return cell } // MARK: - ...
// // OnlineDeviceListViewController2.swift // SurveillanceHome // // Created by MaCong on 2025/10/10. // Copyright © 2025 tplink. All rights reserved. // import UIKit class OnlineDeviceListViewController2: DeviceListViewController { private var _collectionView: UICollectionView? private let numbers = ["1", "2", "3", "4"] // 添加数据源 override var collectionView: UICollectionView { get { if let collectionView = _collectionView { return collectionView } let layout = UICollectionViewFlowLayout() layout.itemSize = CGSize(width: 100, height: 100) let cv = UICollectionView(frame: .zero, collectionViewLayout: layout) cv.register(NumberCell.self, forCellWithReuseIdentifier: "NumberCell") _collectionView = cv return cv } set { _collectionView = newValue } } override func viewDidLoad() { super.viewDidLoad() setupCollectionView() } private func setupCollectionView() { collectionView.backgroundColor = .clear collectionView.translatesAutoresizingMaskIntoConstraints = false collectionView.dataSource = self collectionView.delegate = self view.addSubview(collectionView) NSLayoutConstraint.activate([ collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20), collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10), collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10), collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor) ]) } } // MARK: - UICollectionViewDataSource extension OnlineDeviceListViewController2: UICollectionViewDataSource { func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return numbers.count } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "NumberCell", for: indexPath) as! NumberCell cell.configure(with: numbers[indexPath.item]) return cell } } // MARK: - 自定义 Cell class NumberCell: UICollectionViewCell { private let label = UILabel() override init(frame: CGRect) { super.init(frame: frame) setupUI() } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } private func setupUI() { backgroundColor = .lightGray layer.cornerRadius = 8 label.textAlignment = .center label.font = UIFont.boldSystemFont(ofSize: 24) label.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(label) NSLayoutConstraint.activate([ label.centerXAnchor.constraint(equalTo: contentView.centerXAnchor), label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor) ]) } func configure(with text: String) { label.text = text } } 将这换成两列图片 一共四张
10-11
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell cell.configure(with: images[indexPath.item]) return cell } } // MARK: - 自定义图片 ...
使用UICollectionView进行圆形布局
左手代码的博客
12-23 1468
因为前面已经对UICollectionView以及UICollectionViewlayout做过详细解说，所以就不再说明了，而是直接贴出UICollectionViewLayout的里面的代码！ #import "CircleLayout.h" @interface CircleLayout() @property (nonatomic, assign) NSInte
UICollectionViewCell设置阴影
ansion2017的博客
07-28 509
//@mg:masksToBounds必须为NO否者阴影没有效果 // cell.layer.masksToBounds = NO; cell.layer.contentsScale = [UIScreen mainScreen].scale; cell.layer.shadowOpacity = 0.75f; cell....
【UICollectionview】UICollectionViewCell添加阴影书框效果
u014202456的专栏
07-28 3847
在项目里因为添加的书框横线太丑了，所以想改成阴影效果，更加
collectionviewcell的圆角和阴影问题
u010675120的博客
03-04 5365
圆角： cell.layer.cornerRadius = 7; cell.contentView.layer.cornerRadius = 7.0f; cell.contentView.layer.borderWidth = 0.7f; cell.contentView.layer.borderColor = [UIColor clearColor].CGColor;
iOS每日一记之———————————————为Cell设置部分圆角 类似于ipad的设置界面效果
qq_26359763的博客
04-18 1491
需求图是这样的 整个是个tableView 而且要求第一个cell和最后一个cell是部分圆角  有人会说这很简单啊 你设置第一个cell和最后一个cell的contentView部分圆角不就好了么  然而这样实现不了的、。。。。。 我在cell上面放了个白色的View 然后控制白色View的不同圆角情况依旧失败。。。。。想了半天实在不行加个图片好了 但是因为功能比较大 不能再添加无
UICollectionView自定义布局之风火轮[译]
huanghaiyan_123的专栏
09-10 1934
现在有许多极具创造力的网站，几周前我碰巧浏览到一个名为Form Follows Function的网站，上面有各种交互动画。其中最吸引我的是网站上的导航转轮，转轮由各种交互体验海报组成。 原文：UICollectionView Custom Layout Tutorial: A Spinning Wheel 本教程将讲解如何使用自定义的 UICollectionViewFlow
ios开发——解决UICollectionView的cell间距与设置不符问题
CocoaChen
11-24 1万+
在用UICollectionView展示数据时，有时我们希望将cell的间距调成一个我们想要的值,但往往不得结果。这里我们来看一个不错的方法
iOS、Swift中tableview-section圆角边框方案总结
smileKH的博客
12-09 3811
前言 APP中难免会有列表圆角边框的需求，比如如下：先附上git链接 在网上搜有这样的：tableView-section圆角边框解决方案 也有这样的：tableView的section圆角边框 但是都不符合要求，下面附上关键代码： 一、OC版本: - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
iOS 100行原生代码 让你的tableview/collectionView的section有卡片背景（阴影和圆角）
ihoudf
10-28 1496
想实现如图的效果吗????
UITableView对每一组（section）设置圆角
咖啡丶丶不加糖的博客
08-07 8030
UITableViewDelegate方法中有一个方法 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath; 对section设置圆角的方法就在此方法中实现即可 - (void)tabl...
UITableViewCell 设置圆角
xueer8835的专栏
04-04 8121
#import QuartzCore.framework
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值