RESegmentedControl

Customizable segmented control with style presets. It can display both texts and images, vertically or horizontally. Able to download and cache images. Adaptive Layout-Driven UI. Natural and smooth animation between segments switch.

How to use

Steps to use RESegmentedControl:

• Import RESegmentedControl to your class:

import RESegmentedControl

• Specify a list of string that will be shown in RESegmentedControl:

/// List of items
let items = ["safari", "chrome", "firefox"]

• Add UIView to Storyboard’s ViewController. Change class and module to RESegmentedControl and @IBOutlet to your ViewController:

/// Segmented Control
@IBOutlet weak var segmentedControl: RESegmentedControl!

or create a RESegmentedControl programmatically:

let segmentedControl = RESegmentedControl(frame: CGRect(x: 0, y: 0, width: 200, height: 44))
self.view.addSubview(segmentedControl)
// -TODO: Add segmentedControl Auto-Layouts…

• Map a list of string to segment items:

// Segment items
var segmentItems: [SegmentModel] {
    return items.map({ SegmentModel(title: $0, imageName: $0) })
}

• Create a preset to style the Segmented Control:

// Segmented Control Styles Preset
let preset = BootstapPreset(backgroundColor: .white, selectedBackgroundColor: .black)

• Configure your Segmented Control with items and preset:

// Segmented Control configuration method
segmentedControl.configure(segmentItems: segmentItems, preset: preset)

To learn more, take a look at the demo project.

Layout Types

RESegmentedControl initialize with a list of SegmentModel. RESegmentedControl could be shown in three ways, with text only, image only or with text and image.

• To show segments with text, initiate a SegmentModel with title variable:

let segmentsItem: [SegmentModel] = [SegmentModel(title: “Title”)]

• To show image, initiate a SegmentModel with imageName variable:

let segmentsItem: [SegmentModel] = [SegmentModel(imageName: “imageNameInAseetCatalog”)]

initiate a SegmentModel with imageUrl variable to load image from remote server:

let imageUrl = “https://domain.com/image.png”
let segmentsItem: [SegmentModel] = [SegmentModel(imageUrl: imageUrl)]

• To show text and image, initiate a SegmentModel with title and imageName or imageUrl variable:

let segmentsItem: [SegmentModel] = [SegmentModel(title: “Title”, imageName: “imageNameInAseetCatalog”)]

// Image remote location url
let imageUrl = “https://domain.com/image.png”
let segmentsItem: [SegmentModel] = [SegmentModel(title: “Title”, imageUrl: imageUrl)]

For more information, see BasicExampleViewController in the demo project.

API

• Dynamically adds item:

func addItem(_ item: SegmentModel, atIndex index: Int? = nil)

• Dynamically removes item:

func removeItem(atIndex index: Int? = nil)

var segmentItemsCount: Int

var selectedSegmentIndex: Int

• Deselects selected segment item:

func deselect()

For more information, see ActionViewController in the demo project.

Presets and Styles

RESegmentedControl supports a wide range of customization appearance. It is also possible to apply ready-made presets of styles or create your own preset.

Currently 4 presets are available:

• iOS7Preset - Stylizes to iOS7 system style.

struct iOS7Preset: SegmentedControlPresettable

• iOS13Preset - Stylizes to iOS13 system style.

struct iOS13Preset: SegmentedControlPresettable

• MaterialPreset - Stylizes to Material style.

struct MaterialPreset: SegmentedControlPresettable

• BootstapPreset - Preset with minimal pre-stylization, designed to customize the preset to fit your needs.

struct BootstapPreset: SegmentedControlPresettable

For more information, see PresetsViewController in the demo project.

To learn more about how to create a preset, follow the Creating a Preset Guide.

Installation

To learn more see a full API Reference, and check out the demo project included in the repository. When you are ready to install, follow the Installation Guide.

Requirements

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Insparation

• WWDC 2018: Adding Delight to your iOS App

Author

Sherzod Khashimov

License

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