根据(https://developer.android.com/intl/zh-cn/training/material/lists-cards.html)简单的学习了使用RecyclerView 和 CardView 来创建列表与卡片后,就想怎么让一个RecyclerView 根据数据呈现不同类型的CardView.
具体步骤:
PS:如果创建CardView和RecyclerView的方式都知道的话可以直接跳到第三步
第一步
:RecyclerView和Cardview 是Support Library的一部分。所以只需要在app/build.gradle中添加以下依赖,便能立即使用
compile 'com.android.support:cardview-v7:24.0.0-alpha1'
compile 'com.android.support:recyclerview-v7:24.0.0-alpha1'
第二步
创建cardview 和RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="160dp"
app:cardElevation="8dp"
android:layout_marginTop="4dp"
android:layout_margin="16dp"
app:cardBackgroundColor="@color/title_cardview">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:id="@+id/text"
android:textColor="@color/white"
android:layout_margin="16dp"
android:text="日期"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/date"
android:text="@string/date"
android:textSize="16sp"
android:textColor="@color/white"
android:layout_marginLeft="0dp"
android:layout_alignTop="@+id/text"
android:layout_toEndOf="@+id/text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:textSize="32sp"
android:text="@string/task"
android:layout_below="@+id/text"
android:layout_alignStart="@+id/text"
android:id="@+id/textView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="添加任务"
android:textColor="@color/white"
style="?attr/borderlessButtonStyle"
android:id="@+id/button"
android:layout_above="@+id/textView"
android:layout_alignParentEnd="true"
android:layout_marginEnd="25dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
第二个: cardviewtwo.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="160dp"
app:cardElevation="8dp"
android:layout_marginTop="4dp"
android:layout_margin="16dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:id="@+id/text"
android:layout_margin="16dp"
android:text="我是天气预报哦"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/score"
android:text="32℃"
android:textSize="72sp"
android:layout_marginLeft="0dp"
android:layout_below="@+id/text"
android:layout_alignStart="@+id/text" />
</RelativeLayout>
</android.support.v7.widget.CardView>
在activity_main.xml 中添加RecyclerView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffffff"
app:elevation="1dp"
app:theme="@style/AppTheme"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="我是APP"
android:textSize="@dimen/abc_text_size_title_material_toolbar">
</TextView>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
></android.support.v7.widget.RecyclerView>
</LinearLayout>
在MainActivity中:
ArrayList<Data> itemList = new ArrayList<>();
itemList.add(new Data("4月17日","交作业",1));
itemList.add(new Data("4月17日","25℃",2));
itemList.add(new Data("4月18日","减肥减肥\n记得跑圈",1));
itemList.add(new Data("4月17日","23℃",2));
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
MyRecyclerAdapter myRecyclerAdapter =new MyRecyclerAdapter(itemList,this);
recyclerView.setAdapter(myRecyclerAdapter);
在这里,我想实现的是根据参数使用不同的CardVIew,所以搞了个Data类
public class Data{
private int type;
private String data1;
private String data2;
public Data(String data1, String data2, int type) {
this.data1 = data1;
this.data2 = data2;
this.type = type;
}
public String getData1() {
return data1;
}
public String getData2() {
return data2;
}
public int getType() {
return type;
}
}
好了,这些都设完了之后重头戏就来了
第三步
设置自定义的Adapter,想要让它显示各种各样的View的话,主要靠的是重载getItemViewType
@Override
public int getItemViewType(int position) {
return ItemList.get(position).getType();
}
为每一种View设置一个ViewHolder类
public class OneViewHolder extends CustomViewHolder
{
private TextView date;
private TextView task;
private Button add;
public OneViewHolder(View itemView) {
super(itemView);
date = (TextView)itemView.findViewById(R.id.date);
task = (TextView)itemView.findViewById(R.id.textView);
add = (Button)itemView.findViewById(R.id.button);
}
}
public class TwoViewHolder extends CustomViewHolder
{
private TextView date;
private TextView temp;
public TwoViewHolder(View itemView) {
super(itemView);
date = (TextView)itemView.findViewById(R.id.text);
temp = (TextView)itemView.findViewById(R.id.score);
}
}
重载onCreateViewHolder函数
private static final int TASK = 1;
private static final int WEATHER =2;
@Override
public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if(TASK == viewType)
{
View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_one,parent,false);
return new OneViewHolder(v);
}
else if(WEATHER == viewType)
{
View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_two,parent,false);
return new TwoViewHolder(v);
}
return null;
}
期中 viewType 就是之前getItemViewType 返回的拉
最后一步:onBindViewHolder()绑定数据到正确的Item视图上。
@Override
public void onBindViewHolder(CustomViewHolder holder, int position) {
int type = ItemList.get(position).type;
switch (type){
case TASK:
OneViewHolder oneViewHolder = (OneViewHolder)holder;
oneViewHolder.date.setText(ItemList.get(position).getData1());
oneViewHolder.task.setText(ItemList.get(position).getData2());
break;
case WEATHER:
TwoViewHolder twoViewHolder = (TwoViewHolder)holder;
twoViewHolder.date.setText(ItemList.get(position).getData1());
twoViewHolder.temp.setText(ItemList.get(position).getData2());
break;
}
}
贴一下全貌:
public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.CustomViewHolder>{
private static final int TASK = 1;
private static final int WEATHER =2;
public ArrayList<Data> ItemList;
private Context mcontext;
public MyRecyclerAdapter(ArrayList<Data> itemList, Context mcontext) {
ItemList = itemList;
this.mcontext = mcontext;
}
@Override
public int getItemViewType(int position) {
return ItemList.get(position).getType();
}
@Override
public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if(TASK == viewType)
{
View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_one,parent,false);
return new OneViewHolder(v);
}
else if(WEATHER == viewType)
{
View v = LayoutInflater.from(mcontext).inflate(R.layout.cardview_two,parent,false);
return new TwoViewHolder(v);
}
return null;
}
@Override
public void onBindViewHolder(CustomViewHolder holder, int position) {
int type = ItemList.get(position).type;
switch (type){
case TASK:
OneViewHolder oneViewHolder = (OneViewHolder)holder;
oneViewHolder.date.setText(ItemList.get(position).getData1());
oneViewHolder.task.setText(ItemList.get(position).getData2());
break;
case WEATHER:
TwoViewHolder twoViewHolder = (TwoViewHolder)holder;
twoViewHolder.date.setText(ItemList.get(position).getData1());
twoViewHolder.temp.setText(ItemList.get(position).getData2());
break;
}
}
@Override
public int getItemCount() {
return ItemList.size();
}
public class CustomViewHolder extends RecyclerView.ViewHolder {
public CustomViewHolder(View itemView) {
super(itemView);
}
}
public class OneViewHolder extends CustomViewHolder
{
private TextView date;
private TextView task;
private Button add;
public OneViewHolder(View itemView) {
super(itemView);
date = (TextView)itemView.findViewById(R.id.date);
task = (TextView)itemView.findViewById(R.id.textView);
add = (Button)itemView.findViewById(R.id.button);
}
}
public class TwoViewHolder extends CustomViewHolder
{
private TextView date;
private TextView temp;
public TwoViewHolder(View itemView) {
super(itemView);
date = (TextView)itemView.findViewById(R.id.text);
temp = (TextView)itemView.findViewById(R.id.score);
}
}
}
效果图
虽然很丑,但是成功了
推荐阅读:RecyclerView技术栈(http://www.jianshu.com/p/16712681731e)