アンドロイドの GUI 作成なんて怖くな い！ In 第 5 回勉強会＠徳島 / オープンフォース Android 勉強会 201007 at 2010/07/15(sut) 夜子まま.

Presentation on theme: "アンドロイドの GUI 作成なんて怖くな い！ In 第 5 回勉強会＠徳島 / オープンフォース Android 勉強会 201007 at 2010/07/15(sut) 夜子まま."— Presentation transcript:

1 アンドロイドの GUI 作成なんて怖くな い！ In 第 5 回勉強会＠徳島 / オープンフォース Android 勉強会 201007 at 2010/07/15(sut) 夜子まま

2 自己紹介 ハンドルネーム 夜子まま Android 暦 4 ヶ月 マーケット登録 5 個 Java 暦 10 年ちょい 主にオープン系 JWS を３年ほど

3 目次  前説  レイアウトの説明 よく使うレイアウトを三つほど 配置で使えるテクニックの紹介  クラスの作成 Activity の説明 ライフサイクル  ListView の説明  あと何か

4 前置き 癖のある GUI 作成 Swing Eclipse HTML

5 説明開始 では早速 いってみましょう

6 画面を作る流れ １ レイアウトファイル を作成する ２ Activity を継承した クラスを作成する ３ 作ったクラスを AndroidManifest.x ml に定義する

7 アプリを構成するファイルたち layout src マニフェスト values drawable R gen assets apk

8 まずは画面デザインから  Button ・・・ ボタン  CheckBox ・・・ チェックボックス  EditText ・・・ 編集ボックス  RadioButton ・・・ ラジオボタン  ImageButton ・・・ イメージボタ ン  Spinner ・・・ すぴなー  Seekbar ・・・ シークバー  ZoomControls ・・・ ズームコント ロール

9 レイアウトをマスターしなきゃ始まらない  LinerLayout ・・・ 連続して並べる配置  TableLayout ・・・ 行・列揃えした配置  FrameLayout ・・・ 重ねた配置  RelativeLayout ・・・ 相関した配置  AbsoluteLayout ・・・ 絶対座標の配置 dip ( デバイスに依存しないピクセル ) sp ( 拡大縮小されたピクセル、テキストサイズに最 適 )

10 よく使うレイアウト （ 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" />

11 よく使うレイアウト （ TableLayout) <TableLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <EditText android:text="test" android:layout_width="wrap_content" android:layout_height="wrap_content" />

12 よく使うレイアウト （ 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" />

13 レイアウト配置テクニック１ 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" /> LeftRight Bottom Top center_vertical center_horizontal fill android:layout_gravity と android:gravity の使い分け

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

15 レイアウト配置テクニック３ スペーサーを使う <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

16 レイアウトを作ったら？  Activity ・・・ 画面の基本  PreferenceActivity ・・・ 設定 画面  TabActivity ・・・ タブ画面  ListActivity ・・・ リスト画面  Etc ・・・

17 Activity のライフサイクル 開始 onCreate onResume 実行中 onPause onStop onDestory 終了 onRestart onStart Back ボタンや他の Activity が表示される 長時間表示されない 回転すると一旦 Destory され る onRestoreInstanc eState onSaveInstanceState Home は stop まで

18 処理を実装しよう  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; }}); }

19 ListView を制するもの Andorid を制す ListView はほとんどのアプリで利用し ます、 だけど難しいんだよね。

20 ListView を構成するクラス  ListView  Adapter BaseAdapter ・・・ アダプターの抽象クラス CursorAdapter ・・・ Cursor をもつアダプター ArrayAdapter ・・・ 任意のリストのアダプター SimpleAdapter ・・・ 基本的なアダプター  Binder SimpleAdapter 等の拡張

21 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); ｝ @Override public View newView(Context context, Cursor cursor, ViewGroup parent) { return null; } CursorView の場合はこっち

22 ListView の動作 Adapter getView

23 ListView でコレを使いこなせ public void setTag (Object tag)Object public void setTag (int key, Object tag) Object public Object getTag () Object public Object getTag (int key) Object ListView Event 処理

24 ListView の前後につけるもの  HeaderView と FooterView 使い道？ もっと読む や、 読み込み中 等 LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); からの view = layoutInflater.inflate(R.layout.fortune_row, null);

25 時間確認 時間は？

26 時間確認 まだある

27 総合演習 最後にまとめとしてアプリを作 りたいと思います

28 総合演習 今日のためにとっておきのアプ リを準備しました

29 総合演習 その名も！

30 総合演習 告白スイッチ！！

31 アプリをつくっちゃお １ 誰でも告白できる ２ まさかのときでも ３ だから安心 ４ とにかく迷わない

32 アプリをつくっちゃお それでは作りましょう まずは画面デザインから

33 アプリをつくっちゃお main.xml

34 アプリをつくっちゃお KokuhakuAct.java

35 アプリをつくっちゃお AndroidManifest.xml

36 完成！

37 質問があれば 質問受付中