夜子まま塾講義7（androidの画面デザイン１）

Re:Kayo-System Co.,Ltd.

Twitter @yokmamaNow Loading. Please Wait ...

Androidの画面デザイン①夜子まま塾　講義７（レイアウトの基本　XML編）

2012年2月29日水曜日


自己紹介氏名　　　：寺園聖文（てらぞの　まさふみ）

肩書　　　：株式会社Re:Kayo-System　代表取締役社長

活動拠点　：神戸近郊～日本→海外行きたい

著書　　　：「１０日でおぼえるAndroidアプリ開発入門教室」著（翔泳社）

　　　　　　「HTML5によるAndroidアプリ開発入門」監修（日経BP）

アプリ　　：「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等

好きなもの：アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環

嫌いなもの：とくになし

最近のテーマ：電子工作、運動すること、英語



画面デザインAndroidの画面デザインはWebデザインに似

ています。記述する言語はHTMLではなくXMLです。XMLはHTMLに非常に似ているのでWebデザインをしたことがある人には分かりやすいとお

もいます。



ハローワールドをもう一度

自動生成されたHelloWorldのレイアウトXMLファイル



レイアウトXMLファイル

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" ><TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /></LinearLayout>

レイアウトXMLファイルは部品の配置情報を記述したファイルです。XMLで記述します。

ファイルは　res/layout-<種別>

の下に置く必要があります。



レイアウトエディタ

レイアウトXMLファイルは、レイアウトエディタを使うと実際に表示される画面を確認しながら編集できます。



タグを使って配置する<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />

</LinearLayout>

TextViewタグ画面に文字を表示する



画像ファイル画像ファイルは各DPI毎に準備することができます。ファイルは

drawable-<種別>の下におく必要があります。

フォルダ名意味

drawable 推奨されない。これを使うならnodpiを使うべき

drawable-ldpi 低DPIの画像を格納

drawable-mdpi 中DPIの画像を格納

drawable-hdpi 高DPIの画像を格納

drawable-nodpi DPIに依存しない画像を格納



DPIとはDPIはdot per inchの略

1インチを何個の点の集まりとして表現するかを意味する値。もともとプリンターやスキャナーの性能を表す

際に使用されている単位です。

１インチ

１インチ

例）73dpiの場合一辺に72個のピクセルがあります。



文字列ファイル

<?xml version="1.0" encoding="utf-8"?><resources> <string name="hello">Hello World, HelloWorldActivity!</string> <string name="app_name">HelloWorld</string></resources>

文字列ファイルは文字列を定義するファイルです。ファイルはvalues-<種別>

の下におく必要があります。



国際化対応

values-<言語コード>-r<地域コード>

文字列は各言語毎に準備することができます。

言語コード：ISO 639-1(半角英字2文字)地域コード：ISO 3166-1-alpha-2(半角英字2文字)values-en-rUS, values-fr-rFR, values-es-rES, values-ja-rJPなど。あるいは、values-en, values-fr, values-es, values-jaなど。指定がない場合はvaluesの下のリソースがデフォルトとなります。

res/values-ja/strings.xml ←日本語の文字列例）


http://www.loc.gov/standards/iso639-2/php/code_list.php

http://www.loc.gov/standards/iso639-2/php/code_list.php

http://www.iso.org/iso/country_codes/iso_3166_code_lists/english_country_names_and_code_elements.htm

http://www.iso.org/iso/country_codes/iso_3166_code_lists/english_country_names_and_code_elements.htm


XMLに慣れるAndroidのリソースファイルは画像や音などといったリソースを除いてすべてXML

ファイルで定義します。あまり馴染みがないので難しく感じるかもしれませんが、XMLはそれほど難しいものではありません。まずは準備運動程度に

XMLを使ってみましょう。



XMLとは

eXtensible Markup Languageの略です。

拡張可能なマーク付け言語

SGML

HTML XML元祖

Webサイトデータの形式としての標準的な位置付け



XMLの書き方親方、空から女の子が降ってきた！

<名詞>親方</名詞><副詞>空から</副詞><主語>女の子が</主語><述語>降ってきた！</述語>

このようにデータ（文字列）にマーキングをして意味を持たせることができる言語をマークアップ言語といいます。



開始タグと終了タグ<名詞>親方</名詞><副詞>空から</副詞><主語>女の子が</主語><述語>降ってきた！</述語>

主語というタグはじまりを開始タグとも言う

＜タグ名＞で囲む

主語というタグ終わりを終了タグとも言う＜/タグ名＞で囲む



親タグと子タグ<タグ名１＞ <タグ名2> <タグ名３> </タグ名３> </タグ名2>＜／タグ名1>

タグ名１

タグ名2

タグ名3

タグ１の子タグ

タグ２の子タグ

タグ２の親タグ



属性とテキストノード<タグ１ name=”ほげ”>ふが</タグ１>

タグには属性を設定できる。属性名=”値”

この例ではnameという属性名にほげ　という値を設定している。

開始タグと終了タグの間には子タグのほかに、文字列をおくことができる。これはテキストノードとよばれる。しかし、テキストノードには使えない文字（禁則文字）がある。

たとえば　＜　や　＞等、これらはXMLのタグ名と混同してしまうからです。< や > などのようなエスケープ文字に置き換える必要があります。



実際のXML<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />

</LinearLayout>

XMLの宣言行です。文字コードや準拠するXMLのバージョ

ンを記述します。

android:layout_width属性にfill_parentという値を設定しています

TextViewというタグです。色々な属性が設定されていますが、子タグはありません。

子タグやテキストノードがない場合は、このようにはタグの一番最後に”/”を付けることで終了タグを省略できます。



実際に編集してみようCtrl+Shift+Rでリソースダイアログを開き　main.xmlと入力してください。

TextViewの部分をコピーしてペーストしてみよう

ペーストしたらどんな画面になるのか確認。その他にも属性の値を変えてみてください。

ペースト



中級者向けプログラムからXMLを使う

インポートするプロジェクト：Ykmjuku004このサンプルはXMLを読込み、一部のタグの情報を抜き出して画面に表示しています。

<poem><pno>8</pno><mkana>熟田津尓船乗世武登月待者潮毛可奈比沼今者許藝乞菜</mkana><poet>額田王(ぬかたのおおきみ)</poet><yomi>

熟田津(にきたつ)に、船(ふな)乗りせむと、月待てば、潮もかなひぬ、今は漕(こ)ぎ出(い)でな

</yomi><image>image/m0008.jpg</image><mean>熟田津(にきたつ)で、船を出そうと月を待っていると、いよいよ潮の流れも良くなってきた。

さあ、いまこそ船出するのです。

</mean></poem>

sample.xml実行画面

サンプルは　「『たのしいXML』サンプルファイル集」http://www.sotechsha.co.jp/xml/からダウンロードしました。

http://bit.ly/xlw9wR2012年2月29日水曜日

http://www.sotechsha.co.jp/xml/




http://bit.ly/xlw9wR

http://bit.ly/xlw9wR


レイアウトの方法は？続きは夜子まま塾オンライン（無料）にて毎週水曜日夜１０：３０～１１：００（都合によりない場合もあります）

http://bit.ly/wTjjixGoogleID:101190223376062765723

夜子まま塾

上記アカウントをサークルに追加していると、ハングアウトのお誘いが届きます。

是非ご参加ください。


http://bit.ly/wTjjix

http://bit.ly/wTjjix

夜子まま塾講義7（androidの画面デザイン１）

Technology