More Related Content
Similar to 夜子まま塾講義7(androidの画面デザイン1) (20)
More from Masafumi Terazono (20)
夜子まま塾講義7(androidの画面デザイン1)
- 1. Now Loading. Please Wait ...
Twitter @yokmama
Androidの画面デザイン①
夜子まま塾 講義7(レイアウトの基本 XML編)
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 2. 自己紹介
氏名 :寺園聖文(てらぞの まさふみ)
肩書 :株式会社Re:Kayo-System 代表取締役社長
活動拠点 :神戸近郊∼日本→海外行きたい
著書 :「10日でおぼえるAndroidアプリ開発入門教室」著(翔泳社)
「HTML5によるAndroidアプリ開発入門」監修(日経BP)
アプリ :「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等
好きなもの:アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環
嫌いなもの:とくになし
最近のテーマ:電子工作、運動すること、英語
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 3. 画面デザイン
Androidの画面デザインはWebデザインに似
ています。
記述する言語はHTMLではなくXMLです。
XMLはHTMLに非常に似ているのでWebデザ
インをしたことがある人には分かりやすいとお
もいます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 4. ハローワールドをもう一度
自動生成されたHelloWorldの
レイアウトXMLファイル
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 5. レイアウトXMLファイル
レイアウトXMLファイルは部品の配置情報を記述し
たファイルです。XMLで記述します。
ファイルは
res/layout-<種別>
の下に置く必要があります。
<?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>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 6. レイアウトエディタ
レイアウトXMLファイルは、レイアウ
トエディタを使うと実際に表示される
画面を確認しながら編集できます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 7. タグを使って配置する
<?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タグ
画面に文字を表示する
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 8. 画像ファイル
画像ファイルは各DPI毎に準備する
ことができます。ファイルは
drawable-<種別>
の下におく必要があります。
フォルダ名 意味
drawable 推奨されない。これを使うならnodpiを使うべき
drawable-ldpi 低DPIの画像を格納
drawable-mdpi 中DPIの画像を格納
drawable-hdpi 高DPIの画像を格納
drawable-nodpi DPIに依存しない画像を格納
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 9. DPIとは
DPIはdot per inchの略
1インチを何個の点の集まりとして表現するかを意味
する値。もともとプリンターやスキャナーの性能を表す
際に使用されている単位です。
1インチ 例)73dpiの場合一辺に72個の
ピクセルがあります。
1
イ
ン
チ
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 10. 文字列ファイル
文字列ファイルは文字列を定義する
ファイルです。
ファイルは
values-<種別>
の下におく必要があります。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloWorldActivity!</string>
<string name="app_name">HelloWorld</string>
</resources>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 11. 国際化対応
文字列は各言語毎に準備することができます。
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 ←日本語の文字列
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 12. XMLに慣れる
Androidのリソースファイルは画像や音な
どといったリソースを除いてすべてXML
ファイルで定義します。
あまり馴染みがないので難しく感じるかも
しれませんが、XMLはそれほど難しいも
のではありません。まずは準備運動程度に
XMLを使ってみましょう。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 13. XMLとは
拡張可能なマーク付け言語
eXtensible Markup Language
の略です。
SGML
元祖
XML
HTML データの形式としての
Webサイト 標準的な位置付け
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 14. XMLの書き方
親方、空から女の子が降ってきた!
<名詞>親方</名詞>
<副詞>空から</副詞>
<主語>女の子が</主語>
<述語>降ってきた!</述語>
このようにデータ(文字列)にマーキングをして意味を持たせ
ることができる言語をマークアップ言語といいます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 15. 開始タグと終了タグ
主語というタグ
終わりを終了タグとも言う
<名詞>親方</名詞> </タグ名>で囲む
<副詞>空から</副詞>
<主語>女の子が</主語>
<述語>降ってきた!</述語>
主語というタグ
はじまりを開始タグとも言う
<タグ名>で囲む
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 16. 親タグと子タグ
<タグ名1> タグ2の親タグ
<タグ名2> タグ名1
<タグ名3> タグ1の子タグ
</タグ名3> タグ名2
</タグ名2> タグ2の子タグ
</タグ名1> タグ名3
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 17. 属性とテキストノード
<タグ1 name= ほげ >
ふが タグには属性を設定できる。
属性名= 値
</タグ1> この例ではnameという属性名に
ほげ という値を設定している。
開始タグと終了タグの間には子タグのほかに、
文字列をおくことができる。これはテキストノードとよばれる。
しかし、テキストノードには使えない文字(禁則文字)がある。
たとえば < や >等、これらはXMLのタグ名と混同してしまうからです。
< や > などのようなエスケープ文字に置き換える必要があります。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 18. 実際のXML
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:layout_width属性に
android:orientation="vertical" >
fill_parentという値を設定しています
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>
TextViewというタグです。
色々な属性が設定されていますが、子タグはありません。
子タグやテキストノードがない場合は、このようにはタグの一番最後に /
を付けることで終了タグを省略できます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 19. 実際に編集してみよう
Ctrl+Shift+Rでリソースダイアログを
開き main.xmlと入力してください。
TextViewの部分をコピーしてペーストしてみよう
ペースト
ペーストしたらどんな画面になるのか確認。
その他にも属性の値を変えてみてください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 20. 中級者向け
プログラムからXMLを使う
インポートするプロジェクト:Ykmjuku004
このサンプルはXMLを読込み、一部のタグの情報を抜き
出して画面に表示しています。
sample.xml
<poem> 実行画面
<pno>8</pno>
<mkana>熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜</mkana>
<poet>額田王(ぬかたのおおきみ)</poet>
<yomi>
熟田津(にきたつ)に、船(ふな)乗りせむと、月待てば、潮もかなひぬ、今は漕(こ)ぎ出(い)でな
</yomi>
<image>image/m0008.jpg</image>
<mean>熟田津(にきたつ)で、船を出そうと月を待っていると、いよいよ潮の流れも良くなってきた。
さあ、いまこそ船出するのです。
</mean>
</poem>
サンプルは 「『たのしいXML』サンプルファイル集」http://www.sotechsha.co.jp/xml/
からダウンロードしました。
http://bit.ly/xlw9wR
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 21. レイアウトの方法は?
続きは夜子まま塾オンライン(無料)にて
毎週水曜日夜10:30∼11:00
(都合によりない場合もあります)
夜子まま塾
http://bit.ly/wTjjix
GoogleID:101190223376062765723
上記アカウントをサークルに追加していると、
ハングアウトのお誘いが届きます。
是非ご参加ください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日