# ArcView

**Repository Path**: kmyhy/arc-view

## Basic Information

- **Project Name**: ArcView
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Unlicense
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-30
- **Last Updated**: 2021-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ArcLayoutView - implement your own arc-like layout

## What is the ArcLayoutView

Sometimes, we might be required to fullfill this kind of UI :

<img src="1.png"  width = 350/>

How can we make the right text information to go along with the semicircle? Now, we can use the ArcView.

## How to use it?

Only a file enough, Put the  ArcLayoutView.swift file into your project directory,  no Cocoapods, no Carthage.

Then you can create a  ArcLayoutView and put in your ViewController (by storyboard or manually adding). If you used storyboard, you can define an IBOutlet variableand and link it to your ArcLayoutView :

```swift
  @IBOutlet weak var arcView: ArcLayoutView!
```

To get ArcLayoutView work, you must implement the ArcLayoutViewDelegate protocol which include 3 required method. You can refer to Demo app's ViewController:

```swift
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
    }
}
```

Here the CustomItemView is your customized UIView subclass, you can design it in xib or create from scratch. 

The first delegate method is required to return a UIView instance. In this method, you need to initialize your customized UIView subclass(ArcLayoutView call it `ItemView`) and render data to display in the object and finally return it.

The second delegate method is required to return a CGSize which determine the size of`ItemView` when ArcLayoutView layout it. If the `ItemView` is auto-flexible, you need to compute and return its layout size correctly.

The last delegate method return the number of `ItemViews` in the ArcLayoutView.

Ok, give it a try! Put following code in your ViewController file:

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

ArcLayoutView has a `options` property whose type is a `struct` called ArcLayoutViewOptions. This struct involves a lot of members which defined ArcLayoutView's appearance, like `alignment` which can be `.top`, `.middle` and `.bottom`. With `.middle` alignment it will be like this:

<img src="2.png" width= 400/>

> Please note the line: `arcView.delegate = self ` which would make ArcLayoutView redraw all `ItemViews`.

ArcLayoutViewOptions has a `itemAlignment` member which means ItemView how to align the `anchor`(as shown in by red dots in the picture above), and the property is set to .middle by default .

You can set options.alignment = .top, and you can see the result like this:

<img src='3.png' width=400/>

It seems that it's too long span between first ItemView and second ItemView. But actually, the vertical distances between two adjacent ItemViews are equal and them can be adjust by ArcLayoutViewOptions' itemVerticalSpan member.

If you don't want to see the semicircle and red dots, you can use this:

```swift
arcView.options.showDot = false
arcView.options.showArc = false
```

It shows like this:

<img src="4.png" width=400/>

I'd like to draw your attention to ArcLayoutViewOptions's rotate property which can affect aligment effects with .middle alignment together. For example, if we set options.rotate = -CGFloat.pi/20, all itemViews will be rotate -9 degrees unclockwise (positive degrees cause rotate clockwise):

<img src="5.png" width= 400/>

Also see the source code to learn more about the ArcLayoutViewOptions and ArcLayoutView.