アンドロイドの 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.xml に定義する

アプリを構成するファイルたち

layout

src

マニフェスト

values

drawableR

gen

assets

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)

<TableLayoutandroid: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>

Left Right

Bottom

Top

center_vertical

center_horizontal

fill

android:layout_gravity

と

android:gravity

の使い分け

レイアウト配置テクニック２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" />

レイアウト配置テクニック３スペーサーを使う

<LinearLayoutandroid: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" /><LinearLayoutandroid: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" /><LinearLayoutandroid:layout_weight="1" android:layout_width="wrap_content" android:layout_height="wrap_content" />

次は ListView

レイアウトを作ったら？ Activity 　・・・　画面の基本 PreferenceActivity 　・・・　設定画

面 TabActivity 　・・・　タブ画面 ListActivity 　・・・　リスト画面 Etc 　・・・　

Activity のライフサイクル開始

onCreate

onResume

実行中

onPause

onStop

onDestory

終了onRestart

onStart

Back ボタンや他のActivity が表示される

長時間表示されない

回転すると一旦 Destory される

onRestoreInstanceState

onSaveInstanceState

Home は stop まで

処理を実装しよう OnCreate で初期化処理 OnResume で設定処理 Button イベントで処理を実装

@Overridepublic 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 　・・・　基本的なアダプター

BinderSimpleAdapter 等の拡張

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);｝

@Overridepublic View newView(Context context, Cursor cursor, ViewGroup parent) {return null;}

CursorView の場合はこっち

ListView の動作

AdaptergetView

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

完成！

質問があれば

質問受付中