Put your feet on the ground

主にプログラミングのお話。

UIAlertControllerのボタンの太字を制御したいお話【Objective-C】

UIAlertControllerを使って、ダイアログを使う事はままあると思います。

たとえば右にOK、左にキャンセルのボタンを設置したダイアログを作るとする。
ここではiOS9系の前提でまずは話を進めます。

 

f:id:karmactonics:20160803204113p:plain

この時のコードはこう。


- (IBAction)showAlert:(id)sender {
    UIAlertController *ac = [UIAlertController alertControllerWithTitle:@"title"
                                                                message:@"ほげ人28号"
                                                         preferredStyle:UIAlertControllerStyleAlert];
    
    UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK"
                                                 style:UIAlertActionStyleDefault
                                               handler:^(UIAlertAction *action) {}];
    [ac addAction:ok];
    
    UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"キャンセル"
                                                 style:UIAlertActionStyleCancel
                                               handler:^(UIAlertAction *action) {}];
    
    [ac addAction:cancel];
    
    [self presentViewController:ac
                       animated:YES
                     completion:^{}];
    
}
        

 

ここで一つ気になった事がある。
キャンセルボタンのstyleをUIAlertActionStyleCancelにすると、画像のようにキャンセルボタンが太字になる。

ユーザーが好ましくない操作をした時のダイアログならば適しているだろうが、なるべくOKを押してほしい場合には、OKの方を太字にしたいと思うだろう。

では、styleを逆にすれば、太字になってくれるだろうか。


UIAlertAction *ok = [UIAlertAction actionWithTitle:@"OK"
                                             style:UIAlertActionStyleCancel
                                           handler:^(UIAlertAction *action) {}];
[ac addAction:ok];
    
UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"キャンセル"
                                             style:UIAlertActionStyleDefault
                                           handler:^(UIAlertAction *action) {}];
[ac addAction:cancel];
        

としてみる。すると、

f:id:karmactonics:20160803213501p:plain

このように、Cancelに設定したボタンは自動的に左に配置されてしまう。

iOSのUIデザインとしては、「左に破壊要素」「右に非破壊要素」という規則に則るのが基本になっているので、あまり好ましくないように思う。iOSヒューマンインターフェースガイドラインにも書かれている。

これに限らず、ガイドラインにはUI設計の上で大切なことがたくさん書かれているので、読んだことのない人は読んでおこう。

iOSヒューマンインターフェイスガイドライン: 一時ビュー

 

では、どうすれば良いか。

実は、iOS9からUIAlertControllerにreferredActionというプロパティが追加されていた。このプロパティに、太字にしたいUIActionを設定すればよいということがわかった。Class Referenceにもしっかりと書いてあった。

UIAlertController Class Reference


ac.preferredAction = ok;
        

この一文を、太字にしたいUIActionをaddActionした後に書いておく。すると

f:id:karmactonics:20160803215054p:plain

というように、無事右側のボタンを太字にすることができた。

 

ちなみに、このUIAlertActionStyleCancelに指定すると強制的に左に配置されるのは、iOS8.3以降からの現象のようです。

qiita.com

また、iOS8については前述のpreferredActionプロパティが使えませんので、OKボタンを太字にすることはできないと思います。代わりに、両方ともUIAlertActionStyleDefaultに指定することで、両方とも通常の太さにすることであれば可能です。

(もし、iOS8系でも右のUIActionだけを太字にできる方法をご存知の方がいたら、コメント欄などでお知らせいただけると幸いです。

 

以上、備忘録でした。