【Android】カスタムデザインのListViewを表示する

村上 著者:村上

【Android】カスタムデザインのListViewを表示する

Android の ListView は、昔作成したことがあるのですが、いかんせん昔過ぎてほとんど忘れていたので備忘録もかねてまとめ。
ちなみに、すでに用意されているレイアウトを使うのではなく、リストアイテムのレイアウトからカスタムする方法です。

今回参考にさせていただいたサイトはこちら。

Androidでリストビュー(ListView)をカスタムして表示する – Qiita
https://qiita.com/ksugawara61/items/2d63f0be279a94b74550

 

早速実装!
まず、作成するファイルの一覧は下記のとおりです。
・MainActivity.java
・activity_main.xml
・list_item.xml
・ListItem.java
・ListAdapter.java

MainActivity.java に追加するコードは下記のとおり。

ListItem item = new ListItem();
// item にデータ追加処理を行う

ListView listView = findViewById([ListViewのID]);
ListAdapter adapter = new ListAdapter(this, R.layout.list_item, item);
listView.setAdapter(adapter);
listView.setOnItemClickListener((adapterView, view, position, l) -> {
    // ListViewのアイテムクリック時の処理
});

activity_main.xml ファイルには、ListView を追加します。

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/[ListViewのID]" />

ListItem.java には、ListView で使う値を扱えるクラスを定義します。

public class ListItem {
    private String entry_title;
    private String adate;
    private String url;

    public EntryListItem() {};

    public EntryListItem(String e_entry_title, String e_adate, String e_url) {
        entry_title = e_entry_title;
        adate = e_adate;
        url = e_url;
    }

    public void setEntryTitle(String title) {
        entry_title = title;
    }

    public void setAdate(String e_adate) {
        adate = e_adate;
    }

    public void setUrl(String e_url) {
        url = e_url;
    }

    public String getEntryTitle() {
        return entry_title;
    }

    public String getAdate() {
        return adate;
    }

    public String getUrl() {
        return url;
    }
}

ブログ記事を扱うことを想定しているので、それらの値が格納されるようになっています。
値の格納と取得を行うための関数も定義しています。

ListAdapter.java は、ArrayAdapter を継承していて、上の ListItem.java クラスを利用するためのクラスです。

public class ListAdapter extends ArrayAdapter<ListItem> {

    private int mResource;
    private List<ListItem> mItems;
    private LayoutInflater mInflater;

    public EntryListAdapter(Context context, int resource, List<ListItem> items) {
        super(context, resource, items);

        mResource = resource;
        mItems = items;
        mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view;

        if (convertView != null) {
            view = convertView;
        }
        else {
            view = mInflater.inflate(mResource, null);
        }

        // リストビューに表示する要素を取得
        ListItem item = mItems.get(position);

        // タイトル、投稿日時を設定
        TextView title = view.findViewById(R.id.title);
        title.setText(item.getEntryTitle());
        TextView adate = view.findViewById(R.id.adate);
        adate.setText(item.getAdate());

        return view;
    }
}

ListView にセットする Adapter がこのクラスです。

 

以上のコードとファイルを作成すると、カスタマイズされた ListView を実装することができます。
覚え書きのため、かなり簡単なまとめになっているので、もっと詳しく知りたい方は、最初に紹介した参考サイトを読んでください。

  • この記事いいね! (0)

著者について

村上

村上 administrator