ListView的多种ViewType

本篇博客一没引语，二没铺垫，直入主题。

先说需求，接着看图，然后上代码。

需求：1.列表的不同行布局样式 2.列表添加头布局

看图：数据自行脑补。



先说列表部分：利用RecyclerView和ListView都可以完成，但是关于头布局的部分RecyclerView就需要处理很多，目前也没有发现一个比较好的方案，因此我选择的是ListView。

ListView有几个方法是用来设置头布局，尾布局的。



关于不同行布局的处理，ListView的BaseAdapter中同样提供了一系列的方法



**getViewTypeCount()；方法：返回列表行布局形式的个数。

也就是返回列表的行布局有几种样式**



getItemViewType(int position)；方法：根据position返回该行布局的type

方法都查找完成，下面上代码。

1.写适配器：在适配器中设计了3中不同类型的行布局，分别是3张图片，2张图片2个文字，1张图片2个文字，通过getItemViewType和getViewTypeCount方法完成不同type的Item的设置。

public class ListAdapter extends BaseAdapter {

private List<ListBean> datas;
private Context context;
private LayoutInflater inflater;
private static final int TYPE_ALL = 0;// 2图2字
private static final int TYPE_ONE_IMG = 1;// 1图2字
private static final int TYPE_THREE_IMG = 2;// 3图

public ListAdapter(Context context) {
this.context = context;
inflater = LayoutInflater.from(context);
}

public void setDatas(List<ListBean> datas) {
this.datas = datas;
notifyDataSetChanged();
}

private boolean ifHasData() {
return datas.size() > 0 && datas != null;
}

@Override
public int getCount() {
return ifHasData() ? datas.size() : 0;
}

@Override
public ListBean getItem(int position) {
return ifHasData() ? datas.get(position) : null;
}

@Override
public long getItemId(int position) {
return position;
}

/**
* 根据position位置获取数据集合的数据
* 返回行布局类型
*/
@Override
public int getItemViewType(int position) {
String type = datas.get(position).getType();
if ("0".equals(type)) {// 2张图2字
return TYPE_ALL;
} else if ("1".equals(type)) {// 1张图2字
return TYPE_ONE_IMG;
} else {
return TYPE_THREE_IMG;// 3张图
}
}

/**
* 行布局类型总数
*/
@Override
public int getViewTypeCount() {
return 3;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
AllHolder allHolder = null;
OneImgHolder oneImgHolder = null;
ThreeImgHolder threeImgHolder = null;
int type = getItemViewType(position);

// 加载行布局+缓存行布局组件
if (convertView == null) {
switch (type) {
case TYPE_ALL:
convertView = inflater.inflate(R.layout.item_all, parent, false);
allHolder = new AllHolder(convertView);
convertView.setTag(allHolder);
break;
case TYPE_ONE_IMG:
convertView = inflater.inflate(R.layout.item_one_img, parent, false);
oneImgHolder = new OneImgHolder(convertView);
convertView.setTag(oneImgHolder);
break;
case TYPE_THREE_IMG:
convertView = inflater.inflate(R.layout.item_three_imgs, parent, false);
threeImgHolder = new ThreeImgHolder(convertView);
convertView.setTag(threeImgHolder);
break;
}
} else {
switch (type) {
case TYPE_ALL:
allHolder = (AllHolder) convertView.getTag();
break;
case TYPE_ONE_IMG:
oneImgHolder = (OneImgHolder) convertView.getTag();
break;
case TYPE_THREE_IMG:
threeImgHolder = (ThreeImgHolder) convertView.getTag();
break;
}
}

// 设置行布局组件内容
ListBean listBean = getItem(position);
switch (type) {
case TYPE_ALL:
allHolder.titleTv.setText(listBean.getTitle());
allHolder.contentTv.setText(listBean.getContent());
allHolder.iv1.setImageResource(listBean.getImg1());
allHolder.iv2.setImageResource(listBean.getImg2());
break;
case TYPE_ONE_IMG:
oneImgHolder.titleTv.setText(listBean.getTitle());
oneImgHolder.contentTv.setText(listBean.getContent());
oneImgHolder.iv.setImageResource(listBean.getImg1());
break;
case TYPE_THREE_IMG:
threeImgHolder.iv1.setImageResource(listBean.getImg1());
threeImgHolder.iv2.setImageResource(listBean.getImg2());
threeImgHolder.iv3.setImageResource(listBean.getImg3());
break;
}
return convertView;
}

class AllHolder {
TextView titleTv, contentTv;
ImageView iv1, iv2;

public AllHolder(View view) {
super();
titleTv = (TextView) view.findViewById(R.id.item_all_title_tv);
contentTv = (TextView) view.findViewById(R.id.item_all_content_tv);
iv1 = (ImageView) view.findViewById(R.id.item_all_iv_1);
iv2 = (ImageView) view.findViewById(R.id.item_all_iv_2);
}

}

class OneImgHolder {
ImageView iv;
TextView titleTv, contentTv;

public OneImgHolder(View view) {
super();
titleTv = (TextView) view.findViewById(R.id.item_one_img_title);
contentTv = (TextView) view.findViewById(R.id.item_one_img_content);
iv = (ImageView) view.findViewById(R.id.item_one_img_iv);
}
}

class ThreeImgHolder {
ImageView iv1, iv2, iv3;

public ThreeImgHolder(View view) {
super();
iv1 = (ImageView) view.findViewById(R.id.item_three_iv1);
iv2 = (ImageView) view.findViewById(R.id.item_three_iv2);
iv3 = (ImageView) view.findViewById(R.id.item_three_iv3);
}
}
}

