YMCirclePickerView

Fully customizable horizontal circle picker view.

YMCirclePickerView

Requirements

  • iOS 9.0+
  • Xcode 11+
  • Swift 5.0+

Usage

Example Project

Interface Builder Usage

  • Add an empty view in your view and set it's Class to YMCirclePickerView with it's module.

YMCirclePickerView-Interfacebuilder

  • Add datasource and delegate(if necessary) then customize layout and style presentations in code.

import YMCirclePickerView

@IBOutlet private weak var circlePickerView: YMCirclePickerView!

circlePickerView.delegate = self
circlePickerView.dataSource = self
circlePickerView.presentation = YMCirclePickerViewPresentation(
   layoutPresentation: YMCirclePickerViewLayoutPresentation(
   	itemSize: CGSize(width: 100.0, height: 100.0),
   	unselectedItemSize: CGSize(width: 60.0, height: 60.0),
   	spacing: 5.0,
   	initialIndex: 3
   ),
   stylePresentation: YMCirclePickerViewStylePresentation(
   	selectionColor: .red,
   	selectionLineWidth: 4.0,
   	titleLabelDistance: 3.0
   )
)
// Or you can use the default one.
circlePickerView.presentation = .default

Code Usage

It's as simple as interface builder implementation. Follow the below code as a guide.

let circlePickerView = YMCirclePickerView()
circlePickerView.backgroundColor = .red
circlePickerView.dataSource = self
circlePickerView.presentation = YMCirclePickerViewPresentation(
   layoutPresentation: YMCirclePickerViewLayoutPresentation(
   	itemSize: CGSize(width: 75.0, height: 75.0),
   	unselectedItemSize: CGSize(width: 30.0, height: 30.0),
   	spacing: 15.0
   ),
   stylePresentation: YMCirclePickerViewStylePresentation(
   	selectionColor: .clear,
   	selectionLineWidth: 3.0,
   	titleLabelFont: .systemFont(ofSize: 12.0, weight: .thin),
   	titleLabelTextColor: .white,
   	titleLabelDistance: 3.0
   )
)
stackView.addArrangedSubview(circlePickerView)

DataSource and Delegate Methods

  • Usage

Your data source class must be inherited from YMCirclePickerModel. Simple example for model class:

class ExampleCirclePickerModel: YMCirclePickerModel {

    override init() {

        super.init()
    }

    convenience init(image: UIImage, title: String) {

        self.init()
        self.image = image
        self.title = title
    }
}

// Use your custom class to conform data source like below

func ymCirclePickerView(ymCirclePickerView: YMCirclePickerView, itemForIndex index: Int) -> YMCirclePickerModel? {

	let model = data[index] as ExampleCirclePickerModel
	return model
}

or you can return your custom UIView as well.


func ymCirclePickerView(ymCirclePickerView: YMCirclePickerView, itemForIndex index: Int) -> UIView? {

    let view = UIView()
    view.backgroundColor = .red
    return view
}
  • DataSource Methods
func ymCirclePickerView(ymCirclePickerView: YMCirclePickerView, itemForIndex index: Int) -> YMCirclePickerModel?
func ymCirclePickerView(ymCirclePickerView: YMCirclePickerView, itemForIndex index: Int) -> UIView?
func ymCirclePickerViewNumberOfItemsInPicker(ymCirclePickerView: YMCirclePickerView) -> Int
  • Delegate Methods
func ymCirclePickerView(ymCirclePickerView: YMCirclePickerView, didSelectItemAt index: Int)

Installation

CocoaPods

To use YMCirclePickerView in your project add the following 'Podfile' to your project

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.0'
use_frameworks!

pod 'YMCirclePickerView'

Then run:

pod install

Carthage

Check out the Carthage docs on how to add a install. The YMCirclePickerView framework is already setup with shared schemes.

Carthage Install

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate YMCirclePickerView into your Xcode project using Carthage, specify it in your Cartfile:

github "miletliyusuf/YMCirclePickerView"

TODO

  • [ ] Selected image insets

GitHub

https://github.com/miletliyusuf/YMCirclePickerView