Android study part3

38
実践 ANDROIDアプリ開発 @JX通信社 酒本伸也 2015/8/21

Transcript of Android study part3

Page 1: Android study part3

実践ANDROIDアプリ開発

@JX通信社酒本伸也2015/8/21

Page 2: Android study part3

LIST

Page 3: Android study part3

LISTVIEW

• ほとんどのアプリで使われるWidget

• 同じセルを繰り返すデザイン

Page 4: Android study part3

• ListView

• スクロールは

デフォルトである

• cell

• 繰り返す要素

v

Page 5: Android study part3

必要なもの• ListView

• レイアウトで定義済み

• Adapter

• ListViewやGridViewのような子要素が定義されたView(AdapterView)とDataをつなぐ役割

• Data

• ListViewに表示させたいデータのリスト(前回取得済み)

Page 6: Android study part3

ListViewを現在のレイアウトから取得

Page 7: Android study part3

 ダミーのデータを生成(取得した記事データを用いる)

Page 8: Android study part3

Adapterを生成してListViewにセット

Page 9: Android study part3

android.R.layout.simple_list_item_1デフォルトで用意されているcellのレイアウト

v

Page 10: Android study part3

• Dataが入っている

Page 11: Android study part3

TextViewしか用意されていない

android.R.layout.simple_list_item_1

Page 12: Android study part3

カスタムLISTVIEW

Page 13: Android study part3

カスタムLISTVIEW

• cellのレイアウトを定義

• Adapterを定義

• Dataを詰める

• Dataを描画

Page 14: Android study part3

CELLレイアウト

Page 15: Android study part3

ADAPTERを定義

• ArrayAdapterを継承する

• 必要なデータはコンストラクタに含める

• 適切なメソッドをOverrideする

Page 16: Android study part3

ARRAYADAPTERを継承• <>の中はDataの型にする

• コンストラクタの引数はメンバに渡す

Page 17: Android study part3

OVERRIDEが必要なメソッド

• getCount()

• getItem(int position)

• getView(int position, View convertView, ViewGroup parent)

Page 18: Android study part3

• getCount()

• 描画するcellの数を決める。Dataの個数を返す。

• getItem(int position)

• 現在のcellの位置に応じたDataを返す

• getView(int position, View convertView, ViewGroup parent)

• 描画するcellを返す

Page 19: Android study part3

• getCount()

• getItem(int position)

Page 20: Android study part3

• position: リスト内での位置

• convertView: cell

• parent: ListView

Page 21: Android study part3

• convertViewに

定義したLayoutを読み込ませる

• Layout(RelativeとかLinearをか)を定義してあるのでnull

Page 22: Android study part3

• mArticleList.get(position)でDataを取得

• 定義したLayoutへアクセスし、Dataを詰める

Page 23: Android study part3

• 定義したLayoutの各要素に

都度アクセスするのは

パフォーマンスが悪い

Page 24: Android study part3

VIEWHOLDERパターン

• ViewHolder(名前はなんでも良い)クラスを

内部に作成し、要素へのアクセスを

高速化する

Page 25: Android study part3

VIEWHOLDER• 各Widgetへのアクセスを持つのみ

• インナークラスとして定義

Page 26: Android study part3

• setTag/getTag(Object)でViewHolderを保持

Page 27: Android study part3

• こんな感じ

Page 28: Android study part3

• 画像はどうした

Page 29: Android study part3

非同期

• 画像は端末内にない場合、http通信をして取得してくる必要がある

• 非同期で処理を行わないとListViewが固まる

Page 30: Android study part3

PICASSO

Page 31: Android study part3

PICASSO

• 画像まわりのライブラリ

• 非同期で取得や、キャッシュもしてくれる

Page 32: Android study part3

BUILD.GRADLE

• compile 'com.squareup.picasso:picasso:2.5.2'

Page 33: Android study part3

一行

• Picasso.with(mContext).load(Uri.parse(url)).into(mImageView);

Page 34: Android study part3

 詳細

• http://qiita.com/hotchemi/items/33ebd5faa42d2d05c2b6

Page 35: Android study part3

クリックイベント

• ListViewに対して、Buttonと同じように実装する

Page 36: Android study part3

• setOnItemClickListener

• setOnClickListenerではない

• ListViewに対してのリスナー

Page 37: Android study part3

• AdapterからDataを取得する

Page 38: Android study part3

• タイトルが表示される!