North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
TECH

【iOS】ダイアログに画像をつけてみよう!

※本記事は、NorthDetail Advent Calendar 2020の一環として投稿しています

こんにちは、kobushimeです。
実は本日kobushime生誕ウン十年祭なのでw、記念にアドベントカレンダーに初挑戦します!!
普段はWEB系システム開発に携わっているのですが、今回、何を書いたらいいのかなー、、、と考えた末、ちょっとしたきっかけで作る事になったiOSアプリのダイアログについて書いてみる事しました。

アプリを作るきっかけ

まずはiOSアプリを作るきっかけについて。
大手ゲーム会社N社の某有名TPSゲーム内のミニゲームにはまっておりまして。(そのミニゲームは「バイト(アルバイト)」、プレイヤーは「バイター(アルバイター)」と呼ばれていますw)
このバイト(ミニゲーム)、なかなかに作りこまれていてやりごたえ満点なのですが、例にもれずランクが上がっていくとクリアが難しくなってきます。
バイトクリア支援のために有志の方が作成されたandroidのアプリがあり、iPhoneユーザの自分が使いたくて、androidアプリ開発者の方と連携してiPhone版を作ってみる事にしたのが、iOSアプリ作成のきっかけです。
かなり前にObjective-Cでちょっと触ってみた事はあるのですが、Swiftは使った事がなかったので勉強がてら丁度よさそうだったこともあり、久々に趣味の開発作業にいそしむ事となりました。

ダイアログを表示してみよう

原則、元になるandroidアプリを踏襲してトレースする形でアプリの作成を行っていたのですが、折角なので操作に問題がある場合は注意喚起のアラートダイアログを出してみる事に。

通常のアラートダイアログ

// アラートコントローラ生成
let alert: UIAlertController = UIAlertController(title: "アラートのタイトル", message:"アラートの本文", preferredStyle:  UIAlertController.Style.alert)
// OKボタン 
let defaultAction: UIAlertAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler:{
    // ボタンが押された時の処理
      (action: UIAlertAction!) -> Void in
      // 何かしらの処理を記載
})
// UIAlertControllerにActionを追加
alert.addAction(defaultAction)
// Alert表示
present(alert, animated: true, completion: nil)

タイトルと本文、OKボタンが一つの通常のアラートダイアログはこんな感じです。



よく見るダイアログで、何とも味気がありません。

ダイアログに画像をつけてみよう

折角オリジナル要素を出すのなら、もう少し何とかできないかなぁ・・・?と考えてみる。
そうだ、絵とかあったら良いんじゃない??(単純)

どうせならちょっと可愛くしてみたい!
画像つきのアラートダイアログ

画像つけるなら絶対この画像!!

諸事情により目隠ししていますがw、我らバイターの雇用主様です。
・・・って事で、絵をのせられないか考えてみた結果、こんな感じに。

// アラートコントローラ生成
let alert: UIAlertController = UIAlertController(title: "アラートのタイトル", message:"アラートの本文", preferredStyle:  UIAlertController.Style.alert)
// OKボタン 
let defaultAction: UIAlertAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default, handler:{
    // ボタンが押された時の処理
      (action: UIAlertAction!) -> Void in
      // 何かしらの処理を記載            
})
// UIAlertControllerにActionを追加
alert.addAction(defaultAction)

// 〇〇サン画像を追加
// imageViewをUIAlertControllerのviewのsubViewに追加できる!!
// 画像の位置は位置を確認しつつ、いい感じの配置で。
let imageView = UIImageView(frame: CGRect(x:5, y:-75, width:100, height:100))
// 画像を指定(画像はルートディレクトリ直下に入れました)
imageView.image = UIImage(named: "6859_100.png")
alert.view.addSubview(imageView)
// Alert表示
present(alert, animated: true, completion: nil)


わーい、ダイアログに絵がのっかった!!
正直、標準のアラートダイアログってどーにもできないかなぁ、と思っていたので、こんな単純に画像がのせられるとは思ってませんでした。
小ネタですが、ちょっと可愛くオリジナリティをアピールしたい時には簡単に出来ちゃいますよ!!

kobushime
WRITER:kobushime
組み込み出身エンジニア。
現在はほぼWEB系開発に携わっています。
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001