2.数据类

public class ListBean {

private String title;// 标题
private String content; // 内容
private int img1;
private int img2;
private int img3;
private String type;

public ListBean() {
}

// 三张图片
public ListBean(int img1, int img2, int img3, String type) {
this.img1 = img1;
this.img2 = img2;
this.img3 = img3;
this.type = type;
}

// 一张图片2字
public ListBean(String title, String content, int img1, String type) {
this.title = title;
this.content = content;
this.img1 = img1;
this.type = type;
}

// all
public ListBean(String title, String content, int img1, int img2, String type) {
this.title = title;
this.content = content;
this.img1 = img1;
this.img2 = img2;
this.type = type;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getContent() {
return content;
}

public void setContent(String content) {
this.content = content;
}

public int getImg1() {
return img1;
}

public void setImg1(int img1) {
this.img1 = img1;
}

public int getImg2() {
return img2;
}

public void setImg2(int img2) {
this.img2 = img2;
}

public String getType() {
return type;
}

public void setType(String type) {
this.type = type;
}

public int getImg3() {
return img3;
}

public void setImg3(int img3) {
this.img3 = img3;
}
}

3.数据和适配器都准备完毕，现在要到Activity中配置数据了，我这里采用的是自己构造数据的方式，看官们可以根据自己的数据来调整。

public class MainActivity extends AppCompatActivity {

private ListView listView;
private ListAdapter listAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

listView = (ListView) findViewById(R.id.main_aty_list_view);

List<ListBean> datas = buildLocalDatas();
listAdapter = new ListAdapter(this);
listAdapter.setDatas(datas);
listView.setAdapter(listAdapter);

}

private List<ListBean> buildLocalDatas() {
List<ListBean> beans = new ArrayList<>();
beans.add(new ListBean(R.mipmap.ic_launcher, R.mipmap.ic_launcher, R.mipmap.ic_launcher, "2"));
beans.add(new ListBean("测试", "内容", R.mipmap.ic_launcher, R.mipmap.ic_launcher, "0"));
beans.add(new ListBean("测试", "内容", R.mipmap.ic_launcher, R.mipmap.ic_launcher, "0"));
beans.add(new ListBean("测试", "内容", R.mipmap.ic_launcher, "1"));
beans.add(new ListBean("测试", "内容", R.mipmap.ic_launcher, R.mipmap.ic_launcher, "0"));
beans.add(new ListBean("测试", "内容", R.mipmap.ic_launcher, R.mipmap.ic_launcher, "0"));
beans.add(new ListBean("测试", "内容", R.mipmap.ic_launcher, "1"));
return beans;
}
}

到这，数据设置完毕，运行之后可以发现ListView也能实现多种ViewType的



下面来示范一下如何设置HeaderView，非常简单。加载出一个View设置即可

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

listView = (ListView) findViewById(R.id.main_aty_list_view);

List<ListBean> datas = buildLocalDatas();
listAdapter = new ListAdapter(this);
listAdapter.setDatas(datas);
listView.setAdapter(listAdapter);

// 设置ListView的头布局
View view = getLayoutInflater().inflate(R.layout.list_header, null);
TextView headerTv = (TextView) view.findViewById(R.id.header_view_tv);
headerTv.setText("这里可设置轮播图");
listView.addHeaderView(view);

}

此篇博客到此结束。

资源下载：http://download.csdn.net/detail/wubihang/9526349