使用UICollectionViewFlowLayout创建环形视图

文章展示了如何在Swift中创建一个自定义的UICollectionViewFlowLayout,用于布局图片。代码详细解释了如何设置布局属性,包括图片的数量、圆的半径以及如何计算每个单元格的位置。最后,给出了一个简单的ViewController示例来使用这个自定义布局。
摘要由CSDN通过智能技术生成

新加入一个swift file 命名layout

输入以下代码:

//
//  layout.swift
//  UICollectionViewCell
//
//  Created by Mengduan on 2023/5/7.
//

import UIKit
//layout设置UICollectionViewFlowLayout
class layout : UICollectionViewFlowLayout {
    //图片数量
    var counts = images.count
    //圆半径
    var radius = 200

    //圆心
    var ox = (screenwidth - 40)/2
    var oy = (screenhight - 20)/2
    //定义一个数组 存储每个items的属性
    var attributeArray : Array<UICollectionViewLayoutAttributes>?
    //使用prepare 传值
    override func prepare() {
        super.prepare()
        
        self.scrollDirection = .vertical
        //一定要初始化attributeArray
        attributeArray = Array<UICollectionViewLayoutAttributes>()
        //设置每个items的布局
        for index in 0..<counts{
            //设置indexPath 默认一个分区
            let indexPath = IndexPath(item: index, section: 0)
            //创建布局属性类
            let attris = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            
            //布局大小
            attris.size = CGSize(width: 50, height: 50)
            let pp  = 2 * 3.14
            
            let xx = CGFloat(cosf((Float(pp) / Float(counts)) * Float(index)))
            let itemsOx : CGFloat = ox + xx * CGFloat(radius - 25)
            
            let yy = CGFloat(sinf((Float(pp) / Float(counts)) * Float(index)))
            let itemsOy : CGFloat = oy + yy * CGFloat(radius - 25)
            
            attris.center = CGPoint(x: itemsOx, y: itemsOy)
            
            attributeArray?.append(attris)
        }
        
    }
    //返回布局属性
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return attributeArray
    }
    
    
}

然后正常设置 UICollectionView,在设置过程中继承layout即可

代码如下:(顺便找了一个写过的直接拿来用)

//
//  ViewController.swift
//  UICollectionViewCell
//
//  Created by Mengduan on 2023/3/21.
//

import UIKit

let screenwidth = UIScreen.main.bounds.size.width
let screenhight = UIScreen.main.bounds.size.height


class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    
        let flowLayout = layout()
//        flowLayout.itemSize = CGSize(width: 155, height: 135)
//        flowLayout.scrollDirection = .vertical
//        flowLayout.minimumLineSpacing = 50
//        flowLayout.sectionInset = UIEdgeInsets(top: 20, left: 20, bottom: 0, right: 20)
        
        let collectionView = UICollectionView(frame: CGRect(x: 0, y: 20, width: screenwidth, height: screenhight-20), collectionViewLayout: flowLayout)
        
        
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.register(UICollectionViewCell.classForCoder(), forCellWithReuseIdentifier: ide)
        
        self.view.addSubview(collectionView)
//        self.view.backgroundColor = .orange
    }
    
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return images.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ide, for: indexPath)
            
            let image = UIImage(named: images[(indexPath as NSIndexPath).row])
            let imageView = UIImageView(image: image)
            imageView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
            cell.contentView.addSubview(imageView)
            imageView.layer.masksToBounds = true
            imageView.layer.cornerRadius = 30
            imageView.contentMode = .scaleAspectFill
        
        
        return cell
        
    }


    
    
}

效果如下:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值