polqf / twicketsegmentedcontrol

Custom UISegmentedControl replacement for iOS, written in Swift

TwicketSegmentedControl

Custom UISegmentedControl replacement for iOS, written in Swift, used in the Twicket app.

It handles the inertia of the movement, so you can “throw” the selector from one side to the other.

Take a look at the design by @dsaltaren on Dribbble

Features:

• Drag and Tap gesture
• Movement animation
• IB compatible
• Customizable colors

How to use it:

You can either create it using Interface Builder, or by code.

Whenever the segmented control is instantiated, you'll have to tell it which are going to be the segments it will have:

	let titles = ["First", "Second", "Third"]
	segmentedControl.setSegmentItems(titles)

Every time you use this function, the control is redrawn.

If you want to manually move to an index:

	segmentedControl.move(to: 2)

Keep in mind that the first segment index is 0

To listen to changes on the selected index you just need to set yourself as delegate:

	segmentedControl.delegate = self

And you'll get notified with the following interface:

	func didSelect(_ segmentIndex: Int)

One last thing to mention, even if you set a different outer frame, its contentView height will always be 40.

Customization:

You can customize the segmented control through the following properties:

defaultTextColor: UIColor - Text color for unselected segments

highlightTextColor: UIColor - Text color for selected segment

segmentsBackgroundColor: UIColor - Background color for unselected segments

sliderBackgroundColor: UIColor - Background color for selected segment

isSliderShadowHidden: Bool - Boolean to decide if the slider should have shadow

Installation:

• CocoaPods

use_frameworks!

pod 'TwicketSegmentedControl'

• Carthage

github "twicketapp/TwicketSegmentedControl"

• Manually

To manually add TwicketSegmentedControl to your project you just need to copy the Source folder files.

twicketsegmentedcontrol's Issues

Is it possible to reduce the widget of the active option background view

Is it possible to reduce the widget of the active option background view?

I am basically trying to create the following.

Is this possible using the library?

White square around segment control ?

Could I remove or change the white color behind the segment control ?
Thanks in advance for great library

*UPDATE : I managed to do it by setting segmentedControl.backroundColor to clear color

segmentsBackgroundColor cannot be changed

Looks like this will never be set to a new value as its always set to background color in setter

open var segmentsBackgroundColor: UIColor = Palette.segmentedControlBackgroundColor {
        didSet {
            backgroundView.backgroundColor = backgroundColor
        }
    }

Issue with element interaction with segmented control

Everything works in regards to the segmented control displaying the correct view (aka container). My issue is that in the container view, user can not interact with any elements as simple as text fields, uipicker, etc... basically anything but Images and Labels!?

landscape and portrait orientation toggle issue

Swift 4 support?

Hi, just wondering if this lib will add support for Swift 4? Thanks!

Icons

If there a way to use little images / icons (with or without text) with this component?

How Convert to Objective-c

Support for iOS 9

Any changes to support it on iOS 9, because supporting only on iOS 10 is too restrictive by now.

func didSelect(_ segmentIndex: Int) Not working for me.

Hi great framework you have made. I have installed the TwicketSegmentedControl and used the delegate after the class declaration. I use the func didSelect(_ segmentIndex: Int) but it does not react to changes. Can you update your example with the implementation please?

Issues with Autolayout and sliderBackgroundColor

I am trying to add TwicketSegment Control to my controller but Im facing issues adding to the view with autolayout , it shows and white background strip and the rounded corners come out of the constraints as well

Also setting slider sliderBackgroundColor does not change color for me

import UIKit
import TwicketSegmentedControl
import SnapKit
class PendingActionViewController: UIViewController,TwicketSegmentedControlDelegate {
    var segmentControlView:UIView = {
        var uiView = UIView()
        uiView.backgroundColor =  UIColor.init(red: 0/255.0, green: 102/255.0, blue: 204/255.0, alpha: 1.0)
        return uiView
    }()
    
    var contentView:UIView = {
        var uiView = UIView()
        
        return uiView
        
    }()
    
