Button borders in IB - possible?

I feel very stupid to ask this question but ... can one set borders for buttons just in Interface Builder (no code at all?).


I have a sample interface that I should reproduce before getting into the core of the lesson.

The tutorial shown a phone in portrait orientation, an UIImageView of square shape and four buttons beneath it, arranged in an horizontal stack view.


So far, so good, I can reproduce everything but ... every button shows a blue border (same color as the default font).

More precisely the left and right button have rounded external borders while the others are just straight lines.

My nose tells me that something has been drawn into the stackView but I cannot find it in the Inspectors.


The tutorial specifically says: use AutoLayout to obtain this interface.


What can I do?

Thanks

Answered by Claude31 in 310107022

You connect the segmented control as a whole, not individual buttons.


If you unselect "Selected" in IB (Attributes panel at the top), no one will be colored blue.

And they will look exactly as on picture in the iBook.

AFAIK (at least, that's how I would try it), you should subclass the UIButton, define an IBDesignable property to set the border width.


You'll find details on how to do here:

h ttps://spin.atomicobject.com/2017/07/18/swift-interface-builder/


PS: could you post a link to the tutorial ? And where is the button you want to mimic ?

Guess what? It is once more the Official Tutorial, App Development with Swift by Apple ... which is great, I have to say it, but sometimes it tells you to create something that it didn't explain you how to achieve. This tutorial is in chapter 4.8, System View Controllers.


I would have done the same: subclass UIButton, define the IBDesignable property etc etc ...

But by now I am content with this not being possible per se in IB.


Thanks

Got it.


These are not individual buttons, it is a segmented control, with 4 segments.


Just select in in Object library in IB, (search for segment)

I thought about doing that (as it seemed the most logical option instead of the suggested horizontal stack view) but then, in the following page, they ask you to connect each button to the ViewController with @IBActions.


Is this possible with Segmented Controls (to select single parts as if they were UIButtons?)?

Yes of course.


Create an IBAction for the segmented control, in which you test the segment:


@IBAction func testSegment(_ sender: UISegmentedControl) {
    switch sender.selectedSegmentIndex {
    case 0:
        print("First Segment Selected")
    case 1:
       print("Second Segment Selected")
    case 2:
        print("Third Segment Selected")
    case 3:
       print("Fourth Segment Selected")
    default:
        break
    }
}

Nice! And then I just connect the single functions to the single segments?


But is there a way to do what they did in the picture?

It looks like a segmented control but there is no one colored blue (i.e.: selected).

It looks like the two central buttons have straight borders while the two external ones have slightly rounded edges.


I suppose just with AutoLayout and InterfaceBuilder that is not possible.

One would have to subclass the UIButton, right?


Or is it possible to have the StackView draw borders around its content?

Accepted Answer

You connect the segmented control as a whole, not individual buttons.


If you unselect "Selected" in IB (Attributes panel at the top), no one will be colored blue.

And they will look exactly as on picture in the iBook.

Button borders in IB - possible?
 
 
Q