iOS

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

投稿日:

はじめに

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

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

準備

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

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

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

実装

Storyboard

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

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

MMPopLabelの準備

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

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

MMPopLabelの外観を設定します

MMPopLabelをNewしDelegateを設定します

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

最後にMMPopLabelをaddSubviewします

MMPopLabelの表示

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

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

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

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

 

Delegate

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

 

さいごに

MMPopLabel如何だったでしょうか、
個人的には表示位置やポップアップ自体のサイズ感を
気にせずすむ上に、簡単に表示まで持っていけるので
人気があるのも頷けますね、ただswiftでの使い方があまり紹介されていないので
こちらの記事が誰かのお役に立てば幸いです

blog-page_footer_336




blog-page_footer_336




-iOS
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

【Swift】Xcode12対応ではまったNavigationControllerの挙動変更

1 はじめに2 今回のバグ3 詳細な内容4 修正5 さいごに6 おすすめ書籍 はじめに こんにちはsuzukiです。皆さんXcode12対応はおすみでしょうか、今回も駆け込みで色々対応しております。そ ...

swift

Swift ChartsライブラリとCryptowatchAPIでローソク足を描画してみる。

1 はじめに2 CryptoWatchについて2.1 OHLC3 リクエスト方法3.1 CryptoWatchのAPI3.2 Swiftでの実装方法4 さいごに5 おすすめ書籍 はじめに こんにちは鈴 ...

swift

[Swift 3] テキストの装飾(フォント・文字サイズ・文字間隔・行間・文字色・下線)

1 はじめに2 フォント・文字サイズ変更3 文字間隔4 行間5 文字色6 下線7 さいごに8 おすすめ書籍 はじめに どうもはじめです。 今回は文字の装飾をやってみようと思います。 完成図を載せておき ...

swift

[Swift]タブの切り替え時にアニメーションが簡単に実装できる「TransitionableTab」

1 はじめに2 準備3 実装4 さいごに はじめに こんにちは、nukkyです。 今回は、UITabBarControllerの切り替え時にアニメーションを実装できるライブラリ「Transitiona ...

Sign in with Appleの実装

1 はじめに2 Sign in with Appleとは2.1 iOS レビューガイドライン2.2 つまり3 準備4 実装5 デザイン6 さいごに7 おすすめ書籍 はじめに こんにちは、nukkyです ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年6月
 123
45678910
11121314151617
18192021222324
252627282930 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。
Get it on App Store
Get it on Google Play