Yalantis / Segmentio

Animated top/bottom segmented control written in Swift.
https://yalantis.com/
MIT License
2.52k stars 322 forks source link

is it possible to make a full highlight color for selected tab ? not using underline #130

Closed AgungLaksana closed 4 years ago

AgungLaksana commented 5 years ago

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

is it possible to achieve this using Segmentio ?

OlgaIOs commented 4 years ago

Hi. You can set clear color as a parameter in horizontalSeparatorOptions to achieve the result as in the picture. Please see the code example below:

// Here ‘segmentio’ is an entity of Segmentio class

...
    segmentio.setup(content: content,  style: .onlyLabel, options: segmentioOptions())
...

    private func segmentioOptions() -> SegmentioOptions {
        return SegmentioOptions(backgroundColor: .white,
                                horizontalSeparatorOptions: SegmentioHorizontalSeparatorOptions(
                                    type: .none,
                                    height: 1,
                                    color: .clear
                                ),
                                verticalSeparatorOptions: SegmentioVerticalSeparatorOptions(
                                    ratio: 1,
                                    color: .orange
                                ),
                                labelTextAlignment: .center,
                                segmentStates: SegmentioStates(
                                    defaultState: SegmentioState(
                                        backgroundColor: .white,
                                        titleTextColor: .orange
                                    ),
                                    selectedState: SegmentioState(
                                        backgroundColor: .orange,
                                        titleTextColor: .white),
                                    highlightedState: SegmentioState()
                                ),
                                animationDuration: 0.2)
    }
Screenshot1