gocepetrovski / scrollablesegmentedcontrol Goto Github PK

Hello, i am using ScrollableSegmentedControl but problem is that more space between to tabs also set text with two line...

Am I blind or is there no way to set a default index to be selected?

There is another problem similar to issue #32 and related to the "didset" highlighted logic that affects the attributed title of the segment

To reproduce:

1. Use text only as segmented style
2. Have only 2 segments so that the segmented control does not scroll
3. Set different title text attributes for normal, highlighted and selected states
4. Tap and hold the selected segment that active is
5. Slide the finger to left or right until the finger is in the next segment
6. Lift the finger and the selected segment title stays in the normal attributed state when it should have the selected one

In my tests I have seen that the control can have the following combination states:

• not selected, not highlighted (normal)
• not selected, highlighted (only highlighted)
• selected, not highlighted (only selected)
• selected and highlighted (selected and highlighted)

I think that the priorities should be highlighted > selected > normal, that means that when isHighlighted is set to false we need to check if it is selected

This problem is present in other segmented styles too

help please. ty

Would it be possible to get some SPM love.

When I try to set font size manually as like you have mentioned but no luck. Please come up with solution ASAP.

My code,

let largerRedTextAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 20), NSAttributedStringKey.foregroundColor: UIColor.white]
let largerRedTextHighlightAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 20), NSAttributedStringKey.foregroundColor: UIColor.white]
let largerRedTextSelectAttributes = [NSAttributedStringKey.font: UIFont.systemFont(ofSize: 20), NSAttributedStringKey.foregroundColor: UIColor.white]

segmentedControl.setTitleTextAttributes(largerRedTextAttributes, for: .normal)
segmentedControl.setTitleTextAttributes(largerRedTextHighlightAttributes, for: .highlighted)
segmentedControl.setTitleTextAttributes(largerRedTextSelectAttributes, for: .selected)

Setting

• fixedSegmentWidth to false AND
• using attributed titles
  causes the segment titles to get truncated even though there is plenty of space.

The issue happens on iOS 12. On iOS 13, it is OK.

Please, see the attached screenshots (from the demo application):

iOS 12

iOS 13

Currently if removeSegment is called, segmentView removes the segment at that index and shift it to the right index, but what if there are only two indexes (in my case) and upon removing 1st index it should fall back to 0th index but it crashes with the message "'attempt to scroll to invalid index path: <NSIndexPath: 0x60400003ec60> {length = 2, path = 0 - 1}'". Please suggest a fix.

How can I Change the image of selected segment? Meaning that when I select a segment, its image change to a specific image and return to main when select other segment.

it's not showing. refer screenshot and code. kindly do needfully.

 @IBOutlet weak private var scrollSegmentControl: ScrollableSegmentedControl!

