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

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

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

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

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

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

アプリを構成するファイルたち layout src マニフェスト values drawable R 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" />

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

よく使うレイアウト （ FrameLayout) <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView 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" />

レイアウト配置テクニック１ 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 の使い分け

レイアウト配置テクニック２ 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 のライフサイクル 開始 onCreate onResume 実行中 onPause onStop onDestory 終了 onRestart onStart Back ボタンや他の Activity が表示される 長時間表示されない 回転すると一旦 Destory され る onRestoreInstanc eState onSaveInstanceState Home は stop まで

処理を実装しよう  OnCreate で初期化処理  OnResume で設定処理  Button public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.people_list); srchText = (EditText) this.findViewById(R.id.srchText); srchText.setOnLongClickListener(new OnLongClickListener() 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); public View newView(Context context, Cursor cursor, ViewGroup parent) { return null; } CursorView の場合はこっち

ListView の動作 Adapter getView

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 処理

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

完成！

質問があれば 質問受付中