Giter Club home page Giter Club logo

ttsegmentedcontrol's Introduction

TTSegmentedControl

Platform Version License Twitter

About

An elegant, animated and customizable segmented control for iOS.

This project is maintained by Tapptitude, a mobile app development agency specialized in building high-quality iOS and Android mobile apps, for startups and brands alike. A lively team of skilled app developers and app designers based in Europe, we provide full-stack mobile app development services to entrepreneurs looking to innovate on mobile.

Features:

  • Variable number of items
  • Animated transition
  • Bounce animation
  • Fully configurable (color, gradient, shadow, border, corner radius)
  • Designable into Interface Builder

Requirements

  • iOS 13.0+
  • Xcode 11+

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/dumitruigor/TTSegmentedControl.git", branch: "swiftPackage")
]

CocoaPods

  pod 'TTSegmentedControl', :git => 'https://github.com/dumitruigor/TTSegmentedControl.git', :branch => 'swiftPackage'

Carthage

github "tapptitude/TTSegmentedControl"

Manually

Add the TTSegmentedControl to your project.

Usage

  • SwiftUI:
let titles = ["Title1", "Title2"].map { TTSegmentedControlTitle(text: $0) }

TTSwiftUISegmentedControl(titles: titles, selectedIndex: $selectedIndex)
  • UIKit:
let titles = ["Title1", "Title2"].map { TTSegmentedControlTitle(text: $0) }

let segmentedControl = TTSegmentedControl()
segmentedControl.titles = titles
view.addSubview(segmentedControl)

How to customize?

In order to customize the segmented control you'll have to edit it's properties:

//UIKit
segmentedControl.selectionViewFillType = .fillSegment
segmentedControl.titleDistribution = .equalSpacing 
segmentedControl.isDragEnabled = true 
segmentedControl.isSizeAdjustEnabled = true
segmentedControl.isSwitchBehaviorEnabled = false
segmentedControl.containerBackgroundColor = .white
segmentedControl.cornerRadius = .constant(value: 15)
segmentedControl.cornerCurve = .continous
segmentedControl.padding = .init(width: 2, height: 2)

//SwiftUI
TTSwiftUISegmentedControl(titles: titles)
    .titleDistribution(.equalSpacing)
    .padding(.init(width: 2, height: 2))
    .isDragEnabled(true)
    .containerBackgroundColor(.white)
    .selectionViewColor(.blue)
    .cornerRadius(.constant(value: 15))
    .isSwitchBehaviorEnabled(false)
)

You can even disable animation or/and bounce effect:

//UIKit
segmentedControl.animationOptions = nil 
segmentedControl.bounceAnimationOptions = nil

//SwiftUI
TTSwiftUISegmentedControl(titles: titles)
    .animationOptions(nil)
    .bounceAnimationOptions(nil)
)

Or you can edit them:

let animationOptions = TTSegmentedControlAnimationOption(duration: 0.5, options: .curveEaseInOut)
let bounceAnimationOptions = TTSegmentedControlBounceOptions(springDamping: 0.7, springInitialVelocity: 0.2)

//UIKit
segmentedControl.animationOptions = animationOptions
segmentedControl.bounceAnimationOptions = bounceAnimationOptions

//SwiftUI
TTSwiftUISegmentedControl(titles: titles)
    .animationOptions(animationOptions)
    .bounceAnimationOptions(bounceAnimationOptions)
)

The segmentedControl titles can be customized:

let title1 = TTSegmentedControlTitle(
    text: "Title 1",
    defaultColor: .black,
    defaultFont: .systemFont(ofSize: 12),
    selectedColor: .white,
    selectedFont: .systemFont(ofSize: 13)
)

let title2 = TTSegmentedControlTitle(
    text: "Title 2",
    defaultColor: .black,
    defaultFont: .systemFont(ofSize: 12),
    selectedColor: .white,
    selectedFont: .systemFont(ofSize: 13)
)

//UIKit
segmentedControl.titles = [title1, title2]

//SwiftUI
TTSwiftUISegmentedControl(titles: [title1, title2])

Instead of text the titles can be initialized with NSAttributedString objects:

let title1 = TTSegmentedControlTitle(
    defaultAttributedText: attributedText1,
    selectedAttributedText: attributedText2
)

let title2 = TTSegmentedControlTitle(
    defaultAttributedText: attributedText3,
    selectedAttributedText: attributedText4
)

//UIKit
segmentedControl.titles = [title1, title2]