    var twicketSegmentControl:TwicketSegmentedControl = {
        var twicketSegmentControl : TwicketSegmentedControl = TwicketSegmentedControl(frame:CGRect.zero)
        let titles = ["Messages(4)", "Orders(0)", "Shipments(1)"]
        twicketSegmentControl.setSegmentItems(titles)
        twicketSegmentControl.highlightTextColor = UIColor.white
        twicketSegmentControl.defaultTextColor = UIColor.white
        twicketSegmentControl.sliderBackgroundColor = UIColor.init(red: 26/255.0, green: 153/255.0, blue: 255/255.0, alpha: 1.0)
        twicketSegmentControl.segmentsBackgroundColor = UIColor.red
        return twicketSegmentControl
    }()
    override func viewDidLoad() {
        self.title = "Pending Items"
        super.viewDidLoad()
        configureViewHierarchy()
    }
    
    func configureViewHierarchy(){
        view.addSubview(segmentControlView)
        segmentControlView.snp.makeConstraints { (make) in
            make.top.left.right.equalTo(view)
        }
        
        segmentControlView.addSubview(twicketSegmentControl)
        twicketSegmentControl.delegate = self;
        twicketSegmentControl.snp.makeConstraints { (make) in
            make.top.equalTo(segmentControlView).offset(10)
            make.left.equalTo(segmentControlView).offset(16)
            make.right.equalTo(segmentControlView).offset(-16)
            make.bottom.equalTo(segmentControlView).offset(-10)
            make.height.equalTo(40)
        }
        
        view.addSubview(contentView)
        contentView.snp.makeConstraints { (make) in
            make.left.right.equalTo(view)
            make.bottom.equalTo(view)
            make.top.equalTo(segmentControlView.snp.bottom)
        }

    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    func didSelect(_ segmentIndex: Int) {
        print("Selected index: \(segmentIndex)")
    }
    

}

Swift 2.2

Does this work with swift 2.2 ? or do i have to use Swift 3 for this cocoapod or library to work ?

DidSelect TableView.reloaddata()

Everything is working on DidSelect, but when I call tableview.reload the tableview reloads with the correct data but the segmented control stays on index[0] even though the print says index[1]. I only have two titles on the segementedControl.

When I select index[1] the segment jumps to it and immediately switches back to index[0].

Add UIVisualEffectView to background

I'm wondering if it's at all possible to add a blur view to the background view. From what I understand, if a mask is set to a superview of a UIVisualEffectView it will fail as mentioned here: https://developer.apple.com/reference/uikit/uivisualeffectview. Not sure if this is the cause of the failure I get when I try.

Long segment title is not showing completely

If one of the segment titles is too long, then it is not showing complete text, is there any way we can overcome that or have an alternative to resolve it. For reference, I have attached a screenshot.

Any help would be appreciated.

Segment Not Moved

I'm facing some issues when I user
self.segMentView.move(to: 0)

segment index only moved to the corresponding index but delegate not triggered can you kindly do need fully

Height issue

Unable to increase height of segmented control, could anyone help me in this?

Segment color when selected get blur

I dont know why the color near by the selected segment is always blur?

Please point me out how to solve this problem, Thank Sir so much!

Is it possible to delete little white line between button and nav bar

Is it possible to delete little white spot as it is shown in the picture? I tried a lo of different ways to change tint color, button color and another, but nothing helped me, could you help me with that?

How can i use multiple Segment in a Viewcontroller?

I have create two TwicketSegment. How can i use different didSelect functions? I can´t use .addTarget method on my created segments. Please help me

Issue with setting segement items

When running program I get Thread 1: EXC_BAD_ACCESS (code=2, address=0x102e24e58) pointing at the setSegmentItems

Doesn't stay in selected Index

When ever I slide it doesn't stay in it's selected Index, it moves to first index

Support Swift Package Manager

https://swift.org/package-manager/

Bug: selected segment background color persistence

Thanks for your awesome library! I'm running into a bug where the selected segment background color persists sometimes after moving it to another segment (see below). Please help!

Code for implementation is below:
let segmentedControlTitles = ["Assistant","Itinerary","Chat"]
segmentedControl = TwicketSegmentedControl(frame: CGRect(x: UIScreen.main.bounds.width / 2 - 135, y: 20, width: 270, height: 40))
segmentedControl?.setSegmentItems(segmentedControlTitles)
segmentedControl?.delegate = self
segmentedControl?.segmentsBackgroundColor = UIColor.clear
segmentedControl?.isSliderShadowHidden = false
segmentedControl?.backgroundColor = .clear // This is important!

Support Swift 4

Please god support swift 4