MonacaのネイティブUIとOnsen UIを使ってそれっぽいデザインのアプリを作ってみた!

onsen_ui

どうも、竹石です。

Native UIってカッコいいよなーと思っていた今日この頃、
MonacaでNative UIの使い方を調べてみました。

今回はNative UIのヘッダーを作成し、ページを切り替えるごとにヘッダーも切り替えたいと思います。

『MonacaのネイティブUIとOnsen UIを使ってそれっぽいデザインのアプリを作ってみた!』


■ やってみる

まずは、Monaca DOCSにあるように、uiファイルを作成します。

・ index.ui

{
    "top" : {
        "container" : "toolbar",
        "id" : "header",
        "style" : {
            "title" : ""
        },
        "left": [
            {
                "component": "button",
                "id":"leftHeader",
                "style": {
                        "text": "編集"
                },
                "event": {
                    "onTap": "alert('編集');"
                }
            }
        ],
        "right": [
            {
                "component": "button",
                "style": {
                        "text": "新規"
                },
                "event": {
                    "onTap": "alert('編集');"
                }
            }
        ]
    }
}

・ index.html

index.htmlのbodyタグ内に下記のようなページの切り替えるためのタブを定義します。
この書き方は、Onsen UIの書き方になります。

tabber_call

・ tabbar.html

tabbar.htmlはこんな感じで書きます。

tabber

■ ポイント

ポイントは、onClickイベントでindex.htmlのNative UIを変更するファンクションを呼ぶこと。

遷移先のuserSearch.html、talkList.html、createGroup.htmlのロード時の
ファンクションにNative UIを変更するファンクションを呼んでも、ロードされないから意味がないみたいです。

だから、クリックした時に呼ぶ!

・ index.html

    function onInsertLoad(){
        monaca.updateUIStyle("header", "title", "ユーザー情報登録");
    }

    function onCreateGroupLoad(){
        monaca.updateUIStyle("header", "title", "グループ作成");
    }

    function onUserSearchLoad(){
        monaca.updateUIStyle("header", "title", "ユーザー検索");
        monaca.updateUIStyle("leftHeader", "text", "検索")
    }

    function onTalkLoad() {
        monaca.updateUIStyle("header", "title", "トーク");
    }

ちなみに、uiファイルの変更方法は、idを定義してあげて、下記のファンクションで変えます。
monaca.updateUIStyle(id, style, value)

この流れで、ページを切り替えるごとにNative UIを変える方法がわかりました。


■ 画面の表示

下記の画面表示を見ると、ページタイトルとボタンのラベルが、正しく変わっているのが分かります。

あとはuiファイルにidを定義、index.htmlの画面遷移時のオンクリックで呼ばれるファンクションにそれぞれのページのボタンイベントなどを定義すれば、思ったような動きができます。

・ 初期表示されるページ

初期表示されるページ

・ 検索ページ

検索ページ

■ まとめ

  • ① uiファイル作成
  • ② 画面遷移時にuiファイルのスタイルを変更するファンクションをコール
  • ③ ②のファンクションでuiファイルのスタイルなどを変更
    →変更対象のスタイルには同階層にidを定義

結果的にOnsen UIとNative UIを同時に使う時の書き方って感じになりました。
それにしても、デザインセンスが求められないNative UIはいいですね。

全部Native UIでアプリが出来たら、デザイナーいらずでカッコいいアプリ作れそうだなと思いました。

コメントを残す

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

ABOUTこの記事をかいた人

アバター

WEBアプリ開発をメイン業務としている。後輩エンジニアの育成リーダーとしても活躍中。社内勉強会の立ち上げなど、会社の前線でその能力を発揮している。2009年、株式会社ヘッドウォータース新卒入社。