//SwiftUI
TTSwiftUISegmentedControl(titles: [title1, title2])

You can add image instead of title:

let title1 = TTSegmentedControlTitle(
    defaultImageName: "default_image_1",
    selectedImageName: "selected_image_1"
)

let title2 = TTSegmentedControlTitle(
    defaultImageName: "default_image_2",
    selectedImageName: "selected_image_2"
)

let title3 = TTSegmentedControlTitle(
    defaultImageName: "default_image_3",
    selectedImageName: "selected_image_3"
)

//UIKit
segmentedControl.titles = [title1, title2, title3]

//SwiftUI
TTSwiftUISegmentedControl(titles: [title1, title2, title3])

The image sizes can be customized for each title:

let title1 = TTSegmentedControlTitle(
    defaultImageName: "default_image_1",
    selectedImageName: "selected_image_1",
    imageSize: CGSize(width: 10, height: 10)
)

let title2 = TTSegmentedControlTitle(
    defaultImageName: "default_image_2",
    selectedImageName: "selected_image_2",
    imageSize: CGSize(width: 30, height: 30)
)

let title3 = TTSegmentedControlTitle(
    defaultImageName: "default_image_3",
    selectedImageName: "selected_image_3",
    imageSize: CGSize(width: 20, height: 20)
)

//UIKit
segmentedControl.titles = [title1, title2, title3]

//SwiftUI
TTSwiftUISegmentedControl(titles: [title1, title2, title3])

The texts can be combined with the images:

let title1 = TTSegmentedControlTitle(
    text: "Facebook",
    defaultImageName: "default_image_1",
    selectedImageName: "selected_image_1",
    imageSize: CGSize(width: 5, height: 5),
    imagePosition: .left
)

let title2 = TTSegmentedControlTitle(
    text: "Youtube",
    defaultImageName: "default_image_2",
    selectedImageName: "selected_image_2",
    imageSize: CGSize(width: 8, height: 8),
    imagePosition: .bottom
)

let title3 = TTSegmentedControlTitle(
    text: "Twitter",
    defaultImageName: "default_image_2",
    selectedImageName: "selected_image_2",
    imageSize: CGSize(width: 8, height: 7),
    imagePosition: .top
)

//UIKit
segmentedControl.titles = [title1, title2, title3]

//SwiftUI
TTSwiftUISegmentedControl(titles: [title1, title2, title3])

Contribution

Feel free to Fork, submit Pull Requests or send us your feedback and suggestions!

License

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

ttsegmentedcontrol's People

Contributors

alextud avatar brightsider avatar cocanlucian avatar daria-andrioaie avatar efraimb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ttsegmentedcontrol's Issues

Landscape Support

When the orientation changes to landscape,

  1. the control doesn't resize to accommodate the new screen size.
  2. If an option is selected, the slider moves to an awkward position in the uppermost left point of the view. The block in didSelectItemWith doesn't execute and further selection is no longer possible in this orientation.
  3. When switched back to portrait, the slider stays in the top left corner, but functionality is repaired. If another selection is made, the slider will correct its position to highlight the selection and the didSelectItemWith block executes correctly.
  • I've noticed this issue in several locations of my implementation on both iPads and iPhones.
  • I've tested this on iOS10.x.x

Unable to fit size when device is iPhone SE

Hello there,

I'm facing an issue when I used your library with an iPhone SE. I used 3 items and the last item is not display well.

I join a screenshot to help you understand my issue.

capture d ecran 2019-01-23 a 11 43 57

Thank you.

Example is not working

You changed the URL with the forked one. There are new updates in this repo, but not in the forked repo. Why did you change the URL path?

set image

Can we set image instead of itemTitles ?

Black Drag Error

screen shot 2019-03-07 at 11 59 02 pm

Hello. I am getting an UI error when I transition to another view Controller then back to the View Controller that has the Segment Control. Any idea on how to fix this? I submitted a picture of the error occurring.

Update to swift 5.0

I want to use this awesome library in my project.
However my project is in swift 5 so are there any plans to convert it to swift 5 anytime soon?

Thanks

Zero Indexed

Great component, may I suggest though you make the first item in the segment 0 indexed rather than 1. Every first anything in Swift is always 0 and not 1 ...

keep up the good work... cheers

Detecting when an item has been selected

Trying to make use of your library, the customisation is good but it is not documented at all on how to make practical use of the segmented control. It worked completely different to the standard segmented control that comes by default. Tried to use the variable didSelectItemWith, but can't get it to work. Any example you could provide would help.

