gmarm / bettersegmentedcontrol

An easy to use, customizable replacement for UISegmentedControl & UISwitch.

BetterSegmentedControl

BetterSegmentedControl is an easy to use, customizable replacement for UISegmentedControl and UISwitch written in Swift.

Features

• Can be used as a segmented control or switch
• Plethora of customizable options from colors to insets, radii and animations
• Use text or icons as segments, or add your own custom segments
• Designable straight in Interface Builder
• Accessibility support
• iPad cursor support
• Customizable behavior
• Right-to-left languages support
• Fully tested

Check the latest release notes here!

Examples

iOS

iPad cursor

Requirements

• iOS 9.0+
• Xcode 8+

Installation

Swift Package Manager

BetterSegmentedControl is available through Swift Package Manager. To install it, simply go to Xcode under File > Swift Packages > Add Package Dependency...

CocoaPods

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

# Swift 5.1
pod 'BetterSegmentedControl', '~> 2.0'

# Swift 4
pod 'BetterSegmentedControl', '1.0'

# Swift 3 / Objective-C
pod 'BetterSegmentedControl', '0.8'

Manually

If you prefer not to use CocoaPods or Swift Package Manager, you can integrate BetterSegmentedControl into your project manually.

Usage

let control = BetterSegmentedControl(frame: CGRect(x: 16.0,
                                                   y: 0,
                                                   width: view.bounds.width - 32.0,
                                                   height: 44.0))
view.addSubview(control)

You can find several ways of using it, such as by designing it in a Storyboard file or creating it in code in the example project.

To run the example project, clone the repo, and run pod install from the Example directory first.

Contribution

Feel free to submit Pull Requests or send me your feedback and suggestions!

Logo by Guillaume Galante.

Author

George Marmaridis

• https://github.com/gmarm
• https://twitter.com/gmarmas
• https://www.linkedin.com/in/gmarm
• [email protected]

License

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

bettersegmentedcontrol's Issues

Impossible to use swipes.

Hey! Is it possible to make the value change when I use swipeGestures? I can't do it for some reason.

Regards!

Hello, this is a nice library. Can we add badge to segment Control index?

How to place a divider between each title

how to display a vertical line(divider) between each title

How can I set the constraints?

For the segmentedControl there isn't a storyboard option, so I am obliged to use the constraints via code...
But how I do it??
Please Help....

Build Failed: while updating the to latest 0.9 version

Carthage install not able to build

*** Skipped building BetterSegmentedControl due to the error:
Dependency "BetterSegmentedControl" has no shared framework schemes

Cannot assign to property: 'selectedTitleColor' setter is inaccessible

When I first create the Segmented Control programmatically, I can set this property via the Options:
self.modeSelector = BetterSegmentedControl( frame: CGRect(x: self.view.bounds.midX - view.bounds.width/8, y: 25, width: view.bounds.width / 4, height: 30.0), titles: ["?","18+"], index: 0, options: [.backgroundColor(Constants.ColorScheme.Seafoam), .titleColor(.white), .indicatorViewBackgroundColor(.white), .selectedTitleColor(Constants.ColorScheme.Seafoam), .cornerRadius(self.modeSelector.frame.height/2), .titleFont(UIFont(name: "HelveticaNeue", size: 16.0)!), .selectedTitleFont(UIFont(name: "HelveticaNeue", size: 16.0)!), .bouncesOnChange(false), .panningDisabled(true)])

I'm trying to programmatically set the selectedTitleColor but Xcode is telling me this property is inaccessible:
self.modeSelector.selectedTitleColor = Constants.ColorScheme.Coral

This part of my code was working fine before I updated to Xcode 9 and Swift 4 but now it's failing the build. Has anyone else had this issue? I can't figure out how to get around it other than commenting it out.

Stopped working with Objective-C

Seems like you did some changes as now the init method is no longer visible to Obj-C compiler.

Reset indicatorView.cornerRadius after set indicatorViewInset

Hi😃

I read #52. I think this is a bug.
It's necessary to reset indicatorView.cornerRadius after set indicatorViewInset.

.enabled

Any chance you might implement a enabled/disabled capability?

Something like...

    @IBInspectable public var enabled: Bool {
    ........
    }

