I want it to be displayed so that the Button title on the storyboard is aligned to the right.

Asked 2 years ago, Updated 2 years ago, 391 views

This is my first time to ask a question after I just started programming, so please forgive me if there is anything that doesn't work out.

Using the Xcode storyboard, I'm trying to create an arrangement with four buttons arranged vertically.
I filled the title of the button to the left so that the right end of the title (the red circle on the first picture) is aligned with the right end of the title of the other button, but it didn't fit very well.
Please let me know if there is a way to get this right on any model.

The button settings are as shown in the second picture.
In addition to this, I use the code Button.titleLabel?.adjustsFontSizeToFitWidth=true to display it as large as possible.

I tried to arrange it by changing the size of the half-width space, but only one model would be available, but not the other.

display examples:

Image 1

button settings:

Image 2

swift xcode storyboard

2022-09-30 21:55

1 Answers

First, I would like to point out that controls responding to user taps are not necessarily limited to buttons (UIButton).I have to write a little complicated code, but if I were to create an interface that the questioner wanted to create, I would consider using a table (UITableView) and each cell would consist of a left-packed text label ("arrow", "two U-magnets", etc.) and a right-packed label ("1500", "100000", etc.).

Second, if you intend to use a half-width space so that the right end of the title (the red circle part of the first image) aligns with the right end of the title of the other button, you should use an equal width font."Equivalent width" means that the width of the body of each character is equal.There are two types of spaces, full-width characters, such as kanji and kana, and half-width characters, such as alphanumeric characters, but full-width characters are twice the size of half-width characters, so you can adjust the length of each line.

import UIKit

classViewController:UIViewController {

    @IBOutlet weak var button 1: UIButton!
    @IBOutlet weak var button 2: UIButton!
    
    
    override func viewDidLoad(){
        super.viewDidLoad()
        
        button1.titleLabel?.font=UIFont.monospacedSystemFont (ofSize:17, weight:.regular)
        button2.titleLabel?.font=UIFont.monospacedSystemFont (ofSize:17, weight:.regular)
    }
}

In UIKit, use class func monospacedSystemFont(ofSize fontSize:CGFloat, weight:UIFont.Weight) ->UIFont to specify equal width fonts.

使用 Without:
Enter a description of the image here
使用 When used:
Enter a description of the image here

Third, I don't understand why the questioner designates MSP Gothic fonts that are not installed on macOS or iOS as standard on the Storyboard."P" in "MSP Gothic" means "propotic", and not only alphanumeric characters, but also hiragana and katakana are fonts with different widths depending on the characters.As you can see from the image presented by the questioner, the width is different between the three kanji characters of peanuts and the three kana characters of apples, right?
You should not use fonts that are not equal in width when you use space to align line lengths.
In addition, fonts that are not installed normally on iOS will be replaced by other fonts on devices that are not installed (iPhone).That's why the result is, "If only one model is available, it will be available, but the other model is not available."
In principle, only system-standard fonts should be used unless fonts are included in the app.


2022-09-30 21:55

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.