Unable to set the initial index.

Trying to set an initial selected index via selectItemAt(index: 3). This is not working as expected. When I step through the code and it always states it is not configured.

I have the controls setup in InterfaceBuilder.

'segmentControl.noItemSelected = true' not working

Following is my code -

let segmentControl = TTSegmentedControl(frame: CGRect(x: (contentView.frame.size.width - timeView.frame.size.width) / 2, y: y, width: timeView.frame.size.width, height: segment_control_height))
segmentControl.tag = am_pm_segment_control_tag
segmentControl.allowChangeThumbWidth = false
segmentControl.noItemSelected = true
segmentControl.didSelectItemWith = { (index, title) -> () in
self.segmentCurrentIndex = index
}
segmentControl.defaultTextColor = .blackColor2
segmentControl.defaultTextFont = UIFont.openSansSemiboldFontOfSize(MAConstants.regularFontSize)
segmentControl.selectedTextColor = .whiteColor
segmentControl.selectedTextFont = UIFont.openSansSemiboldFontOfSize(MAConstants.regularFontSize)
segmentControl.useShadow = true
segmentControl.useGradient = false
segmentControl.thumbColor = .greenColor3
segmentControl.cornerRadius = MAConstants.componentCornerRadius
segmentControl.itemTitles = segment_items
contentView.addSubview(segmentControl)

Failed to render layout, and crash at runtime.

Hi there,

I'm experiencing several problems, the first is that it fails to render the layout:
ss

I'm able to run it despite the error above. I try to use it in my controller like this, everything seems fine:

ssss

But runtime I get this error:

sss

Sometimes I even get a different error:

sssss

Furthermore my entire controller, where I use it, it black, since it cannot be rendered.

Segmented is not supporting RTL when using constraints?

I've added the segmented by code, and added constraints, but when the app is rtl, the segmented remains the same. Not mirroring the view to support rtl.

Try to use a little hack to mirror the view using CGAffineTransform, but the labels are mirrored also. Not very good idea.

Any idea?

selectItemAt does not move the thumb

.selectItemAt(index: 0, animated: true) does not make the thumb move when you try to set the position programmatically. is there another way?? thank you

index out of range on actual device

hi I configured it on my simulator and it run perfectly but first attempt to run on physical device I get index out of range on the line I commented where Is the problem on this function I see that index variable is -1 I didn't even call this function.

public func selectItemAt(index: Int, animated: Bool = false) { if !isConfigurated { currentSelectedIndex = index return } let label = allItemLabels[min(index, attributedDefaultTitles.count)] //////on this line/////// selectedLabelsView.isHidden = noItemSelected changeThumbFrameForPoint(label.center, animated: animated) }

0.4.7 is the only version available

Hi,
I'm trying to install version 0.4.9 and the only version that gets installed is 0.4.7.
I have this in the podfile. pod 'TTSegmentedControl', '~> 0.4' and it loads version 0.4.7

If I use pod 'TTSegmentedControl', '~> 0.4.9' it says it doesn't exist.

So I tried loading it manually by dragging the TTSegmentedControl.swift file into a brand new project. When I create a new TTSegmentedControl, as son as I set the custom class I get the failed to render error. I downloaded the TTSegmentedControl-0.4.9.zip file to get the latest TTSegmentedControl.swift file. Am I not understanding something?

Calling "self.view.layoutIfNeeded()" breaks control

In the viewDidLoad() function of the View Controller, I call self.view.layoutIfNeeded(), When I wasn't calling this, the control was working fine but now it completely breaks the control's settings including the titles, drag settings etc, I am running the latest version of the pod file.

changing UIViewControllers

when first item is selected first UIViewController has to display and when second item is selected second UIViewController has to display

CocoaPods version update

Thanks for your library, it makes development easier :)

But I have a small issue with your library. When I had updated swift version on my main project to 4, I've got 2 errors occurred into Xcode.
It refers to NSAttributedStringKey keys, such as foregroundColor and font.

I saw in your last commits that you fixed that sometimes ago and also pushed a new version of your library. But despite that, you don't push your up-to-date version into the cocoapods repo.

Please, update your library to give a possibility use up-to-date version just writing pod 'TTSegmentedControl'.

Regards.

Change itemTitle

Hi,
first of all thanks for your TTSegmentedControl, it is very useful.

My question is:
How can i change the itemTitle after having already definite it?
I tried with a simple new definition but it doesn't works.

Thank you

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.