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


<blockquote class="twitter-tweet" data-conversation="none" lang="ja"><p><a href="https://twitter.com/mizofumi0411">@mizofumi0411</a> <a href="http://t.co/NbR2dtWv6z">http://t.co/NbR2dtWv6z</a>&#10;このQiitaの simple_list_item1 使わずにTL取得、表示させるコードってどうやったら書けるようになるの</p>&mdash; 銀澪☆ (@Gin_Ray) <a href="https://twitter.com/Gin_Ray/status/554893789219659776">2015, 1月 13</a></blockquote>

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をセット

```java
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へ新しく情報を追加
```java
Tweet tweet = new Tweet();
tweet.setName("HogeFuga");
tweet.setTweet("あいうえおかきくけこ");
list.add(tweet);
adapter.notifyDataSetChanged();
```