根据(https://developer.android.com/intl/zh-cn/training/material/lists-cards.html)简单的学习了使用RecyclerView 和 CardView 来创建列表与卡片后,就想怎么让一个RecyclerView 根据数据呈现不同类型的CardView.
第一步
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
cardviewone.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"
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>
main_activity.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
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中设置RecicylerView
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);
itemList是一个 ArrayList<Data>,Data是一个自定义的类,等会我们会根据这里面的状态值来确定我们哪一个CardView
第三步
自定义一个RecyclerView.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;
}
}
我自己定义的Data.Class
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;
}
}
效果图:虽然丑了一点,但还可以啦