Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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();
mizofumi0411
普段はスパムメールの対策に関わるBEの開発をやってます
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした