リストコントロール ListView－基本的な使い方
これは非常によく使われるコントロールです。
画面のスペースは限られていますが、このコントロールを使うことで、画面上により多くのデータを表示できます。
指で上下にスワイプすることで、画面外のデータを画面内に表示できます。
基本的な使い方
新しく TestListView プロジェクトを作成します。
レイアウトに以下のコードを追加して ListView を配置します。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>Code language: HTML, XML (xml)データソースの初期化
public class MainActivity extends AppCompatActivity {
private String[] courses = {"Java入門", "Android入門", "C#入門", "C言語", "ASP.NET MVC"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, courses);
ListView listView = (ListView) findViewById(R.id.listview1);
listView.setAdapter(adapter);
}
}Code language: JavaScript (javascript)これらのデータは、ネットワークからダウンロード（Web API など）、データベースから読み込む、あるいはコード内で文字列配列として直接定義することも可能です。
データを ListView に直接渡すことはできないため、アダプターを介して行います。
Android には多くのアダプターが用意されていますが、ここでは ArrayAdapter を使用します。
ListView の子レイアウトとして android.R.layout.simple_list_item_1 を使用します。
これは Android に組み込まれたレイアウトファイルで、TextView が1つだけ配置されており、テキストを表示します。
リストコントロール ListView－インターフェースのカスタマイズ
単にテキストを表示するだけでは少し寂しいですね
リスト項目により豊富なコンテンツを表示できるようにしましょう。
Book エンティティクラスを追加
package com.foxdevelop.www.testlistview;
public class Book {
private String name;
private int imageId;
public Book (String name, int imageId) {
this.name = name;
this.imageId = imageId;
}
public String getName() {
return name;
}
public int getImageId() {
return imageId;
}
}Code language: PHP (php)Book 用のレイアウトファイルを追加
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageid"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="12dp"
/>
</LinearLayout>Code language: HTML, XML (xml)カスタムアダプター
package com.foxdevelop.www.testlistview;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class BookAdapter extends ArrayAdapter<Book> {
private int resource;
public BookAdapter(@NonNull Context context, int resource, @NonNull List<Book> objects) {
super(context, resource, objects);
this.resource = resource;
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
Book book = getItem(position);
View view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
imageView.setImageResource(book.getImageId());
TextView name = (TextView) view.findViewById(R.id.name);
name.setText(book.getName());
return view;
}
}Code language: JavaScript (javascript)アクティビティの onCreate でデータソースを初期化
package com.foxdevelop.www.testlistview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<Book> courses = new ArrayList<Book>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LoadBooks();
BookAdapter adapter = new BookAdapter(MainActivity.this, R.layout.booklistview, courses);
ListView listView = (ListView) findViewById(R.id.listview1);
listView.setAdapter(adapter);
}
private void LoadBooks() {
courses.add(new Book("人類思想史上第一", R.drawable.access));
courses.add(new Book("搾取段階政治", R.drawable.book));
courses.add(new Book("古代インド法の貴重な文献", R.drawable.bookmarks));
courses.add(new Book("欽定ローマ私法教科書", R.drawable.center));
courses.add(new Book("知識は力なり", R.drawable.date));
courses.add(new Book("私の民法典は永遠に存在する", R.drawable.clock));
courses.add(new Book("アメリカ民主主義を研究する古典", R.drawable.ftp));
courses.add(new Book("西洋国際法権威教材", R.drawable.notes));
courses.add(new Book("歴史的真実に最も近い力作", R.drawable.set));
courses.add(new Book("宗教改革の鏡", R.drawable.energy));
courses.add(new Book("神学の秘密は人本学", R.drawable.tux));
courses.add(new Book("300年以上前に中国に紹介された名作", R.drawable.science));
courses.add(new Book("偽君子を描いた千古の傑作", R.drawable.joystick));
courses.add(new Book("壁のない名門大学", R.drawable.center));
courses.add(new Book("人類思想史上初のユートピア方案", R.drawable.access));
}
}Code language: JavaScript (javascript)以下の設定を行うことで
android:orientation=”horizontal”
横並びに表示できます。
ListView のパフォーマンス最適化
現在、アクティビティを開くたびにデータソースを読み込んでいるため、実行効率に影響します。View をキャッシュすることで速度を向上させられます。
convertView を確認することで、毎回 View を取得する必要がなくなります。
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
Book book = getItem(position);
View view;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
} else {
view = convertView;
}
ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
imageView.setImageResource(book.getImageId());
TextView name = (TextView) view.findViewById(R.id.name);
name.setText(book.getName());
return view;
}Code language: PHP (php)コントロールをキャッシュする
ImageView と TextView を保持するクラスを定義します。
class ViewData {
ImageView imageUI;
TextView textViewUI;
}Code language: JavaScript (javascript)package com.foxdevelop.www.testlistview;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;
public class BookAdapter extends ArrayAdapter<Book> {
private int resource;
public BookAdapter(@NonNull Context context, int resource, @NonNull List<Book> objects) {
super(context, resource, objects);
this.resource = resource;
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
Book book = getItem(position);
View view;
ViewUI viewUI;
if (convertView == null) {
view = LayoutInflater.from(getContext()).inflate(resource, parent, false);
ImageView imageView = (ImageView) view.findViewById(R.id.imageid);
TextView textView = (TextView) view.findViewById(R.id.name);
viewUI = new ViewUI();
viewUI.imageUI = imageView;
viewUI.textViewUI = textView;
view.setTag(viewUI);
} else {
view = convertView;
viewUI = (ViewUI) view.getTag();
}
viewUI.imageUI.setImageResource(book.getImageId());
viewUI.textViewUI.setText(book.getName());
return view;
}
class ViewUI {
ImageView imageUI;
TextView textViewUI;
}
}Code language: JavaScript (javascript)ListView のクリックイベント
ListView の項目にクリックイベントを追加します。
例えば、項目をクリックしたときに本の名前を表示するように実装します。
メインアクティビティの onCreate 内で：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LoadBooks();
BookAdapter adapter = new BookAdapter(MainActivity.this, R.layout.booklistview, courses);
final ListView listView = (ListView) findViewById(R.id.listview1);
listView.setAdapter(adapter);
// クリックイベント
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
Book b = courses.get(i);
Toast.makeText(MainActivity.this, b.getName(), Toast.LENGTH_LONG).show();
}
});
}Code language: PHP (php)gradle の dependencies にライブラリを追加
Configuration ‘compile’ is obsolete and has been replaced with ‘implementation’ and ‘api’.
2018年末に削除される予定です。詳細はこちら：http://d.android.com/r/tools/update-dependency-configurations.html
以下の依存ライブラリのサポートを追加する必要があります：
android.support.v7.widget.RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/testrecy"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>Code language: HTML, XML (xml)スクロールコントロール RecyclerView の使用－1
ListView は非常に強力で、現在も多くのアプリで使われています。
しかし、パフォーマンスがやや劣り、拡張性にも欠けます。
データの縦スクロールしか実装できず、横スクロールは不可能です。
RecyclerView は ListView の強化版です。
ListView と同じ効果を実現でき、さらにその欠点を改善しています。
公式には RecyclerView の使用が推奨されています。
基本的な使い方
まず、gradle に以下を追加してください：
compile ‘com.android.support:recyclerview-v7:27.1.1’
前のセクションで、別の RecyclerView を追加しました。
<android.support.v7.widget.RecyclerView
android:id="@+id/testrecy"
android:layout_width="match_parent"
android:layout_height="match_parent"/>Code language: HTML, XML (xml)引き続き、本の例を使用します。
Previous: レイアウト
Next: Adapter 内でコントロールが取得できない