AndroidのGridLayoutManagerの例を示します。
AndroidのGridLayoutManagerは、アイテムをグリッド形式で配置するためのRecyclerView.LayoutManagerの実装です。このチュートリアルでは、CardViewをRecyclerView内にGridLayout形式で表示するアプリケーションを作成します。また、RecyclerViewのアイテムをListViewのitemClickListenerに似たクリック動作にするためのインターフェースも実装します。
アンドロイドのGridLayoutManager
ここではLinearLayoutManagerを使用してRecyclerViewを実装しました。さあ、GridLayoutManagerを使用してRecyclerViewをグリッドとしてレイアウトしましょう。以下はGridLayoutManagerのコンストラクタです。
GridLayoutManager (Context context,
int spanCount,
int orientation,
boolean reverseLayout)
reverseLayoutがtrueに設定されている場合、レイアウトは終わりから始めてアイテムを配置します。各アイテムのスパンサイズを設定するために、GridLayoutManagerのsetSpanSizeLookupメソッドを呼び出します。新しいAndroid Studioプロジェクトで、GridLayoutManagerを使用してRecyclerViewを実装しましょう。
以下は、AndroidのGridLayoutManagerの例となるプロジェクトの構造です。
以下の文章を日本語でパラフレーズしてください。選択肢は1つだけ必要です：
プロジェクトは、MainActivity.java（単一のアクティビティ）、RecyclerViewAdapter.java（アダプタークラス）、DataModel.java（データモデルクラス）、AutoFitGridLayoutManager.java（カスタムのGridLayoutManagerクラス）で構成されています。MainActivity.javaクラスのxmlレイアウトは、activity_main.xmlファイルで定義されています。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
注意：build.gradleファイルにMaterial DesignウィジェットとCardViewのための以下の依存関係を追加することを忘れないでください。
compile 'com.android.support:cardview-v7:25.1.1'
compile 'com.android.support:design:25.1.1'
以下はDataModel.javaクラスです：package com.scdev.recyclerviewgridlayoutmanager;
public class DataModel {
public String text;
public int drawable;
public String color;
public DataModel(String t, int d, String c )
{
text=t;
drawable=d;
color=c;
}
}
The DataModelクラスでは、各アイテムセルのテキスト、描画可能なアイコン、および背景色を保持します。下記にはRecyclerViewAdapter.javaクラスがあります。
package com.scdev.recyclerviewgridlayoutmanager;
import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class RecyclerViewAdapter extends RecyclerView.Adapter {
ArrayList mValues;
Context mContext;
protected ItemListener mListener;
public RecyclerViewAdapter(Context context, ArrayList values, ItemListener itemListener) {
mValues = values;
mContext = context;
mListener=itemListener;
}
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
public TextView textView;
public ImageView imageView;
public RelativeLayout relativeLayout;
DataModel item;
public ViewHolder(View v) {
super(v);
v.setOnClickListener(this);
textView = (TextView) v.findViewById(R.id.textView);
imageView = (ImageView) v.findViewById(R.id.imageView);
relativeLayout = (RelativeLayout) v.findViewById(R.id.relativeLayout);
}
public void setData(DataModel item) {
this.item = item;
textView.setText(item.text);
imageView.setImageResource(item.drawable);
relativeLayout.setBackgroundColor(Color.parseColor(item.color));
}
@Override
public void onClick(View view) {
if (mListener != null) {
mListener.onItemClick(item);
}
}
}
@Override
public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(mContext).inflate(R.layout.recycler_view_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder Vholder, int position) {
Vholder.setData(mValues.get(position));
}
@Override
public int getItemCount() {
return mValues.size();
}
public interface ItemListener {
void onItemClick(DataModel item);
}
}
上記のコードでは、MainActivity.javaクラスに実装されるItemListenerインターフェースを定義しています。各RecyclerViewアイテムのためのxmlレイアウトは以下の通りです。recycler_view_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:card_view="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="150dp"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="@dimen/margin10"
card_view:cardMaxElevation="@dimen/margin10"
card_view:contentPadding="@dimen/margin10">
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:tint="@android:color/white"
android:padding="5dp" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textColor="@android:color/white"
android:layout_below="@+id/imageView" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
以下にAutoFitGridLayoutManager.javaクラスが記載されています。
package com.scdev.recyclerviewgridlayoutmanager;
import android.content.Context;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
public class AutoFitGridLayoutManager extends GridLayoutManager {
private int columnWidth;
private boolean columnWidthChanged = true;
public AutoFitGridLayoutManager(Context context, int columnWidth) {
super(context, 1);
setColumnWidth(columnWidth);
}
public void setColumnWidth(int newColumnWidth) {
if (newColumnWidth > 0 && newColumnWidth != columnWidth) {
columnWidth = newColumnWidth;
columnWidthChanged = true;
}
}
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
if (columnWidthChanged && columnWidth > 0) {
int totalSpace;
if (getOrientation() == VERTICAL) {
totalSpace = getWidth() - getPaddingRight() - getPaddingLeft();
} else {
totalSpace = getHeight() - getPaddingTop() - getPaddingBottom();
}
int spanCount = Math.max(1, totalSpace / columnWidth);
setSpanCount(spanCount);
columnWidthChanged = false;
}
super.onLayoutChildren(recycler, state);
}
}
次の文を日本語で表現すると、次のようになります：
スパン数は、利用可能な方向、幅、高さに基づいて動的に計算されます。また、以下にMainActivity.javaクラスが記載されています。
package com.scdev.recyclerviewgridlayoutmanager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements RecyclerViewAdapter.ItemListener {
RecyclerView recyclerView;
ArrayList arrayList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
arrayList = new ArrayList();
arrayList.add(new DataModel("Item 1", R.drawable.battle, "#09A9FF"));
arrayList.add(new DataModel("Item 2", R.drawable.beer, "#3E51B1"));
arrayList.add(new DataModel("Item 3", R.drawable.ferrari, "#673BB7"));
arrayList.add(new DataModel("Item 4", R.drawable.jetpack_joyride, "#4BAA50"));
arrayList.add(new DataModel("Item 5", R.drawable.three_d, "#F94336"));
arrayList.add(new DataModel("Item 6", R.drawable.terraria, "#0A9B88"));
RecyclerViewAdapter adapter = new RecyclerViewAdapter(this, arrayList, this);
recyclerView.setAdapter(adapter);
/**
AutoFitGridLayoutManager that auto fits the cells by the column width defined.
**/
/*AutoFitGridLayoutManager layoutManager = new AutoFitGridLayoutManager(this, 500);
recyclerView.setLayoutManager(layoutManager);*/
/**
Simple GridLayoutManager that spans two columns
**/
GridLayoutManager manager = new GridLayoutManager(this, 2, GridLayoutManager.VERTICAL, false);
recyclerView.setLayoutManager(manager);
}
@Override
public void onItemClick(DataModel item) {
Toast.makeText(getApplicationContext(), item.text + " is clicked", Toast.LENGTH_SHORT).show();
}
}
-
- 上記のクラスは、インターフェースRecyclerViewAdapter.ItemListenerを実装し、アダプタークラスで定義されているonItemClickメソッドをオーバーライドしています。これにより、ListViewのために定義されている標準のonItemClickListenerと同様に、アクティビティ内でRecyclerViewのクリックリスナーを実装しています。
-
- DataModelクラスは、各RecyclerViewアイテムの詳細を保持しています。
- RecyclerViewのLayoutManagerは、500と設定された列幅を持つAutoFitGridLayoutManagerクラスをインスタンス化するか、GridLayoutManagerクラスオブジェクトを呼び出して列数を2に設定することで定義することができます。
標準のGridLayoutManagerコードを使用して、アプリケーションの出力を確認しましょう。ご覧のように、各行には両方の方向で列幅を占める2つのアイテムがあります。次に、シンプルなGridLayoutManagerのコードをコメントアウトして、AutoFitGridLayoutManagerのコードを実行してください。
AutoFitGridLayoutManager layoutManager = new AutoFitGridLayoutManager(this, 500);
recyclerView.setLayoutManager(layoutManager);
アプリケーションの動作結果は、以下に示します。 上記の出力では、画面の向きが横に変わると、各行に3つのアイテムがあり、アイテムは列の幅に応じて自動的にサイズ調整されます。これでチュートリアルは終了です。最終的なAndroidのGridLayoutManagerプロジェクトは、以下のリンクからダウンロードできます。
アンドロイドのGridLayoutManagerプロジェクトをダウンロードしてください。
