LoginSignup
16
13

More than 5 years have passed since last update.

iOSでマテリアルデザインのアラートとメニュー

Last updated at Posted at 2016-08-08

ソースはGitに上げておくので使い方だけ解説
https://github.com/HihuSnow/Material-UI

今作ってるアプリを削った感じだからいろいろ混ざってるけど気にしない気にしない。
(あとコードが汚いというツッコミはなし)

メニュー

内容に応じて自動で高さが決まります
presentintViewControllerにはself

iconArr
titleArr
actionArr
にそれぞれアイコン、タイトル、ハンドラを配列で投げてください。
順番に並びます。
(主はハンドラ大好き)
この3つの要素数は同じでなければいけません。actionがない場合でも{}を入れてください。

アイコン

アイコン名は
https://design.google.com/icons/
から取ってきてください。

アイコン検索→
欲しいのクリック→
ICON FONT→
Use Icon In Your Siteの<i>の中身をコピペでOK

スクリーンショット 2016-08-08 11.22.49.png

RMMenu.swift
RMMenu.show(
            presentintViewController: self,
            iconArr: [
                "call",
                "settings"
            ],
            titleArr: [
                "電話",
                "設定"
            ],
            actionArr: [
                {
                    //電話の処理
                },
                {
                    //設定の処理
                }
            ]
        )

メッセージ 1

内容に応じて高さが自動で決まります。
ある程度以上の内容の場合
メッセージ 2 のCANCELボタンがない感じになります。

presentintViewControllerにはself
titleにはタイトル
messageにはメッセージだけ投げてください。

この3つだけ投げるとOKボタンだけのアラートができます。

スクリーンショット 2016-08-08 10.51.42.png

RMAlert.swift
RMAlert.show(
    presentintViewController: self,
    title: "LIFT",
    message: "スマートウォッチを充電する時はケーブルで机の上がゴチャゴチャしてしまうもの。そこで、「スマートウォッチを宙に浮かべる」という方法で極限まで充電時の光景をスッキリさせてしまったのがワイヤレスチャージャーの「LIFT」です。スマートウォッチだけでなくスマートフォンのワイヤレス充電器も兼ねており、さらに充電器とて使わない時は「宙に浮かぶランプ」としての使用もできるアイテムになっています。"
) 

メッセージ 2

メッセージ 1にキャンセルボタンがついたバージョンです。
presentintViewController, title, message, completionを投げるとCANCELボタンが自動で付きます。
completionはOKボタンタップ時にのみ実行されます。

スクリーンショット 2016-08-08 10.52.38.png

RMAlert.show(
    presentintViewController: self,
    title: "利用規約", 
    message: "YouTubeのウェブサイトまたはYouTubeのウェブサイト上で、ウェブサイトを通じて、もしくはウェブサイトから提供されるYouTubeの製品、ソフトウェア、データフィード及びサービス(以下、総称して「本サービス」といいます。)を利用又は訪問することにより、お客様は、(1) 本書に記載される規約 (以下「本サービス条件」といいます。)、(2) https://www.youtube.jp/t/privacyに記載されており、ここに参照され本サービス条件の一部を構成するYouTubeのプライバシーポリシー、及び(3) https://www.youtube.jp/t/community_guidelinesに記載されており、同様に、ここに参照され本サービス条件の一部を構成するYouTubeのコミュニティガイドラインに同意するものとします。お客様が本書に記載される規約、YouTubeのプライバシーポリシーまたはコミュニティガイドラインに同意しない場合には、YouTubeウェブサイトをご利用にならないで下さい。本サービスは、YouTube LLCにより提供され、 本サービス条件においては、YouTube LLC並びにその製品及びサービスを共にYouTubeといいます。\nYouTubeは、これら本サービス条件に重大な変更がなされた場合には、お客様にその旨通知するよう試みることもありますが、お客様は、定期的に、最新版(https://www.youtube.jp/t/terms)をご確認下さい。YouTubeは、その単独の裁量により、これら本サービス条件及び諸ポリシーをいつでも修正又は改訂することができ、お客様は、それら修正又は改訂に拘束されることに同意します。本サービス規約は、第三者に属する権利又は利益を付与するものとはみなされません。",
    completion: {
        //OKボタンが押されたときの処理
    }
)

Free Buttons

大文字になりません。このアラート嘘ついてます。

showメソッドが長いのは Masterしか準備してないから。orz
そのままコピペしてください。

インスタンス化してからbuttonsViewのaddButtonでボタンを追加できます。
必ずshowメソッドを呼んでから
addButtonしてください。
そうしないと表示されません

スクリーンショット 2016-08-08 10.53.04.png

let alert = RMAlert()
alert.show(
    presentintViewController: self,
    title: "Free Button",
    message: "自由な名前とアクションのボタンを置くことができます。ただしボタンの文字は大文字になります。",
    style: .Message,
    buttonStyle: .Custom,
    cellItems: [],
    cellActions: [],
    completion: {}
)
alert.buttonsView.addButton("CLOSE", action: {alert.CloseAlert({})})
alert.buttonsView.addButton("MOVE", action: {//アクション})

ラジオボタン

cellItems、cellActions
にそれぞれセル名アクションのハンドラを投げてください

この2つの要素数は同じでなければいけません。actionがない場合でも{}を入れてください。

スクリーンショット 2016-08-08 10.53.38.png

RMAlert.show(
    presentintViewController: self,
    title: "一番欲しいのは?",
    style: .CheckItem_single,
    cellItems: [
        "iPhone",
        "iPad",
        "iPod touch",
        "iPod",
        "iMac",
        "macBook Air",
        "macBook",
        "macBook Pro",
        "Apple Watch"
    ],cellActions: [
        {//iPhoneのときの処理},
        {//iPadのときの(ry},
        {//iPod touch(ry},
        {(ry},
        {},
        {},
        {},
        {},
        {}
    ]
)

チェックボタン

ラジオボタンの時のShowのStyleに.CheckItem_mulchを投げてください。
そうするとチェックボタンになります。
他のものを投げないでください、.CheckItem_mulch、.CheckItem_single以外投げないでください
(やめてぇぇぇ!、投げないでぇぇぇぇぇぇ!)

cellItems、cellActions
にそれぞれセル名アクションのハンドラを投げてください

この2つの要素数は同じでなければいけません。actionがない場合でも{}を入れてください。
スクリーンショット 2016-08-08 10.55.11.png

RMAlert.show(
    presentintViewController: self,
    title: "欲しいものを選んでください。",
    style: .CheckItem_mulch,
    cellItems: [
        "Mono",
        "Galaxy",
        "AQUOS",
        "arrows",
        "Blade",
        "P9"
    ],
    cellActions: [
        {//(ry},
        {},
        {},
        {},
        {}
    ]
)

セレクト

ボタンがない選ばせるパターンです。
上2つでStyleを指定しないとこうなります。

cellItems、cellActions
にそれぞれセル名アクションのハンドラを投げてください

この2つの要素数は同じでなければいけません。actionがない場合でも{}を入れてください。

スクリーンショット 2016-08-08 10.54.03.png

RMAlert.show(
    presentintViewController: self,
    title: "タイマー",
    cellItems: [
        "12:00",
        "11:00",
        "10:00",
        "9:00",
        "8:00"
    ],
    cellActions: [
        {},{},{},{},{}
    ]
)

RM

マテリアルデザインいいよね!
swiftのハンドラいいよね!ノシ

16
13
0

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
16
13