Question 130459 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Changing the spacing of the underline of a UIButton

How can I change the spacing between a UIButton and its underline? And also try to make the underline bolder. Any help is appreciated.

My UIButton:
enter image description here

The ideal UIButton:
enter image description here

Tags:

2

Answers


  1. 0

    To get such a button, you can split it int 2 elements – the text (not underlined) and a rectangle (as the line).

    SwiftUI

    In SwiftUI you can achieve your desired design with a Stack within the button with a text and a rectangle in it

    Button(action: {
    self.anyFancyFunction()
}) {
    VStack(){
        Text("Button")
        Rectangle().frame(height: 5)
    }
    .foregroundColor(.black)
}

    And it would look like:

    Button with bar underneath

    In this example you can adjust the spacing by adding a (positive or negative) offset. You can add a corner radius to the bar and ich you wanted to have it rounded on the edges, you also can use Capsule() instead of Rectangle()

    UPDATE:

    UIKit

    Regarding UIKit, I think a possible solution could be to create a view with 2 subviews (1. text, 2. bar underneath the text) and then you put a clear button with the same size over it on the same position.

    I’ll try to add an UIKit example in the afternoon.

    Best,
    Sebastian

    Login or Signup to reply.
  2. 0

    In SwiftUI, there is a View called Rectangle that is perfectly matched for this. You can add it below any view by embedding them into a simple VStack.
    Here is the code:

    import SwiftUI

struct ContentView: View {
    var body: some View {
       
        Button(action: {
        }) {
            VStack(spacing: 15){
                Text("帖子")
                    .font(.system(size: 30))
                Rectangle()
            }
            .frame(width: 70, height: 60, alignment: .center)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

    Here is the result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search