iOS開発:UIAlertControllerにチェックボックスを付ける[Objective-C]
昔のプログラムを久々に開くと、UIAlertで警告がたくさん出ます。
どうやら、「非推奨部品になったから変更して!」という事のよう。
UIAlertViewからUIAlertControllerという部品に変更になります。
view部品からコントローラーになるので、それなりに改造が必要ですが
単純なリプレースは巷に情報が溢れていますので割愛します。
今回の記事はUIAlertControllerにチェックボックスを付けるカスタマイズをすると嬉しいな、
という状況があり実現に試行錯誤した備忘録です。
準備
アラート表示を必要とするViewControllerのヘッダファイルに以下を定義
(プロパティで持つ必要ない場合はコード中で宣言)
1 2 3 |
@property (nonatomic) UIAlertController *alertController; //アラートコントローラー本体 @property (nonatomic) UIButton *btn1; //ボタン @property (nonatomic) UILabel *chkLbl; //ラベル |
これらの部品を使ってこんなのを作ってみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
self.alertController = [UIAlertController alertControllerWithTitle:@"確認" message:@"このスケジュールを削除しますか?" preferredStyle:UIAlertControllerStyleAlert]; // addActionした順に左から右にボタンが配置されます [self.alertController addAction:[UIAlertAction actionWithTitle:@"削除する" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) { // otherボタンが押された時の処理 [self ListYesPushed]; }]]; // addActionした順に左から右にボタンが配置されます [self.alertController addAction:[UIAlertAction actionWithTitle:@"キャンセル" style:UIAlertActionStyleDefault handler:nil]]; //アラートを表示する [self.view.window.rootViewController presentViewController:self.alertController animated:YES completion:^{ NSLog(@"displayed"); self.btn1 = [[UIButton alloc] init]; //擬似チェックボックス部品 ボタン部分 self.chkLbl = [[UILabel alloc] init]; //擬似チェックボックス部品 チェック状態表示ラベル //チェックボックス表示位置指定 CGRect rect = CGRectMake(80, 64.0, 20, 20); //付帯メッセージラベル表示位置指定 CGRect rect_lbl = CGRectMake(100, 66.0, self.alertController.view.frame.size.width - 2 * 2.0 , 15.0); //チェックボックス部品に表示位置を定義 self.btn1.frame = rect; self.chkLbl.frame = rect; //チェックボックス動作をさせるためのボタンにアクションを定義 [self.btn1 addTarget:self action:@selector(multiDeleteFlgChg:) forControlEvents:UIControlEventTouchDown]; //付帯メッセージラベルを生成 UILabel *lb = [[UILabel alloc] initWithFrame:rect_lbl]; lb.text = @"同一期間分を含む"; //チェックボックスのラベル部品 アラートのデフォルトメッセージにサイズを合わせてみる [lb setFont:[UIFont systemFontOfSize:12.0]] ; [self.chkLbl setFont:[UIFont systemFontOfSize:12.0]] ; //チェック状態を表すテキストコードを代入 self.chkLbl.text = @"\u2B1C";//OFF //アラートウィンドウに色付ける場合はこうしたら良いみたい //self.alertController.view.backgroundColor=[UIColor yellowColor]; //縦の長さをちょこっと伸ばす(最後の+30) [self.alertController.view addConstraint:[NSLayoutConstraint constraintWithItem:self.alertController.view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:CGRectGetHeight(self.alertController.view.frame) + 30]]; //チェックボックス部品、ラベル、ボタンをコントローラーに貼り付け [self.alertController.view addSubview:lb]; [self.alertController.view addSubview:self.chkLbl]; [self.alertController.view addSubview:self.btn1]; }]; |
最後の貼り付けは順序が大切です。
チェックボックスはチェックボックス風のテキストコードを貼り付けて実現しています。
addsubviewする順序はラベルを先に宣言し、ボタンを宣言します。
こうする事で、同じサイズのラベルとボタンが重なって定義され、
また透明のボタンの下にチェックボックス風の表示内容が透けて見える事になります。
蛇足的ですが、ボタンのアクションに定義した multiDeleteFlgChg メソッドを定義します。
1 2 3 4 5 6 7 8 9 10 11 |
//ダイアログの中のチェックボックス(ボタン)制御 -(void)multiDeleteFlgChg:(UIButton*)button{ if([self.chkLbl.text isEqualToString:@"\u2705"]){ //ONのとき self.chkLbl.text = @"\u2B1C";//OFF }else{ self.chkLbl.text = @"\u2705";//ON } } |
発生したイベントの中で、現在のラベルを確認して反転しているだけです。
作ったのは以上です。
実際に、アラートのボタン(本例では「削除する」ボタン)のイベントの中で、
ボタン反転処理と同じように、ラベルの内容を判断してあげればチェック状態を意識した処理が作れると思います。
課題は・・・・コントローラーならデザイン触れるんじゃないの?と思い縦幅だけ触ってみましたが
よく見るとボタンの罫線が付いてきて居ませんので、完成させるにはもう少し調査しなくてはいけませんね。