How to create Custom Segmented Control In Swift 4

PinterestSegment

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views.

A Pinterest-like segment control with masking animation.

Custom Segmented Control In Swift 4 - IOS Source App
  • language: Swift 4
  • platform: ios
  • device: iphone/ipad
  • license: MIT

Tag

Installation

CocoaPods

You can use CocoaPods to install PinterestSegment by adding it to your Podfile:

platform :ios, '8.0'
use_frameworks!
pod 'PinterestSegment'

To get the full benefits import PinterestSegment wherever you import UIKit

import UIKit
import PinterestSegment

Carthage

Create a Cartfile that lists the framework and run carthage update. Follow the instructions to add $(SRCROOT)/Carthage/Build/iOS/PinterestSegment.framework to an iOS project.

github "tbxark/PinterestSegment"

Manually

  1. Download and drop PinterestSegment.swift in your project.
  2. Congratulations!

Usage example

let  style = PinterestSegmentStyle()

style.indicatorColor = UIColor(white: 0.95, alpha: 1)
style.titleMargin: CGFloat = 15
style.titlePendingHorizontal: CGFloat = 14
style.titlePendingVertical: CGFloat = 14
style.titleFont = UIFont.boldSystemFont(ofSize: 14)
style.normalTitleColor = UIColor.lightGray
style.selectedTitleColor = UIColor.darkGray

let segment = PinterestSegment(frame: CGRect(x: 20, y: 200, width: w - 40, height: 40), style: style, titles: ["Everything", "Geek", "Humor", "Art", "Food", "Home", "DIY", "Wemoent' Style", "Man's Style", "Beauty", "Travel"])

segment.valueChange = { index in
  // Do something here
}
@IBOutlet weak var ibSegment: PinterestSegment!

var titles = [PinterestSegment.TitleElement]()
for i in 1...7 {
    guard let image = UIImage(named: "icon_(i)"),
    let selectedImage = image.maskWithColor(color: ibSegment.style.selectedTitleColor),
    let normalImage = image.maskWithColor(color: ibSegment.style.normalTitleColor)  else { continue }
    titles.append(PinterestSegment.TitleElement(title: "Face-(i)", selectedImage: selectedImage, normalImage: normalImage))
}
ibSegment.setRichTextTitles(titles)

Requirements

iOS 8.0+

Xcode 9.0

Swift 4.0

Download

PinterestSegment

Related Posts

One thought on “How to create Custom Segmented Control In Swift 4

  1. Как раз искал информацию о новых досках объявлений – статья пришлась как раз кстати.

Leave a Reply

Your email address will not be published. Required fields are marked *