0

プログラミングを始めたばかりで質問させて頂くのも初めてなので、質問の仕方などに至らぬ点がありましたらご容赦下さい。

Xcodeのstoryboardを使ってボタンを縦に4つ並べたような配置を作ろうとしています。
ボタンのタイトルを左詰にしてタイトルの右端(画像1枚目の赤丸の部分)が他のボタンのタイトルの右端と揃うように半角スペースを入れたのですが微妙に揃いませんでした。
これをどの機種でもキッチリ揃えられる方法があればご教示頂きたいです。

ボタンの設定は画像2枚目の通りです。
これに加えて、できるだけ大きな文字で表示させたいので Button.titleLabel?.adjustsFontSizeToFitWidth = true のコードを使っています。

半角スペースのサイズを変えることで揃えようとしましたが、1つの機種のみであれば揃うのですが、それ以外の機種では揃いませんでした。

表示例:

画像1

ボタンの設定:

画像2

1 件の回答 1

1

第一に、ユーザのタップに応答するコントロールは、必ずしもボタン(UIButton)に限らないという点を、指摘しておきたいと思います。少々複雑なコードを書かなければいけませんが、質問者さんが作りたいインターフェイスを、私が作るとすれば、テーブル(UITableView)を使い、各セルを、左詰めのテキストラベル(「矢印」、「U字磁石2個」等)と右詰めのラベル(「1500」、「100000」等)で構成することを考えます。


第二に、「ボタンのタイトルを左詰にしてタイトルの右端(画像1枚目の赤丸の部分)が他のボタンのタイトルの右端と揃うように半角スペースを入れ」ということを意図するなら、等幅のフォントを使用するべきです。「等幅」というのは、各文字のボディの横幅が等しいという意味です。等しいといっても、漢字、かななどの「全角」の文字と、英数字などの「半角」の文字があり、スペースは全角、半角の2種類がありますが、全角文字は半角文字の倍のサイズとなっているので、調節すれば、各行長を揃えることができます。

import UIKit

class ViewController: UIViewController {

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

UIKitで、等幅フォントを指定するには、class func monospacedSystemFont(ofSize fontSize: CGFloat, weight: UIFont.Weight) -> UIFontを使います。

◉使用しない場合:
画像の説明をここに入力
◉使用した場合:
画像の説明をここに入力


第三に、質問者さんが、macOSにもiOSにも標準インストールされないフォント、MS P ゴシック体を、Storyboardで指定している意図が理解できません。「MS P ゴシック体」の「P」は、プロポーショナル(Propotional)を意味し、英数字のみならず、ひらがな、カタカナまでも、文字によって、ボディの横幅が異なるフォントです。質問者さんご提示の画像からも見てとれるように、漢字3文字の「落花生」と、かな3文字の「りんご」で、幅が異なりますね?
スペースによって、行長を揃えるという操作をする場合、等幅でないフォントは使うべきでありません。
さらに、iOSに標準インストールされないフォントは、インストールされていないデバイス(iPhone)では、他のフォントによって、代用表示されることになります。それが「1つの機種のみであれば揃うのですが、それ以外の機種では揃いませんでした。」という結果をもたらす理由です。
アプリにフォントを組み込むのでなければ、システム標準のフォントのみ使用するのが、原則です。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。