こんにちは、イトナブ石巻のとみぎです。
今回は、MaterialDesignで追加されたウィジェットの1つ、RecyclerViewを使ったサンプルを作成してみました。
RecyclerViewは、従来のListViewやGridViewのような表示を、コードで自在に変更させる事が可能なようです。
今回はボタンでそれぞれのレイアウトを切り替えるようなサンプルを作ってみました。
まずはサンプルアプリのイメージから。
ListViewのような表示
GridViewのような表示
このように、同じRecyclerViewなのに、ボタン(メソッド)1つで表示を切り替える事ができます。
では、コードを紹介します。
【build.gradle】
apply plugin: 'com.android.application'
android {
compileSdkVersion 22
buildToolsVersion "22.0.1"
defaultConfig {
applicationId "jp.itnav.tomigie.recyclerviewsample"
minSdkVersion 14
targetSdkVersion 22
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.0.0'
compile 'com.android.support:recyclerview-v7:22.0.0'
compile 'com.android.support:cardview-v7:22.0.0'
}
【BaseActivity】
package jp.itnav.tomigie.recyclerviewsample;
import android.app.Activity;
import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import java.util.ArrayList;
public abstract class BaseActivity extends ActionBarActivity implements View.OnClickListener {
protected ArrayList<String> getDataList(int dataSize) {
ArrayList<String> dataList = new ArrayList<>();
for (int i = 1; i <= dataSize; i++) {
dataList.add("card" + i);
}
return dataList;
}
protected void startNewActivity(Class<Activity> activity) {
Intent intent = new Intent(this, activity);
startActivity(intent);
}
}
【RecyclerViewAdapter】
package jp.itnav.tomigie.recyclerviewsample;
import android.content.Context;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
private LayoutInflater mLayoutInflater;
private ArrayList<String> mDataList;
private Context mContext;
public RecyclerViewAdapter(Context context, ArrayList<String> dataList) {
super();
mContext = context;
mLayoutInflater = LayoutInflater.from(context);
mDataList = dataList;
}
@Override
public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = mLayoutInflater.inflate(R.layout.card, parent, false);
return new ViewHolder(v);
}
@Override
public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) {
final String data = mDataList.get(position);
holder.text.setText(data);
holder.cardView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// カードをクリックした時の処理
Toast.makeText(mContext, data + " clicked", Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return mDataList.size();
}
static class ViewHolder extends RecyclerView.ViewHolder {
TextView text;
CardView cardView;
RecyclerView recyclerView;
public ViewHolder(View v) {
super(v);
text = (TextView) v.findViewById(R.id.cardArticleTitle);
cardView = (CardView) v.findViewById(R.id.cardView);
recyclerView = (RecyclerView) v.findViewById(R.id.recyclerView);
}
}
}
【MainActivity】
package jp.itnav.tomigie.recyclerviewsample;
import android.os.Bundle;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;
import android.widget.Button;
public class MainActivity extends BaseActivity {
RecyclerView mRecyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setLayouts();
}
@Override
public void onClick(View v) {
int id = v.getId();
if (id == R.id.buttonLinear) {
setLinearRecyclerView();
}
else if (id == R.id.buttonGrid) {
setGridRecyclerView();
}
else if (id == R.id.buttonStaggered) {
setStaggeredGridRecyclerView();
}
}
public void setLayouts() {
mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
setLinearRecyclerView();
mRecyclerView.setHasFixedSize(true);
mRecyclerView.setAdapter(new RecyclerViewAdapter(this, getDataList(20)));
Button linear = (Button) findViewById(R.id.buttonLinear);
Button grid = (Button) findViewById(R.id.buttonGrid);
Button staggered = (Button) findViewById(R.id.buttonStaggered);
linear.setOnClickListener(this);
grid.setOnClickListener(this);
staggered.setOnClickListener(this);
}
public void setLinearRecyclerView() {
mRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
}
public void setGridRecyclerView() {
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));
}
public void setStaggeredGridRecyclerView() {
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
}
}
【activity_main.xml】
<RelativeLayout 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">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_above="@+id/linearLayout" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="@+id/linearLayout">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Linear"
android:id="@+id/buttonLinear"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Grid"
android:id="@+id/buttonGrid"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Staggered"
android:id="@+id/buttonStaggered"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
【card.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="wrap_content"
android:weightSum="1"
android:id="@+id/cardLayout"
android:elevation="10dp">
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:foreground="?android:attr/selectableItemBackground"
android:id="@+id/cardView"
android:layout_marginBottom="10dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:id="@+id/cardRelative"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/cardArticleImage"
android:src="@mipmap/ic_launcher"
android:adjustViewBounds="true"
android:scaleType="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="CardView"
android:id="@+id/cardArticleTitle"
android:textSize="13sp"
android:gravity="center_vertical"
android:textColor="#ffffffff"
android:background="#96000000"
android:padding="10dp"
android:layout_gravity="bottom" />
</FrameLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
以上です。
レイアウトの変更はRecyclerViewのsetLayoutManageで、変更したい引数を渡すだけなので、思ったよりも簡単に変更ができました。
この他にも、雑誌のようなちぐはぐしたGrid表示(StaggeredGridっていうらしい)など、まだまだカスタムができるようなので、またカスタムしたサンプルができたら紹介しようかなと思います。
今回のサンプルはGitHubにもアップロードしましたので以下にリンクを添付しておきます。
GitHub - RecyclerViewSample
ではでは。
posted by
とみぎ
