11
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UIAlertControllerの左端にImageを表示させる方法(UIAlertControllerカスタマイズ)

Last updated at Posted at 2017-12-17

#Qiitaに記事を初投稿
見ている皆さんにはあまり関係ないと思いますが、Qiitaに初めて記事を書くのでそのことについて少し触れようと思います。
Qiitaに記事を投稿する意味として、自分は4つ意味を持っています。
1つ目として、自分の頭の整理ができ、他人にも詳細に説明できるようになると思っている点。
2つ目として、自分が過去を振り返った時にやってきたことを思い出し、自信に繋がると思っている点。
3つ目として、後々やってきたことを忘れてしまうことがあると思うので、その時に簡単に思い出すことが出来る点。
4つ目として、Qiitaにて自分は大変お世話になったので、次は逆に自分が得た知見を記事として投稿して、皆さんと共有できたらなと思っている点。
初めてなのでQiitaに記事を投稿する意味について書きました。皆さんよろしくお願いします。

#開発環境
Xcode9.1, Swift4, iOS10.0
上記の開発環境で実装しました。

#完成図
UIAlertControllerで下記のようにImageを表示させることができます。
Simulator Screen Shot - iPhone 7 - 2017-12-17 at 17.44.51.png

#UIAlertControllerの左端にImageを表示させる方法
まず、画像をAssets.xcassetsに追加します。
自分の場合は、下記のようにチェックマークの画像を追加しました。

スクリーンショット 2017-12-17 17.32.34.png

次に実装です。
AlertControllerを表示させる仕組みは、皆さん既に分かっていると思います。
AlertControllerにImageを表示させる仕組みは、下記のプログラムのselectAlertController関数が行なっています。そこの関数部分を見てもらえたら、仕組みが分かると思います。

ViewController.swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    
    var selectNumber:Int = 0 //タップしたalertControllerの位置を記録する変数
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func tapButton(_ sender: UIButton) {
        let alert: UIAlertController = UIAlertController(title: "並び順変更", message: "選択してください", preferredStyle:  UIAlertControllerStyle.actionSheet)
        
        var defaultAction: UIAlertAction = UIAlertAction(title: "登録順", style: .default, handler:{
            (action: UIAlertAction!) -> Void in
            self.selectNumber = 0
            self.label.text = "登録順"
            
        })
        var defaultAction1: UIAlertAction = UIAlertAction(title: "タイトル順", style: .default, handler:{
            (action: UIAlertAction!) -> Void in
            self.selectNumber = 1
            self.label.text = "タイトル順"

        })
        var defaultAction2: UIAlertAction = UIAlertAction(title: "著者順", style: .default, handler:{
            (action: UIAlertAction!) -> Void in
            self.selectNumber = 2
            self.label.text = "著者順"

        })
        let cancelAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: .cancel, handler: nil)
        
        if(selectNumber == 0){
            defaultAction = selectAlertController(action: defaultAction)
        }else if(selectNumber == 1){
            defaultAction1 = selectAlertController(action: defaultAction1)
        }else{
            defaultAction2 = selectAlertController(action: defaultAction2)
        }
        
        alert.addAction(defaultAction)
        alert.addAction(defaultAction1)
        alert.addAction(defaultAction2)
        alert.addAction(cancelAction)
        //下記のtintColorをいじるとalertControllerのボタン部分が全て色変更される。
//        alert.view.tintColor = UIColor.blue
        present(alert, animated: true, completion: nil)
    }
    
    //選択されているAlertActionの色を変える関数
    func selectAlertController(action: UIAlertAction) -> UIAlertAction {
        action.setValue(UIImage(named: "todo.png"), forKey: "image")//左にImageを挿入
        action.setValue(UIColor.orange, forKey: "imageTintColor")//Imageの色を変更
        action.setValue(UIColor.orange, forKey: "titleTextColor")//Textの色を変更
        
        return action
    }
}

UIAlertActionの.setValueを設定することにより、Imageを追加したり、色を変更したりすることが出来ます。

###UIAlertControllerのボタン全体の色変更
alert.view.tintColorに色を設定することにより、UIAlertControllerのボタン全体の色変更をすることが出来ます。下記の場合は、全体を青に変更しています。

Simulator Screen Shot - iPhone 7 - 2017-12-17 at 17.44.29.png

#疑問点
UIAlertActionの.setValueのforKeyで設定できるプロパティには何があるのか気になりました。
"image","imageTintColor","titleTextColor"以外にも設定できるプロパティがありましたら、
教えて欲しいです。

#引用元、参考URL
iOS UIAlertController Customization

11
16
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?