アンドロイドのGUI作成なんて怖くない！
Download
Report
Transcript アンドロイドの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
完成！
質問があれば
質問受付中