scrollSegmentControl.addTarget(self, action: #selector(self.changeSegement(with:)), for: .valueChanged)
        
        let normalAttributes = [NSAttributedString.Key.font: Font(.installed(.OpenSansExtraBold), size: .custom(24)).instance,
                                .foregroundColor: UIColor.black]
        
        let highLightedAttributes = [NSAttributedString.Key.font: Font(.installed(.OpenSansExtraBold), size: .custom(24)).instance,
                                     .foregroundColor: UIColor.lightGray.withAlphaComponent(0.25)]
        
        let selectedAttributes = [NSAttributedString.Key.font: Font(.installed(.OpenSansExtraBold), size: .custom(24)).instance,
                                  .foregroundColor: UIColor.black]
        
        scrollSegmentControl.setTitleTextAttributes(normalAttributes, for: .normal)
        scrollSegmentControl.setTitleTextAttributes(highLightedAttributes, for: .highlighted)
        scrollSegmentControl.setTitleTextAttributes(selectedAttributes, for: .selected)

        scrollSegmentControl.selectedSegmentIndex = 0
        scrollSegmentControl.insertSegment(withTitle: "Explore", at: 0)
        scrollSegmentControl.insertSegment(withTitle: "Latest", at: 1)
        scrollSegmentControl.insertSegment(withTitle: "Popular", at: 2)
        scrollSegmentControl.insertSegment(withTitle: "Trending", at: 3)
        scrollSegmentControl.insertSegment(withTitle: "Most Viewes", at: 4)
        
        scrollSegmentControl.segmentStyle  = .textOnly
        scrollSegmentControl.segmentContentColor = .red
        scrollSegmentControl.selectedSegmentContentColor = .yellow
        scrollSegmentControl.backgroundColor = .clear
        scrollSegmentControl.fixedSegmentWidth = false
        scrollSegmentControl.underlineSelected = false

Aloha,

Running into a problem when I load the needed segments in from an array, as opposed to doing it statically.

This function works and gives the desired output. All 5 show up in the segmentedControl.

func testCategory() {
        var int = 0
        for i in 1...5 {
            print("here is \(int)")
            segmentedControl.insertSegment(withTitle: "Sssss", at: int)
            int += 1
        }
    }

Photo:

On the other hand, when making a request from our database, here's what happens. The segments show up individually instead of filling the entire screen with x amount that we need.

   func loadCategories() {
        
        var int = 0
        segmentedControl.segmentStyle = .textOnly
        segmentedControl.underlineSelected = true

        let queryForCategories = PFQuery(className: Category.parseClassName())
        queryForCategories.whereKey("active", equalTo: true)
        queryForCategories.findObjectsInBackground { (categories, error) in
            if error == nil {
                self.categoriesArray.removeAll()
                self.categoriesArray = Array(categories!.makeIterator()) as! [Category]
                
                for category in self.categoriesArray {
                    let name = category.name
                    DispatchQueue.main.async {
                        self.segmentedControl.insertSegment(withTitle: name, at: int)
                    }
                }
                
            } else {
                switch error!._code {
                case 100:
                    print("networking error.")
                default: fatalError()
                }
            }
        }
    }

Photo:

Any help greatly appreciated. Thank you.

I have seen segment controls in apps having custom widths and underline bars animate according to their size. Where custom widths are determined by the contents in them. Here the height is fixed for the maximum width segment item or else the font size is reduced to fit in.
Hoping this could be implemented or have done already.

I want to remove all segment items before change to new items

Not supported for iPhone 11 pro.

Lot of constraint errors.

I am trying to set selectedSegmentIndex = 0 but it doesn't work. Any idea?

Underline disappears because of a problem with highlighted logic

To reproduce:

1. Tap and hold the selected segment that shows the underline
2. Slide the finger to left or right until the finger is in the next segment
3. Lift the finger and the selected underline state will disappear

at the default text only style, the selected tab will show underline below the text. but I need to make full highlight color if a tab in segmented control is selected. I mean someting like the orange color like this : https://i.stack.imgur.com/0LnRC.png

if I use regular segmented control from UIKit, it just need to change the tint color. but because I use ScrollableSegmentedControl the tint color will change the underline color.

is it possible to achieve this ?

Hi,

I would like to fill the segmented control dynamically with my database data.
It's work but i've some issue that i can't figure it out...

I've choose to not have a fix width for all items and unfortunately my items are not to the right size (like you can see on this picture)

But when i add items normally with one .insertSegment by items it's worked fine...

Have you some idea for this ?

I put my code here to let you see

Thanks in advance and thanks for the lib !

PS: sorry for my english (i'm french :D)

My code:
segmentedControl.removeSegment(at: index)
segmentedControl.insertSegment(withTitle: title, at: index)

Please help me, Thanks

hi

`@IBOutlet var segment: ScrollableSegmentedControl!
override func viewDidLoad() {
super.viewDidLoad()
let largerRedTextAttributes = [NSFontAttributeName: UIFont(name: "Avenir-Roman", size: 12)!,
NSForegroundColorAttributeName: #colorLiteral(red: 0.9411764706, green: 0.9411764706, blue: 0.9411764706, alpha: 1)] as [String : Any]

    let largerRedTextHighlightAttributes = [NSFontAttributeName: UIFont(name: "Avenir-Roman", size: 12)!,
                                            NSForegroundColorAttributeName: #colorLiteral(red: 0.9411764706, green: 0.9411764706, blue: 0.9411764706, alpha: 1)] as [String : Any]
    
    let largerRedTextSelectAttributes = [NSFontAttributeName: UIFont(name: "Avenir-Medium", size: 14)!,
                                         NSForegroundColorAttributeName: ApplicationColor.BlueColor]

    // change some colors
    segment.segmentContentColor = #colorLiteral(red: 0.9411764706, green: 0.9411764706, blue: 0.9411764706, alpha: 1)
    segment.selectedSegmentContentColor = ApplicationColor.BlueColor
    segment.backgroundColor = .white
    segment.segmentStyle = .imageOnTop
    segment.insertSegment(withTitle: "Segment 1", image: #imageLiteral(resourceName: "male"), at: 0)
    segment.insertSegment(withTitle: "Segment 2", image: #imageLiteral(resourceName: "female"), at: 1)
    segment.insertSegment(withTitle: "Segment 3", image: #imageLiteral(resourceName: "price"), at: 2)
    segment.insertSegment(withTitle: "Segment 4", image: #imageLiteral(resourceName: "time"), at: 3)
    segment.insertSegment(withTitle: "Segment 5", image: #imageLiteral(resourceName: "cellphone"), at: 4)
    segment.insertSegment(withTitle: "Segment 6", image: #imageLiteral(resourceName: "profile"), at: 5)
    segment.underlineSelected = true
    segment.selectedSegmentIndex = 4
    segment.setTitleTextAttributes(largerRedTextAttributes, for: .normal)
    segment.setTitleTextAttributes(largerRedTextHighlightAttributes, for: .highlighted)
    segment.setTitleTextAttributes(largerRedTextSelectAttributes, for: .selected) 

}
@IBAction func segmentChanged(_ sender: ScrollableSegmentedControl) {
print("Segment at index (sender.selectedSegmentIndex) selected")

}`

Segment at index 4 selected
Segment at index -1 selected
Segment at index 0 selected

**above mentioned is my code to create segment! I need to selected index as 4 but when is loaded console log return different index, it's from -(minus) index, kindly check it and help to resolve it **

no underline when i set
segmentedControl.selectedSegmentIndex = 0 at viewDidLoad

segmentedControl.segmentStyle = .textOnly
segmentedControl.insertSegment(withTitle: "待付款", image: #imageLiteral(resourceName: "segment-1"), at: 0)
segmentedControl.insertSegment(withTitle: "已付款", image: #imageLiteral(resourceName: "segment-2"), at: 1)
segmentedControl.insertSegment(withTitle: "待收货", image: #imageLiteral(resourceName: "segment-3"), at: 2)
segmentedControl.insertSegment(withTitle: "已收货", image: #imageLiteral(resourceName: "segment-4"), at: 3)
segmentedControl.underlineSelected = true
segmentedControl.addTarget(self, action: #selector(self.segmentSelected(sender:)), for: .valueChanged)
segmentedControl.selectedSegmentIndex = 0

i have to tap the segment then the underline will appear.without tap the segment underline will not appear

Can you add an option to change the background color of the selected index as seen in the native segmented controller .

• Custom width not working properly it wraps while scrolling.
• long text wraps while the scrolling

Hi,
I check the release version(1.3.0) and the version committed is not the same, for example in version 1.3.0 there is no fixedSegmentWidth property.

Need customize underline height, color at selected index.

So the only way I've been able to get the default selected index to actually highlight is by putting it in viewWillAppear, but I'd rather not do that. It is not working in viewDidLoad where I want it to.

Ideas?

Hi,

Thanks for the Library. It's really useful.

I was trying to set the underline height of the segment using the Pod but it seems that it is not available in the Pod. I tried using the ScrollableSegmentedControl.swift file directly but the app crashes after initializing the segment control. Here is the stack trace of the crash I am getting (I have replaced my actual project name with <Project_Name>):

2020-04-19 14:09:06.852622+0530 <Project_Name>[1824:49590] -[_TtGCs18_DictionaryStorageaSo21NSAttributedStringKeyP__$ imageWithRenderingMode:]: unrecognized selector sent to instance 0x6000025fbcf0 2020-04-19 14:09:06.897516+0530 <Project_Name>[1824:49590] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[_TtGCs18_DictionaryStorageaSo21NSAttributedStringKeyP__$ imageWithRenderingMode:]: unrecognized selector sent to instance 0x6000025fbcf0' *** First throw call stack: ( 0 CoreFoundation 0x00007fff23c7127e __exceptionPreprocess + 350 1 libobjc.A.dylib 0x00007fff513fbb20 objc_exception_throw + 48 2 CoreFoundation 0x00007fff23c91fd4 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132 3 CoreFoundation 0x00007fff23c75c4c ___forwarding___ + 1436 4 CoreFoundation 0x00007fff23c77f78 _CF_forwarding_prep_0 + 120 5 ScrollableSegmentedControl 0x00000001049fd901 $s26ScrollableSegmentedControlAAC13insertSegment4with2atySo7UIImageC_SitF + 129 6 <Project_Name> 0x0000000103d63ba6 $s12<Project_Name>ViewControllerC15setUpPageHeaderyyF + 2022 7 <Project_Name> 0x0000000103d632e4 $s12<Project_Name>ViewControllerC11viewDidLoadyyF + 132 8 <Project_Name> 0x0000000103d633ab $s12<Project_Name>ViewControllerC11viewDidLoadyyFTo + 43 9 UIKitCore 0x00007fff47a0ef01 -[UIViewController _sendViewDidLoadWithAppearanceProxyObjectTaggingEnabled] + 83 10 UIKitCore 0x00007fff47a13e5a -[UIViewController loadViewIfRequired] + 1084 11 UIKitCore 0x00007fff47a14277 -[UIViewController view] + 27 12 UIKitCore 0x00007fff479633dd -[UINavigationController _startCustomTransition:] + 1039 13 UIKitCore 0x00007fff4797930c -[UINavigationController _startDeferredTransitionIfNeeded:] + 698 14 UIKitCore 0x00007fff4797a721 -[UINavigationController __viewWillLayoutSubviews] + 150 15 UIKitCore 0x00007fff4795b553 -[UILayoutContainerView layoutSubviews] + 217 16 UIKitCore 0x00007fff485784bd -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 2478 17 QuartzCore 0x00007fff2b131db1 -[CALayer layoutSublayers] + 255 18 QuartzCore 0x00007fff2b137fa3 _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 517 19 QuartzCore 0x00007fff2b1438da _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 80 20 QuartzCore 0x00007fff2b08a848 _ZN2CA7Context18commit_transactionEPNS_11TransactionEd + 324 21 QuartzCore 0x00007fff2b0bfb51 _ZN2CA11Transaction6commitEv + 643 22 QuartzCore 0x00007fff2b0c04ba _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 76 23 CoreFoundation 0x00007fff23bd3867 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION__ + 23 24 CoreFoundation 0x00007fff23bce2fe __CFRunLoopDoObservers + 430 25 CoreFoundation 0x00007fff23bce97a __CFRunLoopRun + 1514 26 CoreFoundation 0x00007fff23bce066 CFRunLoopRunSpecific + 438 27 GraphicsServices 0x00007fff384c0bb0 GSEventRunModal + 65 28 UIKitCore 0x00007fff48092d4d UIApplicationMain + 1621 29 <Project_Name> 0x0000000103d7851b main + 75 30 libdyld.dylib 0x00007fff5227ec25 start + 1 31 ??? 0x0000000000000001 0x0 + 1 ) libc++abi.dylib: terminating with uncaught exception of type NSException

This file works fine in the Demo project. Am I doing something different? Any help would be appreciated.

I didn't find a way to change the underline height.

Is there a way to highlight specific segment when viewDidLoad? Like a default segment is highlighted or just the first one.

Thank you so much sir!

i read the code for the source code

underlineView!.backgroundColor = tintColor

so i set tintcolor to change the underline color

segmentedControl.tintColor = UIColor.red

,but nothing change.
how can i change the underline color

thanks

I just recently update the pod from pod 1.3.0 to 1.4.0

here is the code I use to set up the segmented control

import ScrollableSegmentedControl

@IBOutlet weak var segmentedController: ScrollableSegmentedControl!

       segmentedController.segmentStyle = .textOnly
        
        segmentedController.insertSegment(withTitle: "asasasa", at: 0)
        segmentedController.insertSegment(withTitle: "Semua", at: 0)
        segmentedController.insertSegment(withTitle: "Kopi", at: 1)
        segmentedController.insertSegment(withTitle: "Air Dalam Kemasan", at: 2)
        segmentedController.insertSegment(withTitle: "Makanan Instan", at: 3)
        segmentedController.insertSegment(withTitle: "Susu", at: 4)
        segmentedController.insertSegment(withTitle: "Sabun Cuci Piring", at: 5)
        segmentedController.insertSegment(withTitle: "Bumbu Dapur", at: 6)
        
        segmentedController.underlineSelected = true
        
        segmentedController.addTarget(self, action: #selector(HomeVC.segmentSelected(sender:)), for: .valueChanged)
        
        // change some colors
        segmentedController.segmentContentColor = UIColor.darkGray
        segmentedController.selectedSegmentContentColor = UIColor.darkGray
        segmentedController.backgroundColor = UIColor.white
        segmentedController.tintColor = UIColor.black // underline color
        
        // default position
        segmentedController.selectedSegmentIndex = 0
        
        segmentedController.fixedSegmentWidth = false

but I dont know why the app crash in line: segmentedController.insertSegment(withTitle: "asasasa", at: 0)

with error message: Thread 1: Fatal error: Index out of range

it worked without problem in 1.3.0, but since I update in 1.4.0 it makes crash.

I use Xcode 10, Swift 4.2

Should have swipe gesture to select segments

I have added multiple items in the segment. But when I try to scroll to the selected item, it's not happening.

Actually, It is selecting the item but not scrolling to the same item. I have to do it manually which is incorrect.

Please guide me, Thanks

Let's say I've to setup 5 segments but 5th should be only enable on certain validations, how can I achieve that?

hi,

I would like to change segment underline width example for 30px width for underline
kindly do needfully.
thanking you

Hi, I have an issue which my app crashes when I try to scroll the segment controller.
Hope to hear from you

Any chance you can update this to swift 4?

The following error is coming help me to fix this.
error: IB Designables: Failed to render and update auto layout status for CategoriesMenuProductViewController (2nh-L2-V5S): dlopen(ScrollableSegmentedControl.framework, 1): no suitable image found. Did find: ScrollableSegmentedControl.framework: required code signature missing for 'ScrollableSegmentedControl.framework'

the segment scroll to the left beginning when select an item , better to let this as config to noScroll , Center , or left alignment

Hello, i have project in swift 3.3 i am using pod in swift files while making IPA it gives error .If any compatible version for swift 3.3 is available?

dear : GocePetrovski
I have used your pod in my app but there is error shows to me and I can't solve it , I hope you could help me about it , error in this picture , I hope you can help me.

Is there a way to swipe between segments?

It would be good if there was a setTitle atIndex func, since now you have to remove an existing segment to update it.