【Java_Android】簡単なRecyclerViewを作成してみる(レイアウトのみ)
目次
RecyclerViewとは?
RecyclerViewとは:ListViewをさらに進化させて柔軟にしたもの
- 大きなデータセットを表示できるコンテナ
- 限られたビューを維持して効率的にスクロール可能
- ヘッダー、フッターは存在しない
- 区切り線は自身で実装する必要がある
作成準備
登場人物
- RecyclerView
- RecyclerViewそのもの
- RecyclerView.Adapter
- 1行分のデータを1行分のViewに設定して生成するもの
- RecyclerView.ViewHolder
- 1行分のView(ウィジェット)の参照を保持するもの
- RecyclerView.LayoutManager
- 1つ分のデータのサイズなどを考慮して、レスポンシブにレイアウトを管理するクラス
- Activityクラス
- RecyclerViewをセットしたり、Adapterをセットしたり(これらはUIに関わる部分なのでActivityにセットしてあげる)
実装(Adapter)
xx.xx.プロジェクト名以下にパッケージAdapter
を作成
ここで登場するメソッドは3つ(これらのメソッドはLayoutManagerによって呼び出される)
- onCreateViewHolder
- ViewHolder(ItemViewHolder)からデータを取得して、viewを生成する
- onBindViewHolder
- スクロール時にActivityに表示されるViewのデータ
- getItemCount
- Activityに表示するviewの数
クラスは1つ
- ItemViewHolder
- Viewのデータを保持するクラス
ItemAdpter.java
//ItemViewAdapter内のItemViewHolderからデータを参照してView生成する public class ItemViewAdapter extends RecyclerView.Adapter<ItemViewAdapter.ItemViewHolder> { //今回はDBからデータを取得してこないので、配列としてデータを保持(タイトルと詳細のデータが欲しいので2つ) private String[] mTitleDataset; private String[] mContentsDataset; //今回はActivityにデータをおいたのでコンストラクタから入れてるがこのクラスに書いても良い public ItemViewAdapter(String[] mtitleDataset,String[] mcontentsDataset) { mTitleDataset = mtitleDataset; mContentsDataset = mcontentsDataset; } //ItemViewAdapter.ItemViewHolderからデータ取得 @Override public ItemViewAdapter.ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { // 1. viewの生成(のち詳細解説) return new ItemViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_list,parent,false)); } //スクロール時(Activityに表示される直前)にデータをセットしてくれる(Listが使い回されるが故) @Override public void onBindViewHolder(ItemViewHolder holder, int position) { holder._itemImage.setImageResource(R.mipmap.ic_launcher); holder._itemTitle.setText(mTitleDataset[position]); holder._itemContents.setText(mContentsDataset[position]); } //2. Activityに表示するView(List)の個数 @Override public int getItemCount() { return mTitleDataset.length; } //各データ項目のビューへの参照を提供 //ビューホルダー内のデータアイテムのすべてのビューへのアクセスを提供 public static class ItemViewHolder extends RecyclerView.ViewHolder{ public ImageView _itemImage; public TextView _itemTitle; public TextView _itemContents; //construct(xmlからデータ取得) public ItemViewHolder(View itemView){ super(itemView); _itemImage = (ImageView) itemView.findViewById(R.id.itemImage); _itemTitle = (TextView) itemView.findViewById(R.id.itemTitle); _itemContents = (TextView) itemView.findViewById(R.id.itemContents); } } }
1. inflate
LayoutInflaterは、指定したxmlのレイアウト(View)リソースを利用できる仕組み
@Override public ItemViewAdapter.ItemViewHolder onCreateViewHolder(ViewGroup parent,int viewType) { // create a new view return new ItemViewHolder(LayoutInflater.from(parent.getContext()) .inflate(R.layout.item_list,parent,false)); }
new ItemViewHolder
でviewを生成from
,inflate
はLayoutInflater
のメソッドなので、2つに切り分けて考察するLayoutInflater.from(parent.getContext())
= x(仮)x.inflate(R.layout.item_list,parent,false))
LayoutInflater.from(parent.getContext())
parent.getContext()
の値を見てみると、xx.MainActivity@b118879
と出力(MainActivityにAdapterをセットしてるから?)
x.inflate(R.layout.item_list,parent,false))
R.layout.item_list,
をparent(MainActivity)
に適応させる。attachToRoot(ルート直下に適応)はしない
LayoutInflater.from(parent.getContext())
.inflate(R.layout.item_list,parent,false)
この文章を簡単に日本語訳するとおそらく下記のようになる
取得した親要素であるMainActivityにitem_list.xmlを適応する。
2. getItemCount() (表示するViewの個数)
//2. Activityに表示するView(List)の個数 @Override public int getItemCount() { return mTitleDataset.length; }
reuturn mTitleDataset.lengthとした場合
return 2とした場合
実装(Activity)
- RecyclerViewそのもののセット
- LayoutManagerのセット
- Adapterのセット
今回はrecyclerViewのセットをメソッドとして切り出した。
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); createRecyclerView(); } private void createRecyclerView(){ String[] mtitleDataset = {//何かしらのデータ}; String[] mcontentsDataset = {//何かしらのデータ}; //RecyclerViewそのもののセット RecyclerView recyclerView = findViewById(R.id.itemsView); recyclerView.setHasFixedSize(true); //LayoutManagerのセット LinearLayoutManager layoutManager = new LinearLayoutManager(this); recyclerView.setLayoutManager(layoutManager); //Adapterのセット ItemViewAdapter mAdapter = new ItemViewAdapter(mtitleDataset,mcontentsDataset); recyclerView.setAdapter(mAdapter); }
xmlファイルのコードのみ
<ImageView android:id="@+id/itemImage" android:layout_width="66dp" android:layout_height="73dp" android:layout_marginStart="24dp" android:layout_marginTop="38dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@android:color/holo_green_light" /> <TextView android:id="@+id/itemTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="38dp" app:layout_constraintStart_toEndOf="@+id/itemImage" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/itemContents" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="32dp" android:layout_marginTop="16dp" app:layout_constraintStart_toEndOf="@+id/itemImage" app:layout_constraintTop_toBottomOf="@+id/itemTitle" />
これで作れるはず。
今回知った知識
markdownの画像リサイズ
画像サイズ変更するときに下記のようにすると、リサイズできる
[f:id:xxx:plain]
->[f:id:xxx:plain:w200]
ソースコードに色つける
「```java」などのように先頭に言語名をつければ色つけてくれる