Ideally there would also be a partner "disabled" colour property so that we can specify the dimmed background (could impact the backgroundColor and indicatorViewBackgroundColor properties.

how to set budge?

Hi
I want to add budge on this segmented control such as new message count.
Is there any way to do this?
Thanks.

iOS 7

Will this work with iOS 7?
I don't have an iOS 7 device but I need to target iOS 7 min.
Are you using any code that is iOS 8+

Is it possible to disable part of segment index?

I need to disable part of segment index and change as disable mode.. is it possible in this

How to get index offset to make smooth scrolling UIScrollView?

Need to scroll UIScrollView when pressed Control

cornerRadius is not correct when setting indicatorViewInset to 0

It is possible I am missing something here, but this is what it looks like:

You can see that the corner radius on the left side is correct, but the one in the bubble is not

The code is

let control = BetterSegmentedControl(
    frame: CGRect(x: 0.0, y: 100.0, width: view.bounds.width, height: 44.0),
    titles: ["One", "Two", "Three"],
    index: 1,
    backgroundColor: UIColor(red:0.11, green:0.12, blue:0.13, alpha:1.00),
    titleColor: .white,
    indicatorViewBackgroundColor: UIColor(red:0.55, green:0.26, blue:0.86, alpha:1.00),
    selectedTitleColor: .black)
control.titleFont = UIFont(name: "HelveticaNeue", size: 14.0)!
control.selectedTitleFont = UIFont(name: "HelveticaNeue-Medium", size: 14.0)!
control.cornerRadius = 22
control.indicatorViewInset = 0
view.addSubview(control)

Customize Segmented Control

I have to make fuel level like attached image. Can i achieve with this BetterSegmentedControl?

Flag to configure control after init

Create a flag or var to allow changing the value of the control without send event "valueChanged"

Swift 3

When is this going to be configured for Swift 3?

CornerRadius issue.

Hey there, I have an issue with the cornerRadius property. For some reason I can't set it to any CGFloat, the compiler gives me an error. I just wanted to make the control round.

Thanks!

Duplicate schemes

#33 and #30 both edited the shared schemes, however now the schemes look like this:

Is this how it should be for Carthage to work? Can we do away with the duplication? @calvingit, @LukeDurrant ?

UIImage for each item?

Could we use image for each one?

Tableview

How to make another api call and change tableView when in another segment

Scrolling blocked on selected index

I'm putting BetterSegmentedControl in a table cell.

If I try to scroll the table up-and-down while my fingertip is on the selected option ("Option C" in the screenshot), then the scrolling is blocked. This happens whether panningDisabled is true or false.

Selected

How i can set the selected segment in code.

For example, when i click a button, then it selects the second segment.
.selectedSegmentIndex is not working.
.setIndex is also not working.

Can't programmatically set index

With a normal UISegmentedControl object, you can set the index with the selectedSegmentIndex property, but there is no way to set the index for a BetterSegmentedControl object.

Objective C

For those of us that don't yet know Swift, you don't happen to have an Objective C copy of this control, do you? Thanks, it is a great control.

Titles can get cut off, make font size adjust automatically.

I'm having an issue, on some devices, the titles can get cut off, and the rest is replaced with three dots. If width is limited, can the font size automatically become smaller to compensate? UILabels already are able to do this, there is an option in Storyboards.

Support for segment images?

Are you interested in supporting segment images?

I was able to create a mock up of how it might work using NSTextAttachment and UILabel's attributedText so there are no UIImageViews involved.

But if you wanted to go in this direction, it would take some work make it backward compatible with the other public properties.

Shy segmented control

I have the segmented control just below the navigation bar and would like to hide it when the user scrolls the page down and display it with when the user scrolls above. This is just like the shy navigation bar feature.

Similar to DGRunkeeperSwitch

My version also handles multiple options.
https://github.com/efremidze/DGRunkeeperSwitch

Selected colors for different items.

Is it possible to choose different selected colors for different items?

Hello, betterSegmentedControl can be underline ? I need this style.

such as ..

set cornerRadius error

ambiguous use of 'cornerRadius'

Views not correct when switching between options (titles)

I found some strange behaviour while using BetterSegmentedControl on Swift 3 / Xcode 8.
I'm using the control to switch in between "all locations" and "favourite locations" in my App. I initialize the controls once using the constructor.

Then further on , I made a code that changes a number in the titles of the segmentedcontrol. (e.g. from 4 to 5 favourite locations when you favourite one). Below here a snippet of code that shows how i do the actual changing of titles.

Here's where the strange behaviour occurs, the selected text and not-selected texts of that title both show (see below).

As you can see the "All locations (5)" labels for active and non active are both represented.

This worked perfectly on Swift 2.2.

Any idea's for this issue?

Kind regards,

Luuk

indicator view hiding text

Hi, first of all good work !

i need the indicator view to be an image view so i added an image view as a subview of indicator view.
I also need the indicator view to hide the text.

played with it a bit and realized by switching these lines in finishInit it works.

    fileprivate func finishInit() {
        layer.masksToBounds = true
        
        addSubview(titleLabelsView)
        **addSubview(selectedTitleLabelsView)
        addSubview(indicatorView)**

maybe it would be a good init parameter ?

setIndex memory leak!

When use setIndex, memory increase from 0 to 120% in 0 secs! And then crash!
And why we have to use do, try to set this ?
Can this be fixed ?
Thanks

wish icon type segment and icon+text type

Images

Is there a way that this control will be used with images, and different selected images? That would be amazing.

Suggestion

Hi @gmarm,
First thing, thanks for building this library, it's great and exactly what I was needed!

I'd like to suggest few things to change, to make the library even better:

1. Make settings options more easier to understand
   In the beginning I thought there is no way to change it, but now I find out that I can change it via options property, it's not the most understandable way and I couldn't find any examples in the README.md or in the Example project, I think you should do something about it.

2. Remove layer.masksToBounds = true from line 310 when indicatorViewInset is negative
   When the indicatorViewInset is negative you should get nice effect like this:
   
   But instead of that the indicatorViewBackground is cutting of when it's passing the BetterSegmentedControl parent view because of this line.
   I don't see any problem after comment it out so it's just unnecessary.

I'v created pull request for this: #87

Thanks,
Ido.

Carthage error! It has no shared framework schemes

selectedSegmentIndex -1

In a normal UISegmentedControl one can set the selectedSegmentIndex=-1 in order to have no selection on the control. This doesn't seem to work with the index property on your control. Is there any way to implement this?

Carthage Compatible.

https://github.com/Dershowitz011/betterSegmentedControl. Are you okay with this?

ERROR: Type of expression is ambiguous without more context

Any ideas?

Allow control to be deselected

Hello,
I have a use-case to allow a new user to select his/her gender. I want the control to be initially deselected to prevent the user from skipping the setup screen with the default "Male" option. SO an empty option would help force the user to select an option. UISegmentedControl allows this:

control.selectedSegmentIndex = UISegmentedControlNoSegment

perhaps you could allow index and setIndex() to accept -1 as an exception. This is common standard for indexes.

Change views with BetterSegmentedControl?

How to do?

Auto-size mode?

Do you have any plans on adding proportional to content auto-size mode?

Carthage build error

When building for carthage I am seeing the following error:

*** Skipped building BetterSegmentedControl due to the error:
Dependency "BetterSegmentedControl" has no shared framework schemes for any of the platforms: iOS

The command I am running: carthage update --platform iOS

A workaround I have found that seems to work for now: Change github "gmarm/BetterSegmentedControl" ~> 0.5 as indicated in the readme to github "gmarm/BetterSegmentedControl" "master"

Different fonts for titleLabels and selectedTitleLabels

First thanks for the great work, I'm just missing the possibility to set different fonts for titleLabels and selectedTitleLabels. This can make sense if you wish to have a regular font in titleLabels and the same bold font of the same size in selectedTitleLabels. In this case the transition looks quite well and the selected item can be better highlighted. What do you think?

Sigle title issue

Hello,

I want to use this segment control and its work perfectly in more then 1 title but as I have requirement of dynamic segment and problem comes when only 1 title comes.

Unable to add custom views to IndicatorView

I'm not sure if this is a feature you are interested in supporting, but my team maintains an in-house fork to be able to add subviews to the indicatorView to support UI that isn't provided.

In our case, we have a view which behaves as an "underline" for the currently selected index and moves along with the indicator view. If we decide to do something different, we can always just change our custom view to look however we want.

The change required to support this is changing the access modifier of the indicatorView property and the IndicatorView class to public. Of course, you could always code in accessors like addSubviewToIndicator or something similar.

Let me know what you think - if this is something you are interested in supporting, I'd be happy to submit a pull request