カテゴリー: iOS

iOSアプリのチュートリアルに便利なMMPopLabel

1 はじめに
2 準備
3 実装
4 さいごに

はじめに

こんにちは、nukkyです。
今回はチュートリアル等、ユーザーへの
画面説明に便利なMMPopLabelを紹介したいと思います

このライブラリはObjective-Cで書かれていますが、
この記事ではSwift3での使いかたを書いていきます

準備

インストールにはCocoaPodsを使用しますのでPodfileに以下を記載してください

pod 'MMPopLabel'

そうしたらターミナルから以下のコマンドを実行してください。

pod install

それと、MMPopLabelはObjective-Cで書かれているので
Bridging-Header.hに以下のimport文を記載してください

#import <MMPopLabel/MMPopLabel.h>

実装

Storyboard

MMPopLabelの表示がわかりやすいように今回は図のようなViewを作成しました

３つボタンを用意しているのでIBOutletで接続します

@IBOutlet weak var helpButton: UIButton!
@IBOutlet weak var centerButton: UIButton!
@IBOutlet weak var menuButton: UIButton!

MMPopLabelの準備

まずはMMPopLabelをimportしてください
準備の項目でも記載しましたがMMPopLabelは
Objective-Cで書かれているのでBridging-Header.hに
importされていないとエラーになります

import MMPopLabel

ViewControllerにDelegateを設定しMMPopLabelを用意します

class MMPopLabelTest: UIViewController, MMPopLabelDelegate {
    var label: MMPopLabel!

MMPopLabelの外観を設定します

// ポップアップの背景色
MMPopLabel.appearance().labelColor = UIColor.blue
// ポップアップの文字色
MMPopLabel.appearance().labelTextColor = UIColor.white
// ポップアップの文字ハイライト時の色
MMPopLabel.appearance().labelTextHighlightColor = UIColor.green
// ポップアップの文字フォント
MMPopLabel.appearance().labelFont = UIFont(name: "HelveticaNeue-Light", size: 12)
// ポップアップのボタンの文字フォント
MMPopLabel.appearance().buttonFont = UIFont(name: "HelveticaNeue", size: 12)

MMPopLabelをNewしDelegateを設定します

label = MMPopLabel(text: "チュートリアルメッセージ")
label.delegate = self

ポップアップ内のボタンを設定します
今回はskipとokの二つのボタンをaddします

let skipButton = UIButton(frame: CGRect.zero)
skipButton.setTitle(NSLocalizedString("Skip Tutorial", comment: "Skip Tutorial Button"), for: .normal)
label.add(skipButton)

let okButton = UIButton(frame: CGRect.zero)
okButton.setTitle(NSLocalizedString("OK, Got It!", comment: "Dismiss Button"), for: .normal)
label.add(okButton)

最後にMMPopLabelをaddSubviewします

view.addSubview(label)

MMPopLabelの表示

MMPopLabelは以下のメソッドで画面に表示されます
まずはhelpButtonに対して表示させてみたいと思います

label.pop(at: helpButton)

そうすると、このように表示されます

この際、表示位置はMMPopLabelが自動で判断してくれます
ですので、他のボタンにpopさせるとこのようになります

基本的にポップアップ内のボタンを押下すれば表示は消えるのですが
コードで任意にポップアップを消したいときは以下です

label.dismiss()

Delegate

MMPopLabelはDelegateでポップアップ内のボタン押下と
ポップアップがdismissした時が取得できます

// MMPopLabelのボタン押下時に呼ばれる
func didPressButton(for popLabel: MMPopLabel!, at index: Int) {
    print("Push Index = ",index)
}
    
// MMPopLabelが非表示になった時に呼ばれる
func dismissedPopLabel(_ popLabel: MMPopLabel!) {
    print("dismissedPopLabel")
}