Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,283 views

Published on

Androidの画面デザイン2 部品の配置から各属性の編集まで

  • Be the first to comment

  • Be the first to like this

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

  1. 1. Now Loading. Please Wait ... Twitter @yokmama Androidの画面デザイン② 夜子まま塾 講義8(レイアウトの基本 部品編) 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のタグ Androidのレイアウトでは利用できるタ グがあらかじめ決まっています。 もちろん、カスタマイズタグも作ること ができますが、基本的にはそれらを使っ てデザインします。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  4. 4. Buttonタグ 画面にボタンを置くことができます。 <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> Form Widgetsの中にあります。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  5. 5. TextViewタグ 画面に文字列を置くことができます。 <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> Form Widgetsの中にあります。 TextViewの他にLarge、Medium、 SmallもTextViewタグです。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  6. 6. EditTextタグ 画面に入力ボックスを置くことができます。 <EditText android:id="@+id/editText1" android:layout_width="fill_parent" android:layout_height="wrap_content" > </EditText> Text Filedの中にあります。 abcとか色々ありますが、それぞれ初 期入力のIMEの設定等が異なる EditTextです。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  7. 7. LinearLayoutタグ ボタンやテキストなどの配置を設定できます。 <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > </LinearLayout> Layoutの中にあります。 これ単体ではあまり意味はなく、Buttonや TextViewタグ等を子タグにして使います。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  8. 8. ListViewタグ スクロール機能付きのリスト表示が出来ます <ListView android:id="@+id/listView1" android:layout_width="fill_parent" android:layout_height="wrap_content" > </ListView> Compositeの中にあります。 一覧表示をしたい場合に使います。 通常データはプログラム内で設定します。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  9. 9. ImageViewタグ 画像を表示することができます。 <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> Image&Mediaの中にあります。 自動縮小したり回転したりなど画像を 自動加工することができます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  10. 10. タグを配置する 基本的にタグを全て手入力することは 生産性がよくありません。入力方法と して簡単な方法が2つあるのでそれぞ れやってみましょう。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  11. 11. GUIを使って入力 ①レイアウトファイルを開き GraphicalLayoutでファイルを表示する。 ②左のPaletteから配置したい部品を選択し ドラッグしてから画面にドロップする。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  12. 12. GUIエディタの注意点 • 読込が遅いので非力なパソコンでは表示に時間がかかる。 • 初期のデバイスタイプが2.7QVGAになっていて表示されない場合が ある。この場合は一度他のデバイスタイプに変更して開くと治りま す。 • 違う種別の同名のファイルを開くとエラーになる。最新のADTの不具 合なのか、同名のファイルを開くとエラーになるか、あるいは既にひ らいていると言われる。一度閉じてから開くと良い。 • Paletteの表示がデフォルトでShowPreviewになっている。この表示 はわかりにくいので、Palette上で右クリックしメニューから ShowIconAndText等にすると良い Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  13. 13. 直接XMLを編集 XMLの編集画面で挿入したい 箇所にカーソルを移動 <L のように入力していくと、入力 補完が働くのでダイアログから選択 選択するとタグが自動で入力される Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  14. 14. 直接入力の注意点 • タグ名をある程度覚えておく必要がある • D&Dで追加した場合と異なりデフォルトで入力される属性がないの で、そのあたりは自分で入力していく必要がある。 • タグ名だけでなく属性名も補完できる。 • 属性名の場合、属性に使える値も入力補完できる。 • 間違った属性の値、間違ったタグの使い方をしているとエラーが表示 される。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  15. 15. 入力エラーの場合 このように入力に誤りがあるとエ ラーあるいは警告がでる。 カーソルをあわせると原因の説明がみれる。 この場合は使えない単位を使っているためエ ラーになっている。 また、警告はプログラム上無視できるものも あるので必ずしも修正しなくてはいけないと いうわけではないです。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  16. 16. 実際に使ってみよう ButtonやCheckBox等を実際にレイアウトエ ディタを使って配置し、それぞれどのような属 性があるのかチェックしてみてください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  17. 17. レイアウトの方法は? 続きは夜子まま塾オンライン(無料)にて 毎週水曜日夜10:30∼11:00 (都合によりない場合もあります) 夜子まま塾 http://bit.ly/wTjjix GoogleID:101190223376062765723 上記アカウントをサークルに追加していると、 ハングアウトのお誘いが届きます。 是非ご参加ください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日

×