しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

トップ > iOS > SCLAlertViewでアラート表示をおしゃれにする

SCLAlertViewでアラート表示をおしゃれにする

iOS

SCLAlertViewというライブラリを試してみました。

github.com

f:id:llcc:20170906122643p:plain

まずはCocoaPodsでインストールします。

target 'MyApp' do
  use_frameworks!

  pod 'SCLAlertView-Objective-C'
end

使い方は下の通りです。
showInfoメソッドで、Infoマーク付きのポップアップを5秒間表示できます。

import UIKit
import SCLAlertView_Objective_C

class ViewController: UIViewController {
    override func viewDidAppear(_ animated: Bool) {
        SCLAlertView().showInfo(
            self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 5.0)
    }
}

f:id:llcc:20170906125336p:plain

自動でポップアップを閉じたくない場合は、durationに0をセットします。

SCLAlertView().showInfo(self, title: "タイトル\n2行目", subTitle: "サブタイトル\n2行目", closeButtonTitle: "閉じる", duration: 0)

サブタイトルは複数行にも対応しています。

SCLAlertView().showInfo(self, title: "タイトル\n2行目", subTitle: "サブタイトル\n2行目\n3行目\n4行目\n5行目\n6行目\n7行目\n8行目\n9行目\n10行目", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906125607p:plain

Info以外にも、下のようなポップアップに対応しています。

SCLAlertView().showEdit(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906125907p:plain

SCLAlertView().showError(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906125932p:plain

SCLAlertView().showNotice(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906130004p:plain

SCLAlertView().showSuccess(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906130050p:plain

SCLAlertView().showWaiting(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906130125p:plain

SCLAlertView().showQuestion(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906130147p:plain

ボタンやアイコンの色はcustomViewColorで変更する事ができます。

let alert = SCLAlertView()
alert.customViewColor = UIColor.darkGray
alert.showQuestion(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906130839p:plain

テキストフィールドの追加も可能です。

let alert = SCLAlertView()
let textField = alert.addTextField("Text")
alert.showQuestion(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906131044p:plain

ボタンを追加でセットする事も可能です。

let alert = SCLAlertView()
alert.addButton("ボタン1", actionBlock: {})
alert.addButton("ボタン2", actionBlock: {})
alert.showQuestion(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906131153p:plain

ボタンの文字サイズを変更する事もできます。

let alert = SCLAlertView()
let button = alert.addButton("ボタン1", actionBlock: {})
button?.titleLabel?.font = UIFont.systemFont(ofSize: 10)
alert.showQuestion(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906131302p:plain

他にも背景を変えたりと様々なカスタマイズができます。

let alert = SCLAlertView()
alert.backgroundType = .blur
alert.showQuestion(self, title: "タイトル", subTitle: "サブタイトル", closeButtonTitle: "閉じる", duration: 0)

f:id:llcc:20170906131514p:plain

Swift版もあるので、良かったら併せてご参照下さい。

github.com