Arclayoutview: implementation of an arc layout

Introduce

If in a project , Designers let you achieve this effect :

Will this drive you crazy ? Don't worry. , We can use ArcLayoutView. Project address ：https://gitee.com/kmyhy/arc-view

usage

There's only one file ：ArcLayoutView.swift, Just put it in your project :)
Two macros may not be found during compilation , You can ViewController.swift Find them in ：

let SCREEN_HEIGHT = UIScreen.main.bounds.height
let SCREEN_WIDTH = UIScreen.main.bounds.width

And one. UILabel An extension of ：

extension UILabel {
    func getSize(constrainedWidth: CGFloat) -> CGSize {
        return systemLayoutSizeFitting(CGSize(width: constrainedWidth, height: UIView.layoutFittingCompressedSize.height), withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
    }
}

Then you can create a ArcLayoutView Object and add it to your ViewController It's in ( Story board or code addition ). If you use a story board , So don't forget to create the corresponding IBOutlet Variable :

  @IBOutlet weak var arcView: ArcLayoutView!

Then you need to make view controller To achieve ArcLayoutViewDelegate agreement , It contains 3 A way ：

extension ViewController: ArcViewDelegate {
    
    func itemView(_ index: Int) -> UIView {
    
        let itemView = CustomItemView(frame: .zero)
        itemView.titleLabel.text = titles[index]
        itemView.backgroundColor = .clear
        itemView.detailLabel.text = details[index]
        return itemView
    }
    
    func itemViewSize(_ itemView: UIView, limitWidth: CGFloat) -> CGSize {
    
        let v = itemView as! CustomItemView
        var labelSize = v.titleLabel.getSize(constrainedWidth: limitWidth-48)
        var h = labelSize.height
        labelSize = v.detailLabel.getSize(constrainedWidth: limitWidth-48)
        h += labelSize.height+2
        print(h)
        return CGSize(width: limitWidth, height: h)
    }
    
    func itemCount() -> Int {
    
        return titles.count
    }
}

among ,CustomItemView It's a UIView Or custom UIView Subclass . Whether you use pure code or xib Can be created , Whatever you like .

The first delegate method needs to return a UIView object , For this example , That is to say CustomItemView Object （ This is a ArcLayoutView Of ItemView, It is the sub view, At the same time, they are responsible for layout ) . You also need to render the data in this method .

The second delegate method needs to return CGSize , Used to tell ArcLayoutView Every ItemView How much space does it take . If ItemView Adaptive , You need to calculate its size correctly and return it to ArcLayoutView.

The last delegate method returns Int, Used to tell ArcLayoutView It needs to show how many ItemView.

Okay , Let's go view controller Designated as ArcLayoutView Commission of ：

        arcView.options.alignment = .middle
        arcView.delegate = self

ArcLayoutView Of options Property is a ArcLayoutViewOptions Structure . It provides a lot for controlling ArcLayoutView Layout and appearance options . such as alignment Used to specify its location in the layout ItemView The alignment of , have access to .top, .middle and .bottom. If you use .middle , So it looks like this ：

Pay attention to this line : arcView.delegate = self It can lead to ArcLayoutView Redraw all of it ItemView.

ArcLayoutViewOptions One more itemAlignment attribute , Is used to specify the ItemView How itself is aligned to the anchor anchor Of . Anchor point , In fact, they are the red dots in the picture . The default value of this attribute is .middle.

If you set options.alignment = .top, So it looks like this ：

Two adjacent ItemView The vertical spacing between them is equal , You can go through ArcLayoutViewOptions Of itemVerticalSpan Attribute adjustment .

If you don't need to draw an arc 、anchor And spokes , You can modify these properties ：

arcView.options.showDot = false
arcView.options.showArc = false
arcView.options.showSpokes = false

It looks like this ：

For more details , Please check the source code .