Android one が開発した RecyclerView の使用

目次

1. RecyclerView.ViewHolder から継承するクラスを作成します。

2. RecyclerView.Adapter を継承するアダプターを作成する

3.レイアウト

4. アクティビティで RecyclerView を使用します。

レイアウトマネージャーの使い方

StaggeredGridLayoutManager の使用

XRecyclerViewDivider の使用

---

1. RecyclerView.ViewHolder から継承するクラスを作成します。

パラメータとして itemView を受け取ることができます。コンストラクターで、TextView を参照する変数を作成し、アイテム レイアウト内の対応するビューをポイントします。次に bindDateToView() 関数をカスタマイズして、データを UI に関連付けます。

class MyViewHolder extends RecyclerView.ViewHolder {
    public TextView textview;
    public MyViewHolder(@NonNull View itemView) {
        super(itemView);
        textview= (TextView) itemView.findViewById(R.id.textview);
    }
    public void bindDateToView(String s){
        textview.setText(s);
    }
}

2. RecyclerView.Adapter を継承するアダプターを作成する

onCreateViewHolder() をオーバーライドします。このメソッドでは、 RecyclerView テーブル アイテム ビューを初期化して設定します。

    //创建每一行的View 用RecyclerView.ViewHolder包装
    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView=inflater.inflate(R.layout.recycler_item,null);
        return new MyViewHolder(itemView);
    }

onBindViewHolder() をオーバーライドします。When onBindViewHolder() called, parameters  ViewHolder and a position is passed in. このメソッドでは、データが ViewHolder の bindDateToView メソッドに渡され、データが対応する UI にバインドされます。

 //每一行的View填充数据
    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
       holder.bindDateToView(datas.get(position));
    }

getItemCount() をオーバーライドすると、RecyclerView はリストを表示するため、リスト内の項目数を知る必要があるため、データ ソースの長さを返します。

    //数据的数量
    @Override
    public int getItemCount() {
        return datas.size();
    }

3.レイアウト

<androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 

4. アクティビティで RecyclerView を使用します。

recyclerView オブジェクトを作成したら、setLayoutManager メソッドを呼び出してレイアウト マネージャーを追加する必要があります。同時に、addItemDecoration で区切り線を追加する必要があります。もちろん、setAdapter を呼び出してアダプターを設定する必要もあります。

    private RecyclerView recyclerView;
    private List<String> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test);
        initData();
        recyclerView = findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));//设置布局管理器
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayout.VERTICAL));
        recyclerView.setAdapter(new RecyclerViewAdapter(this, datas));
    }

実行効果は次のとおりです。

レイアウトマネージャーの使い方

RecyclerView で異なるリストを実装するには、異なる LayoutManager を切り替えるだけです。RecyclerView.ItemDecoration と同様に、RecyclerView.LayoutManager は RecyclerView の静的抽象内部クラスですが、LayoutManager には公式に記述された 3 つの実装クラスがあります。

• LinearLayoutManager リニア レイアウト マネージャーは、ListView と機能が似ています。
• GridLayoutManager グリッド レイアウト マネージャーは、GridView 関数に似ています。
• StaggeredGridLayoutManager ウォーターフォール フロー レイアウト マネージャー

先ほど LinearLayoutManager を使用しましたが、今度は GridLayoutManager に切り替えます。

recyclerView.setLayoutManager(new GridLayoutManager(this,2));

分割線も追加

  recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayout.VERTICAL));
  recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayout.HORIZONTAL));

実行結果:

StaggeredGridLayoutManager の使用

RecyclerView に StaggeredGridLayoutManager を追加します。コード例は次のとおりです。

 //瀑布流效果
 recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,LinearLayout.VERTICAL));
 recyclerView.setAdapter(new RecyclerViewAdapter(this, datas));

高さの値をデータ ソースに保存し、取得した高さの値をホルダーの bindDateToView 内の ItemView に設定して、ウォーターフォール効果を実現します。

public void bindDateToView(ItemData data){
        textview.setText(data.getStr());
        textview.setHeight(data.getHeight());
    }

ウォーターフォール フロー リストは分割線を追加せず、アイテムにパディング属性を追加することで分割線の効果を実現します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:background="@color/teal_200"
    >
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/purple_200"
        android:gravity="center_vertical"
        android:paddingLeft="20dp"
        android:background="@color/white"
        />

</LinearLayout>

実行効果は次のとおりです。

 

エフェクトダイアグラムの真ん中の間隔が左右に比べて広いのが分かりますが、これはアイテムごとに上下左右にパディングが設定されているため、 2 つの隣接するアイテムの幅が広くなります。

XRecyclerViewDivider の使用

XRecyclerViewDivider は、ほとんどの問題を解決する非常に便利なディバイダーです。ここで XRecyclerViewDivider の簡単な使い方についてお話ししましょう。最初にプロジェクトにライブラリを導入し、モジュールの build.gradle ファイルに追加します。

dependencies {
    implementation 'com.github.HHotHeart:XRecyclerViewDivider:1.0.1'
    ...
}

プロジェクトの build.gradle ファイルに次を追加します。

allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

アクティビティでの使用は次のとおりです。

  recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, LinearLayout.VERTICAL));
        XStaggeredGridBuilder itemDecoration =  new XStaggeredGridBuilder(this)
                //分割线间距，支持float dp 和DimenRes dp
                .setSpacing(2f)//这几个Spacing的优先级可看XGridBuilder说明
                .setVLineSpacing(8f)
                .setHLineSpacing(8f)
                //是否包括边界
                .setIncludeEdge(true)
                //是否忽略FullSpan的情况
                .setIgnoreFullSpan(true)
        ;
        recyclerView.addItemDecoration(itemDecoration.build());
        recyclerView.setAdapter(new RecyclerViewAdapter(this, datas));

ランニング効果は次のようになります. 左右の間隔を含め、すべての間隔が同じであることがわかります。

XRecyclerViewDivider の GitHub ポータル

ここでは RecyclerView の簡単な使い方を紹介します。ありがとうございます。