• 2024/10/28
• 3分

【Swift UI】ボタンのUIがアクセシビリティの設定で崩れた場合の対処法

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：16.0
• iOS：18.0
• Swift：5.9
• macOS：Sonoma 14.6.1

ボタンのUIがアクセシビリティの設定で崩れてしまう

Swift UIでButtonを実装している際にiPhoneの設定から「ボタンの形」というアクセシビリティの設定をONにされている場合にUIが崩れてしまう現象が発生しました。

「アクセシビリティ」＞「画面表示とテキストサイズ」＞「ボタンの形」

「ボタンの形」という設定はボタンUIのタップ領域を可視化するためのアクセシビリティ設定のようで、UIがボタンの実際のタップ領域を含めたサイズでUI表示するように変更になります。これによりSwift UI限定でボタンUIのサイズが勝手に変更されてしまうようです。

上記の2番目のように200pxを超えた領域がグレーになったり、3番目のように200px以上の領域がボタンになったりする。

Button {
    
} label: {
    Text("Button1")
}.frame(width: 200)
    .background(Color.cyan)

Button {
    
} label: {
    Text("Button2")
        .frame(width: 200)
}.frame(width: 200)
    .background(Color.cyan)


Button {
    
} label: {
    Text("Button3")
        .frame(width: 200)
}.background(Color.cyan)

解決法

frameで指定したサイズのままになるように実装するためには.buttonStyle(.plain)を指定してあげれば解消します。デフォルトでは.automaticが指定されておりその場合にアクセシビリティの設定によってUIが変更されてしまうようです。

Button {
    print("2")
} label: {
    Text("Button2")
        .frame(width: 200)
}.frame(width: 200)
    .background(Color.cyan)
    .buttonStyle(.plain)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。