Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transform specific segment in segmented control

Is there a way to transform the content of a specific segment contained in segmented control? (I have to rotate it by 180deg)

Not the image contained in it, because in my case there isn't one (I have used FontAwesome)

Demonstration:

from: original to: rotated

like image 290
Dorad Avatar asked Jul 06 '17 05:07

Dorad


People also ask

How do you change view controllers using segmented control?

To switch between the child view controllers, we use a segmented control. Open the Object Library on the right and add a segmented control to the navigation bar of the master view controller. Open MasterViewController. swift and create an outlet for the segmented control.

When would you use segmented control?

Use segmented controls to view similar content in different ways and the changes should take effect immediately when a segmented control option is selected. They should never require a user to click a button to apply the settings. Don't use a segmented control for action, such as add and remove.

How do you change the segment control color?

To change the color/font of the selected segment titles, use setTitleTextAttributes with a state of . selected / UIControlStateSelected . If you create a segmented control with images, if the images are created as template images, then the segmented control's tintColor will be used to color the images.

How do you hide a segment in Swift?

You can't hide it but you can make its width very very small which will make it invisible for the user. It has to be > 0 because 0 = automatic width. [yourSegmentedControl setWidth:0.1 forSegmentAtIndex:1]; To be in the safe side, also disable it to reduce the chance of selection to zero.


Video Answer


2 Answers

Yes there is!

Consider that we have a segmented control contains 3 segments:

enter image description here

Actually, it is a view which contains 3 subviews, typed as UISegment. If we try to print this segmented control subviews (Assuming that we connected it to the desired view controller as segmentedControl IBOutlet):

class ViewController: UIViewController {
    // MARK:- IBOutlets
    @IBOutlet weak var segmentedControl: UISegmentedControl!

    override func viewDidLoad() {
        super.viewDidLoad()

        for view in segmentedControl.subviews {
            print(view)
        }
    }
}

The log should display something similar to:

UISegment: 0x7febebc06980; frame = (229 0; 114 29); layer = CALayer: 0x60000002edc0 UISegment: 0x7febebe140c0; frame = (114 0; 114 29); layer = CALayer: 0x618000231800 UISegment: 0x7febebe14d30; frame = (0 0; 113 29); layer = CALayer: 0x6180002319c0

So, you can access the segments in the segmented control as a UISegment, thus apply needed edit to it as a UIView. For instance, if you want to rotate the second segment, you could implement:

override func viewDidLoad() {
    super.viewDidLoad()

    for view in segmentedControl.subviews[1].subviews {
        print(view)
        view.transform = CGAffineTransform(scaleX: -1, y: 1)
    }
}

As you can see, the segment also has subviews:

UISegmentLabel: 0x7f8b51701770; frame = (0 0; 64 22.5); text = 'Second'; opaque = NO; userInteractionEnabled = NO; layer = _UILabelLayer: 0x610000091530

UIImageView: 0x7f8b51701470; frame = (114 0; 1 1); alpha = 0; opaque = NO; autoresize = LM; userInteractionEnabled = NO; tag = -1030; layer = CALayer: 0x610000031480

So, you should rotate all of these subviews, as implemented in above the code snippet.

The output would be:

enter image description here


The same approach should be applicable with segmented controls that have images instead of titles:

Before rotating:

enter image description here

After rotating:

enter image description here

like image 110
Ahmad F Avatar answered Oct 17 '22 17:10

Ahmad F


A segment is a small UIView, you can just apply a transformation to it.

Refer to this question about getting the subview:

UISegmentedControl selected segment color

And refer to this other one to "rotate" the content.

How to rotate UIView using transform

Then again, i'd just be easier to make an image out of it and use that instead.

like image 29
Pochi Avatar answered Oct 17 '22 17:10

Pochi