WatchLayout

Requirements

iOS 13+

Installation

Cocoapods

WatchLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/HocTran/WatchLayout.git", .upToNextMajor(from: "1.1.0"))
]

Usage

UIKit

let layout = WatchLayout()

Support configurations

Set the item size for collection view cell.

layout.itemSize = 200

Set the cell item spacing. Minus means the items can be overlapped. Default value 0.

layout.spacing = -40

Set the scaling for item next to the item in the center. Default value 0.4

layout.nextItemScale = 0.4

Set the minimum scaling for item depending on the distance to the center. Default value 0.2

layout.minScale = 0.2

Assign the custom layout to UICollectionView

collectionView.collectionViewLayout = layout

Scroll to an item at the index path

self.collectionView.setContentOffset(layout.centeredOffsetForItem(indexPath: IndexPath(item: 0, section: 0)), animated: true)

Get the current centered index

layout.centeredIndexPath

SwiftUI

SwiftUI version is built on top of UIViewRepresentable of WatchLayout.

Declare a layout attributes (See the detail of each param in the UIKit usage above).

@State var layout = WatchLayoutAttributes(
    itemSize: 120,
    spacing: 16,
    minScale: 0.2,
    nextItemScale: 0.6
)

Create and assign layout attributes to the view

• data: RandomAccessCollection (or Binding) for computing the collection.

• centeredIndex: (Optional) A binding to indentify the centered index of the collection.

WatchLayoutView(
    layoutAttributes: layout,
    data: data,
    centeredIndex: $centeredIndex,
    cellContent: ({ dataElement in
        // Build up your cell content here
        Text(dataElement.description)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(dataElement.color)
            .clipShape(Circle())
})

If data element is hashable, the centered binding can be a data element.

WatchLayoutView(
    layoutAttributes: layout,
    data: data,
    centeredItem: $centeredItem,
    cellContent: ({ dataElement in
        // Build up your cell content here
        Text(dataElement.description)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(dataElement.color)
            .clipShape(Circle())
})

Screenshots

Positioning	Scrolling

Example 01	Example 02

Example

To run the example project, clone the repo, open WatchLayout.xcworkspace.

UIKit

• Select scheme WatchLayout, Cmd+B to build the framework.

• Select scheme Example-iOS, and run the example.

SwiftUI

• Select scheme WatchLayout, Cmd+B to build the framework.

• Select scheme WatchLayout-SwiftUI, Cmd+B to build the framework.

• Select scheme Example-iOS, and run the example.

Author

HocTran, [email protected]

License

WatchLayout is available under the MIT license. See the LICENSE file for more info.