slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
アンドロイドの GUI 作成なんて怖くない! PowerPoint Presentation
Download Presentation
アンドロイドの GUI 作成なんて怖くない!

Loading in 2 Seconds...

play fullscreen
1 / 37

アンドロイドの GUI 作成なんて怖くない! - PowerPoint PPT Presentation


  • 146 Views
  • Uploaded on

アンドロイドの GUI 作成なんて怖くない!. In 第 5 回勉強会@徳島 / オープンフォース Android 勉強会 201007 at 2010/07/15(sut) 夜子まま. 自己紹介. ハンドルネーム 夜子まま Android 暦  4 ヶ月 マーケット登録  5 個 Java 暦 10 年ちょい 主にオープン系 JWS を3年ほど. 目次. 前説 レイアウトの説明 よく使うレイアウトを三つほど 配置で使えるテクニックの紹介 クラスの作成 Activity の説明 ライフサイクル ListView の説明 あと何か. 前置き.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

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


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

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

In 第5回勉強会@徳島/オープンフォースAndroid勉強会 201007

at 2010/07/15(sut)

夜子まま

slide2
自己紹介

ハンドルネーム 夜子まま

Android暦 4ヶ月

マーケット登録 5個

Java暦10年ちょい

主にオープン系

JWSを3年ほど

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

癖のあるGUI作成

Swing

Eclipse

HTML

slide5
説明開始

では早速 いってみましょう

slide6
画面を作る流れ

1 レイアウトファイルを作成する

2 Activityを継承したクラスを作成する

3 作ったクラスをAndroidManifest.xmlに定義する

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

assets

layout

values

src

R

drawable

マニフェスト

apk

gen

slide8
まずは画面デザインから
  • Button ・・・ ボタン
  • CheckBox ・・・ チェックボックス
  • EditText ・・・ 編集ボックス
  • RadioButton ・・・ ラジオボタン
  • ImageButton ・・・ イメージボタン
  • Spinner ・・・ すぴなー
  • Seekbar ・・・ シークバー
  • ZoomControls ・・・ ズームコントロール
slide9
レイアウトをマスターしなきゃ始まらない
  • LinerLayout ・・・ 連続して並べる配置
  • TableLayout ・・・ 行・列揃えした配置
  • FrameLayout ・・・ 重ねた配置
  • RelativeLayout ・・・ 相関した配置
  • AbsoluteLayout ・・・ 絶対座標の配置

dip (デバイスに依存しないピクセル)

sp (拡大縮小されたピクセル、テキストサイズに最適)

linerlayout
よく使うレイアウト(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)

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

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

slide13
レイアウト配置テクニック1

Top

Left

Right

gravityをつかって位置合わせ

center_horizontal

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

center_vertical

fill

Bottom

android:layout_gravity

android:gravity

の使い分け

slide14
レイアウト配置テクニック2

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" />

slide15
レイアウト配置テクニック3

スペーサーを使う

<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

slide16
レイアウトを作ったら?
  • Activity ・・・ 画面の基本
  • PreferenceActivity ・・・ 設定画面
  • TabActivity ・・・ タブ画面
  • ListActivity ・・・ リスト画面
  • Etc ・・・ 
activity
Activityのライフサイクル

onSaveInstanceState

開始

実行中

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

onCreate

onPause

長時間表示されない

onStart

onStop

onResume

onRestoreInstanceState

onDestory

回転すると一旦Destoryされる

onRestart

Homeはstopまで

終了

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

@Override

publicvoid onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.people_list);

srchText = (EditText) this.findViewById(R.id.srchText);

srchText.setOnLongClickListener(newOnLongClickListener() {

@Override

publicboolean onLongClick(View v) {

srchText.setText("");

returnfalse;

}});

}

listview andorid
ListViewを制するものAndoridを制す

ListViewはほとんどのアプリで利用します、

だけど難しいんだよね。

listview
ListViewを構成するクラス
  • ListView
  • AdapterBaseAdapter ・・・ アダプターの抽象クラスCursorAdapter ・・・ CursorをもつアダプターArrayAdapter ・・・ 任意のリストのアダプターSimpleAdapter ・・・ 基本的なアダプター
  • BinderSimpleAdapter等の拡張
listview1
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) {

returnnull;

}

listview2
ListViewの動作

Adapter

getView

listview3
ListViewでコレを使いこなせ

public voidsetTag(Objecttag)

public voidsetTag(int key,Objecttag)

publicObjectgetTag()

publicObjectgetTag(int key)

ListView

Event処理

listview4
ListViewの前後につけるもの
  • HeaderViewとFooterView

使い道?

もっと読む や、 読み込み中 等

LayoutInflater layoutInflater = (LayoutInflater) context

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

からの

view = layoutInflater.inflate(R.layout.fortune_row, null);

slide25
時間確認

時間は?

slide26
時間確認

まだある

slide27
総合演習

最後にまとめとしてアプリを作りたいと思います

slide28
総合演習

今日のためにとっておきのアプリを準備しました

slide29
総合演習

その名も!

slide30
総合演習

告白スイッチ!!

slide31
アプリをつくっちゃお

1 誰でも告白できる

2 まさかのときでも

3 だから安心

4 とにかく迷わない

slide32
アプリをつくっちゃお

それでは作りましょう

まずは画面デザインから

slide37
質問があれば

質問受付中