ListView のアイテムをカスタマイズする|Android開発

2019.06.20 2019.06.20

ListViewに設定するデータとアイテムの表示をカスタマイズする方法です。

リストアイテムをカスタマイズするための準備

リストアイテムをカスタマイズするために、以下のファイルやクラスを用意します。

リストアイテムのレイアウト

レイアウトファイルでリストアイテムに設定するViewをレイアウトファイルに定義します。今回は画像＋文字列を表示するレイアウトにしました。

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

    <ImageView
        android:id="@+id/list_icon"
        android:scaleType="fitCenter"
        android:layout_margin="8dp"
        android:layout_width="24dp"
        android:layout_height="24dp"/>

    <TextView
        android:id="@+id/list_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

データ定義クラス

リストアイテム用のデータクラスを作成します。このクラスは1行分のデータを保持します。

public class CustomData {

    private Bitmap mBmp;

    private String mText;

    public CustomData(Context context, int imageId, String text) {
        mBmp = BitmapFactory.decodeResource(context.getResources(), imageId);
        setText(text);
    }

    public Bitmap getBmp() {
        return mBmp;
    }

    public void setBmp(Bitmap bmp) {
        mBmp = bmp;
    }

    public String getText() {
        return mText;
    }

    public void setText(String text) {
        if (StringUtils.isEmpty(text)) {
            text = StringUtils.EMPTY;
        }
        mText = text;
    }
}

専用のアダプタクラス

BaseAdapterを継承して、データとビューを繋ぐアダプタクラスを作成します。このクラスで全データを保持します。
getView()でViewにデータを設定します。

public class CustomDataArrayAdapter extends BaseAdapter {

    private final LayoutInflater mInflater;

    private final Context mContext;

    private final int mResource;

    private List<CustomData> mObjects;

    public CustomDataArrayAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull List<CustomData> objects) {
        mObjects = objects;
        mContext = context;
        mInflater = LayoutInflater.from(context);
        mResource = resource;
    }

    public CustomDataArrayAdapter(@NonNull Context context, @LayoutRes int resource, @NonNull CustomData[] objects) {
        this(context, resource, Arrays.asList(objects));
    }

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

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

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = mInflater.inflate(mResource, parent, false);
        }

        CustomData item = (CustomData) getItem(position);

        ImageView icon = convertView.findViewById(R.id.list_icon);
        icon.setImageBitmap(item.getBmp());
        TextView text = convertView.findViewById(R.id.list_text);
        text.setText(item.getText());

        return convertView;
    }
}

実際に表示してみる

CustomDataArrayAdapterを生成時にアイテムのレイアウトを第2引数で渡します。

public class CustomListViewFragment extends Fragment {

    private final int[] mmBmpIds = new int[] { R.drawable.icon1, R.drawable.icon2, R.drawable.icon3 };

    private final String[] mmTexts = new String[] { "Custom List item 1", "Custom List item 2", "Custom List item 3" };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.list_layout, container, false);
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        List<CustomData> array = new ArrayList<>();
        array.add(new CustomData(getActivity().getApplicationContext(), mmBmpIds[0], mmTexts[0]));
        array.add(new CustomData(getActivity().getApplicationContext(), mmBmpIds[1], mmTexts[1]));
        array.add(new CustomData(getActivity().getApplicationContext(), mmBmpIds[2], mmTexts[2]));

        ListView listView = getActivity().findViewById(R.id.list_view_normal);
        CustomDataArrayAdapter adapter = new CustomDataArrayAdapter(getActivity().getApplicationContext(), R.layout.custom_list_item, array);
        listView.setAdapter(adapter);
    }
}

R.layout.list_layoutはid=list_view_normalのListViewを1つ含んだレイアウトです。