ListViewの行にカスタムレイアウトを使う方法

@mizofumi0411 http://t.co/NbR2dtWv6z このQiitaの simple_list_item1 使わずにTL取得、表示させるコードってどうやったら書けるようになるの

— 銀澪☆ (@Gin_Ray) 2015, 1月 13

Twitterにて上記の質問を受けたのでsimple_list_item1を使わないでTLなんかを表示する方法を書きます。

おおまかに考えると

インターネット等から取得した情報は全てListに持たせるのでListとViewを橋渡しするものが必要となります。
そこで自作のAdapterを用意することで画像やテキストなどをViewに表示させる事ができます。
以下、その手順を書いていきます。

1. Listに持たせるオブジェクトを作成

今回はID,名前,ツイート本文を持たせるためにGetter/Setterを持つクラスを作成します。

Tweet.java

import java.util.Date;

public class Tweet {
    long id;
    String name;
    String tweet;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getTweet() {
        return tweet;
    }

    public void setTweet(String tweet) {
        this.tweet = tweet;
    }
}

2. ListViewの行に使うレイアウトファイルを作成する

ここでは簡単に名前とツイート本文を表示させるためにTextViewを2つ置きます。

tweetrow.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="name"
        android:id="@+id/name"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_margin="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="tweet"
        android:id="@+id/tweet"
        android:layout_below="@+id/name"
        android:layout_alignStart="@+id/name" />

</RelativeLayout>

3. カスタムしたAdapterを作成する

BaseAdapterを継承したカスタムAdapterを作成します。
このAdapter#getView()内で先ほど作成したListViewの行のレイアウトファイルを指定しTextViewに名前やツイート本文を格納します。

TimeLineAdapter.java

public class TimeLineAdapter extends BaseAdapter {

    Context context;
    LayoutInflater layoutInflater = null;
    ArrayList<Tweet> tweetList;

    public TimeLineAdapter(Context context) {
        this.context = context;
        this.layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public void setTweetList(ArrayList<Tweet> tweetList) {
        this.tweetList = tweetList;
    }

    @Override
    public int getCount() {
        return tweetList.size();
    }

    @Override
    public Object getItem(int position) {
        return tweetList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return tweetList.get(position).getId();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = layoutInflater.inflate(R.layout.tweetrow,parent,false);

        ((TextView)convertView.findViewById(R.id.name)).setText(tweetList.get(position).getName());
        ((TextView)convertView.findViewById(R.id.tweet)).setText(tweetList.get(position).getTweet());

        return convertView;
    }
}

4. ActivityあるいはFragmentにListViewを設置

そのままListViewを置きます。

mainactivity.xml

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</android.support.constraint.ConstraintLayout>

5. ListViewにAdapterをセット

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView listView = (ListView)findViewById(R.id.listView);
        
        ArrayList<Tweet> list = new ArrayList<>();
        TimeLineAdapter adapter = new TimeLineAdapter(MainActivity.this);
        adapter.setTweetList(list);
        listView.setAdapter(adapter);
        
    }
    
}

以上でListViewに複数の情報を持たせるものが出来ました。
ViewHolderとか持たせたりするのは今回は省略しました。
Adapter内で画像を取り扱う際にズレたりする問題の対策も省略。

ListViewへ新しく情報を追加

Tweet tweet = new Tweet();
tweet.setName("HogeFuga");
tweet.setTweet("あいうえおかきくけこ");
list.add(tweet);
adapter.notifyDataSetChanged();