Now Loading. Please Wait ...                             Twitter @yokmama Androidの画面デザイン① 夜子まま塾 講義7(レイアウトの基本 XML編)        ...
自己紹介       氏名   :寺園聖文(てらぞの まさふみ)       肩書   :株式会社Re:Kayo-System 代表取締役社長       活動拠点 :神戸近郊∼日本→海外行きたい       著書   :「10日でおぼえるAn...
画面デザイン      Androidの画面デザインはWebデザインに似                 ています。       記述する言語はHTMLではなくXMLです。      XMLはHTMLに非常に似ているのでWebデザ      イ...
ハローワールドをもう一度                自動生成されたHelloWorldの                 レイアウトXMLファイル                         Re:Kayo-System Co.,Ltd...
レイアウトXMLファイル       レイアウトXMLファイルは部品の配置情報を記述し          たファイルです。XMLで記述します。                  ファイルは                res/layout-<...
レイアウトエディタ                    レイアウトXMLファイルは、レイアウ                    トエディタを使うと実際に表示される                     画面を確認しながら編集できます。 ...
タグを使って配置する                <?xml version="1.0" encoding="utf-8"?>                <LinearLayout xmlns:android="http://schema...
画像ファイル                 画像ファイルは各DPI毎に準備する                  ことができます。ファイルは                     drawable-<種別>                 ...
DPIとは                  DPIはdot per inchの略           1インチを何個の点の集まりとして表現するかを意味           する値。もともとプリンターやスキャナーの性能を表す          ...
文字列ファイル                                         文字列ファイルは文字列を定義する                                              ファイルです。     ...
国際化対応                文字列は各言語毎に準備することができます。                      values-<言語コード>-r<地域コード>                言語コード:ISO 639-1(半角英...
XMLに慣れる           Androidのリソースファイルは画像や音な           どといったリソースを除いてすべてXML                  ファイルで定義します。           あまり馴染みがないので難...
XMLとは                      拡張可能なマーク付け言語                eXtensible Markup Language                          の略です。          ...
XMLの書き方                親方、空から女の子が降ってきた!                  <名詞>親方</名詞>                  <副詞>空から</副詞>                  <主語>女の...
開始タグと終了タグ                                 主語というタグ                              終わりを終了タグとも言う                <名詞>親方</名詞>    ...
親タグと子タグ          <タグ名1>        タグ2の親タグ           <タグ名2>        タグ名1              <タグ名3>         タグ1の子タグ              </タグ名...
属性とテキストノード                 <タグ1 name= ほげ >                 ふが           タグには属性を設定できる。                                  属性名...
実際のXML                                                     XMLの宣言行です。                                                 文字コー...
実際に編集してみよう   Ctrl+Shift+Rでリソースダイアログを   開き main.xmlと入力してください。                       TextViewの部分をコピーしてペーストしてみよう             ...
中級者向け              プログラムからXMLを使う                       インポートするプロジェクト:Ykmjuku004                       このサンプルはXMLを読込み、一部のタグ...
レイアウトの方法は?           続きは夜子まま塾オンライン(無料)にて                毎週水曜日夜10:30∼11:00                 (都合によりない場合もあります)                ...
Upcoming SlideShare
Loading in …5
×

夜子まま塾講義7(androidの画面デザイン1)

1,412
-1

Published on

Androidの画面デザイン パート1
デザインのあらましから、XMLの編集までを解説

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,412
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

夜子まま塾講義7(androidの画面デザイン1)

  1. 1. Now Loading. Please Wait ... Twitter @yokmama Androidの画面デザイン① 夜子まま塾 講義7(レイアウトの基本 XML編) Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  2. 2. 自己紹介 氏名   :寺園聖文(てらぞの まさふみ) 肩書   :株式会社Re:Kayo-System 代表取締役社長 活動拠点 :神戸近郊∼日本→海外行きたい 著書   :「10日でおぼえるAndroidアプリ開発入門教室」著(翔泳社)       「HTML5によるAndroidアプリ開発入門」監修(日経BP) アプリ  :「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等 好きなもの:アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環 嫌いなもの:とくになし 最近のテーマ:電子工作、運動すること、英語 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  3. 3. 画面デザイン Androidの画面デザインはWebデザインに似 ています。 記述する言語はHTMLではなくXMLです。 XMLはHTMLに非常に似ているのでWebデザ インをしたことがある人には分かりやすいとお もいます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  4. 4. ハローワールドをもう一度 自動生成されたHelloWorldの レイアウトXMLファイル Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  5. 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. 6. レイアウトエディタ レイアウトXMLファイルは、レイアウ トエディタを使うと実際に表示される 画面を確認しながら編集できます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  7. 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. 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. 9. DPIとは DPIはdot per inchの略 1インチを何個の点の集まりとして表現するかを意味 する値。もともとプリンターやスキャナーの性能を表す 際に使用されている単位です。 1インチ 例)73dpiの場合一辺に72個の ピクセルがあります。 1 イ ン チ Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  10. 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. 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. 12. XMLに慣れる Androidのリソースファイルは画像や音な どといったリソースを除いてすべてXML ファイルで定義します。 あまり馴染みがないので難しく感じるかも しれませんが、XMLはそれほど難しいも のではありません。まずは準備運動程度に XMLを使ってみましょう。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  13. 13. XMLとは 拡張可能なマーク付け言語 eXtensible Markup Language の略です。 SGML 元祖 XML HTML データの形式としての Webサイト 標準的な位置付け Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  14. 14. XMLの書き方 親方、空から女の子が降ってきた! <名詞>親方</名詞> <副詞>空から</副詞> <主語>女の子が</主語> <述語>降ってきた!</述語> このようにデータ(文字列)にマーキングをして意味を持たせ ることができる言語をマークアップ言語といいます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  15. 15. 開始タグと終了タグ 主語というタグ 終わりを終了タグとも言う <名詞>親方</名詞> </タグ名>で囲む <副詞>空から</副詞> <主語>女の子が</主語> <述語>降ってきた!</述語> 主語というタグ はじまりを開始タグとも言う <タグ名>で囲む Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  16. 16. 親タグと子タグ <タグ名1> タグ2の親タグ <タグ名2> タグ名1 <タグ名3> タグ1の子タグ </タグ名3> タグ名2 </タグ名2> タグ2の子タグ </タグ名1> タグ名3 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  17. 17. 属性とテキストノード <タグ1 name= ほげ > ふが タグには属性を設定できる。 属性名= 値 </タグ1> この例ではnameという属性名に ほげ という値を設定している。 開始タグと終了タグの間には子タグのほかに、 文字列をおくことができる。これはテキストノードとよばれる。 しかし、テキストノードには使えない文字(禁則文字)がある。 たとえば < や >等、これらはXMLのタグ名と混同してしまうからです。 &lt; や &gt; などのようなエスケープ文字に置き換える必要があります。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  18. 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. 19. 実際に編集してみよう Ctrl+Shift+Rでリソースダイアログを 開き main.xmlと入力してください。 TextViewの部分をコピーしてペーストしてみよう ペースト ペーストしたらどんな画面になるのか確認。 その他にも属性の値を変えてみてください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  20. 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. 21. レイアウトの方法は? 続きは夜子まま塾オンライン(無料)にて 毎週水曜日夜10:30∼11:00 (都合によりない場合もあります) 夜子まま塾 http://bit.ly/wTjjix GoogleID:101190223376062765723 上記アカウントをサークルに追加していると、 ハングアウトのお誘いが届きます。 是非ご参加ください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×