iOS8.3でアラートの太字ボタンが勝手に左側に来るようになった

  • 35
    いいね
  • 3
    コメント

ホーム画面のアプリを削除する時に出てくるようなアラートを自前アプリでも以下のように実装していたのですが...

サンプル
        let alert = UIAlertController(title: "タイトル", message: "メッセージ", preferredStyle: .Alert)
        alert.addAction(UIAlertAction(title: "削除", style: .Default, handler: nil))
        alert.addAction(UIAlertAction(title: "キャンセル", style: .Cancel, handler: nil))
        presentViewController(alert, animated: true, completion: nil)

iOS8.3だとスタイルをUIAlertActionStyle.Cancelにした方が勝手に左側に来るようなのです。

app.png

じゃあホーム画面の削除する方はどうなってるのよ?という事で調べてみると...

home.png

太字のボタンが変わってる!?

ということは、iOS8.3だったら左に配置したいボタンをUIAlertActionStyle.Cancelにすれば良いんでしょうか。

        let alert = UIAlertController(title: "タイトル", message: "メッセージ", preferredStyle: .Alert)
        alert.addAction(UIAlertAction(title: "削除", style: .Cancel, handler: nil))
        alert.addAction(UIAlertAction(title: "キャンセル", style: .Default, handler: nil))
        presentViewController(alert, animated: true, completion: nil)

実行結果:
Screen Shot 2015-04-24 at 13.32.41.png

ちなみにアラートのボタンの順番についてはヒューマンインターフェースガイドラインに書かれていますが、今回のような症状について、追記や変更は見当たりませんでした。

https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/Alerts/Alerts.html#//apple_ref/doc/uid/TP40006556-CH14-SW2

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Alerts.html

ボタンを適切に配置する。タップするのが最も自然なボタンとは、一番実行したいであろうアクションを実行すること、誤ってタップしても問題が生じにくいこと、という条件を満たすもののことです。これを次のように配置します。

  • 最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。
  • 最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。

削除は破壊的だと思いますので後者の説明のように左側に置くべきかと思いますが、スタイル設定によっては意図しない順番になってしまう可能性があるという点に少し注意が必要かなと思います。

今のところあまりこの件について語っている方もいらっしゃらないようですが、もし何か経緯や事情などをご存知の方がいらっしゃいましたら、コメント頂ければ幸いです。

UIAlertActionStyle.Cancel使った太字を止めて両方UIAlertActionStyle.Defaultにするのも有りかな...)

iOS10での削除アラートの変更 (2016/09/21追記)

iOS10のホーム画面の削除アラートにまた変更が入ったようです。
スクリーンショット 2016-09-21 17.12.52.png

削除ボタンが右側に移動して、なおかつ赤字(&太字)になっています。

まだHIGを見る限りでは変更が無さそうですが、これと同じ見た目にするには、以下のようなコードを書けばよさそうです。

Swift3
        let alert = UIAlertController(title: "タイトル", message: "メッセージ", preferredStyle: .alert)
        let deleteAction = UIAlertAction(title: "削除", style: .destructive, handler: { _ in })
        let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel, handler: { _ in })
        alert.addAction(cancelAction)
        alert.addAction(deleteAction)
        alert.preferredAction = deleteAction
        present(alert, animated: true, completion: nil)

preferredActionプロパティはiOS9以上という点に注意してください。

スクリーンショット 2016-09-21 17.13.29.png

同じような見た目になりました。