アンドロイドのGUI作成なんて怖くない！

アンドロイドのGUI作成なんて怖くない！
In 第5回勉強会＠徳島/オープンフォースAndroid勉強会 201007
at 2010/07/15(sut)
夜子まま
自己紹介
ハンドルネーム夜子まま
Android暦 4ヶ月
マーケット登録 5個
Java暦10年ちょい
主にオープン系
JWSを３年ほど
目次
 前説
 レイアウトの説明
よく使うレイアウトを三つほど
配置で使えるテクニックの紹介
 クラスの作成
Activityの説明
ライフサイクル
 ListViewの説明
 あと何か
前置き
癖のあるGUI作成
Swing
Eclipse
HTML
説明開始
では早速いってみましょう
画面を作る流れ
１レイアウトファイルを作
成する
２ Activityを継承したクラ
スを作成する
３作ったクラスを
AndroidManifest.x
mlに定義する
アプリを構成するファイルたち
layout
assets
values
src
R
drawable
gen
マニフェスト
apk
まずは画面デザインから








Button ・・・ボタン
CheckBox ・・・チェックボックス
EditText ・・・編集ボックス
RadioButton ・・・ラジオボタン
ImageButton ・・・イメージボタン
Spinner ・・・すぴなー
Seekbar ・・・シークバー
ZoomControls ・・・ズームコントロール
レイアウトをマスターしなきゃ始まらない





LinerLayout ・・・連続して並べる配置
TableLayout ・・・行・列揃えした配置
FrameLayout ・・・重ねた配置
RelativeLayout ・・・相関した配置
AbsoluteLayout ・・・絶対座標の配置
dip (デバイスに依存しないピクセル)
sp (拡大縮小されたピクセル、テキストサイズに最適)
よく使うレイアウト（LinerLayout)
<LinearLayout
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="hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="hello"
/>
</LinearLayout>
よく使うレイアウト（ TableLayout)
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TableRow>
<EditText
android:text="test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</TableRow>
</TableLayout>
よく使うレイアウト（ FrameLayout)
<FrameLayout
android:id="@+id/FrameLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="@drawable/penguins"
android:scaleType="fitStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="あいうえお"
android:layout_marginTop="10dip"
android:textSize="40sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
レイアウト配置テクニック１
gravityをつかって位置合わせ
<LinearLayout
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_width="fill_parent "
android:layout_height=“fill_parent” >
<Button
android:text="ボタン"
android:layout_gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
android:layout_gravity
と
android:gravity
の使い分け
Top
Left
Right
center_horizontal
center_vertical
fill
Bottom
レイアウト配置テクニック２
Weightをつかって均等貼り付け
<Button
android:text="test1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="test2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="test3"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
レイアウト配置テクニック３
スペーサーを使う
<LinearLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="test1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:text="test3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
次はListView
レイアウトを作ったら？





Activity ・・・画面の基本
PreferenceActivity ・・・設定画面
TabActivity ・・・タブ画面
ListActivity ・・・リスト画面
Etc ・・・
Activityのライフサイクル
onSaveInstanceState
開始
実行中
onCreate
Backボタンや他の
Activityが表示される
onPause
長時間表示されない
onStart
onStop
onRestoreInstanc
eState
onResume
onDestory
回転すると一旦Destoryされる
onRestart
Homeはstopまで
終了
処理を実装しよう
 OnCreateで初期化処理
 OnResumeで設定処理
 Buttonイベントで処理を実装
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.people_list);
}
srchText = (EditText) this.findViewById(R.id.srchText);
srchText.setOnLongClickListener(new OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
srchText.setText("");
return false;
}});
ListViewを制するものAndoridを制す
ListViewはほとんどのアプリで利用します、
だけど難しいんだよね。
ListViewを構成するクラス
 ListView
 Adapter
BaseAdapter ・・・アダプターの抽象クラス
CursorAdapter ・・・ Cursorをもつアダプター
ArrayAdapter ・・・任意のリストのアダプター
SimpleAdapter ・・・基本的なアダプター
 Binder
SimpleAdapter等の拡張
ListViewのカスタマイズ
AdapterのgetViewで表示するViewを生成する。
LayoutInflater layoutInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
からの
public View getView(int position, View view, ViewGroup parent) {
Peopleinfo inf = this.getItem(position);
if (view == null) {
view = layoutInflater.inflate(R.layout.fortune_row, null);
｝
CursorViewの場合はこっち
@Override
public View newView(Context context, Cursor cursor,
ViewGroup parent) {
return null;
}
ListViewの動作
Adapter
getView
ListViewでコレを使いこなせ
public void setTag (Object tag)
public void setTag (int key, Object tag)
public Object getTag ()
public Object getTag (int key)
ListView
Event処理
ListViewの前後につけるもの
 HeaderViewとFooterView
使い道？
もっと読むや、読み込み中等
LayoutInflater layoutInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
からの
view = layoutInflater.inflate(R.layout.fortune_row, null);
時間確認
時間は？
時間確認
まだある
総合演習
最後にまとめとしてアプリを作り
たいと思います
総合演習
今日のためにとっておきのアプリ
を準備しました
総合演習
その名も！
総合演習
告白スイッチ！！
アプリをつくっちゃお
１
２
３
４
誰でも告白できる
まさかのときでも
だから安心
とにかく迷わない
アプリをつくっちゃお
それでは作りましょう
まずは画面デザインから
アプリをつくっちゃお
main.xml
アプリをつくっちゃお
KokuhakuAct.java
アプリをつくっちゃお
AndroidManifest.xml
完成！
質問があれば
質問受付中

Download Report