在android开发过程中,我们经常会遇到一些比较复杂的布局,比如说商城类app的首页,需要展示不同的布局,用以体现app界面的美观效果,在这样的情况下,如何灵活运用ListView就显得非常重要了,本文讲述的是如果使用ListView展示不同的item类型。文章的结尾会附上demo的下载连接,有需要的可以下载看看。
先上效果图:
接下来看看代码:
先看xml的代码:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dividerHeight="0dp"
android:divider="@color/color_transparent"/>
</LinearLayout>
package pts.com.apphomeproject.ui.activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.ListView;
import com.bigkoo.convenientbanner.ConvenientBanner;
import com.bigkoo.convenientbanner.holder.CBViewHolderCreator;
import com.bigkoo.convenientbanner.listener.OnItemClickListener;
import com.blankj.utilcode.util.ScreenUtils;
import java.util.ArrayList;
import java.util.List;
import pts.com.apphomeproject.R;
import pts.com.apphomeproject.adapter.HomeIndexAdapter;
import pts.com.apphomeproject.model.bean.HomeBean;
import pts.com.apphomeproject.model.bean.MenuBarBean;
import pts.com.apphomeproject.model.bean.ProductBean;
import pts.com.apphomeproject.uitls.NetworkImageHolderView;
import pts.com.apphomeproject.view.MultiItemTypeSupport;
/**
* demo实现的是ListView不同类型item的展示,一般用于复杂列表的开发,比如说商城首页,可自行修改
* Created by Kang on 2017/6/21.
*/
public class MainActivity extends AppCompatActivity implements OnItemClickListener {
private ListView mListView;
private ConvenientBanner mConvenientBanner;
private ArrayList<String> images;
private List<MenuBarBean> menuBarList; // 菜单栏
private List<HomeBean> homeList;
private List<ProductBean> productList;
private HomeIndexAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView(){
mListView = (ListView) findViewById(R.id.listView);
// 广告轮播可以作为headerView添加,也可以作为HomeIndexMultiItemTypeSupport的一个类型添加
mConvenientBanner = (ConvenientBanner) View.inflate(this, R.layout.layout_advert_carousel, null);
// 屏幕适配的高度需要自己根据需求去计算,我这里以750为标准来计算的,图片宽高:750x300
int height = ScreenUtils.getScreenWidth() * 300 / 750;
AbsListView.LayoutParams params = new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height);
mConvenientBanner.setLayoutParams(params);
mListView.addHeaderView(mConvenientBanner);
}
private void initData(){
images = new ArrayList<>();
homeList = new ArrayList<>();
menuBarList = new ArrayList<>();
productList = new ArrayList<>();
images.add("http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg");
images.add("http://pic18.nipic.com/20111215/577405_080531548148_2.jpg");
images.add("http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg");
images.add("http://img.taodiantong.cn/v55183/infoimg/2013-07/130720115322ky.jpg");
mConvenientBanner.setPointViewVisible(images.size() > 1 ? true : false);
mConvenientBanner.setPages(new CBViewHolderCreator<NetworkImageHolderView>() {
@Override
public NetworkImageHolderView createHolder() {
return new NetworkImageHolderView();
}
}, images).setOnItemClickListener(this);
mConvenientBanner.setPageIndicator(new int[]{R.drawable.icon_oval, R.drawable.icon_oval_focu});
addData();
}
/**
* 广告轮播点击事件
* @param position
*/
@Override
public void onItemClick(int position) {
}
@Override
protected void onResume() {
// 开启广告轮播
mConvenientBanner.startTurning(5000);
super.onResume();
}
@Override
protected void onStop() {
// 关闭广告轮播
mConvenientBanner.stopTurning();
super.onStop();
}
public class HomeIndexMultiItemTypeSupport implements MultiItemTypeSupport<HomeBean>{
/** 菜单栏 */
public final static int TYPE_MENU_BAR = 0;
/** 广告1 */
public final static int TYPE_ADVERT_1 = 1;
/** 商品数据 */
public final static int TYPE_PRODUCT = 2;
/**
* 根据不同的item标识设置布局
* @param position
* @param homeBean
* @return
*/
@Override
public int getLayoutId(int position, HomeBean homeBean) {
int layoutId = 0;
switch (homeBean.getType()){
case TYPE_MENU_BAR:
layoutId = R.layout.layout_menu_bar;
break;
case TYPE_ADVERT_1:
layoutId = R.layout.layout_advert;
break;
case TYPE_PRODUCT:
layoutId = R.layout.layout_product_home;
break;
}
return layoutId;
}
/**
* 设置item类型数目
* @return
*/
@Override
public int getViewTypeCount() {
return 3;
}
/**
* 获取类型
* @param postion
* @param homeBean
* @return
*/
@Override
public int getItemViewType(int postion, HomeBean homeBean) {
return homeBean.getType();
}
}
/**
* 添加模拟数据
*/
private void addData(){
// 添加菜单栏数据
menuBarList.add(new MenuBarBean("分类"));
menuBarList.add(new MenuBarBean("摇一摇"));
menuBarList.add(new MenuBarBean("服装"));
menuBarList.add(new MenuBarBean("电器"));
menuBarList.add(new MenuBarBean("手机"));
HomeBean bean_menu = new HomeBean();
bean_menu.setMenuBarList(menuBarList);
// 这一步尤为重要,设置当前数据用于哪个item展示
bean_menu.setType(HomeIndexMultiItemTypeSupport.TYPE_MENU_BAR);
homeList.add(bean_menu);
// 添加广告数据
HomeBean bean_advert = new HomeBean();
bean_advert.setImgUrl("http://pic15.nipic.com/20110722/2912365_092519919000_2.jpg");
bean_advert.setType(HomeIndexMultiItemTypeSupport.TYPE_ADVERT_1);
homeList.add(bean_advert);
// 添加产品数据
for (int i = 0; i < 10; i++){
ProductBean bean = new ProductBean();
bean.setPro_name("商品展示介绍" + i);
bean.setPro_price("" + i);
bean.setSales_volume("" + i);
bean.setGood_px("" + i);
bean.setList_image("http://pic30.nipic.com/20130626/8174275_085522448172_2.jpg");
productList.add(bean);
}
int lines = productList.size() / 2;
for (int i = 0; i < lines; i++){
HomeBean bean = new HomeBean();
bean.setProductBeanLeft(productList.get(i * 2));
bean.setProductBeanRight(productList.get(i * 2 + 1));
bean.setType(HomeIndexMultiItemTypeSupport.TYPE_PRODUCT);
homeList.add(bean);
}
if (mAdapter == null){
mAdapter = new HomeIndexAdapter(this, homeList, new HomeIndexMultiItemTypeSupport());
mListView.setAdapter(mAdapter);
}else{
mAdapter.notifyDataSetChanged();
}
}
}
MainActivity里面的代码主要重点在于HomeIndexMultiItemTypeSupport,具体的注释请看代码。
接下来看看HomeIndexAdapter里面的代码:
package pts.com.apphomeproject.adapter;
import android.content.Context;
import android.view.View;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
import java.util.List;
import pts.com.apphomeproject.R;
import pts.com.apphomeproject.model.bean.HomeBean;
import pts.com.apphomeproject.model.bean.ProductBean;
import pts.com.apphomeproject.ui.activity.MainActivity;
import pts.com.apphomeproject.uitls.ImageLoaderUtils;
import pts.com.apphomeproject.view.MultiItemCommonAdapter;
import pts.com.apphomeproject.view.MultiItemTypeSupport;
import pts.com.apphomeproject.view.ViewHolder;
/**
* Created by Kang on 2017/6/21.
*/
public class HomeIndexAdapter extends MultiItemCommonAdapter<HomeBean> {
private Context mContext;
private onProductClickListener productClickListener;
public HomeIndexAdapter(Context context, List<HomeBean> datas, MultiItemTypeSupport<HomeBean> multiItemTypeSupport) {
super(context, datas, multiItemTypeSupport);
this.mContext = context;
productClickListener = new onProductClickListener();
}
/**
* 根据不同的item类型来处理不同的数据,展示布局
* @param holder
* @param item
*/
@Override
public void convert(ViewHolder holder, HomeBean item) {
int viewType = mMultiItemTypeSupport.getItemViewType(holder.getPosition(), item);
switch (viewType){
case MainActivity.HomeIndexMultiItemTypeSupport.TYPE_MENU_BAR:
GridView mGridView = holder.getView(R.id.gridView);
MenuBarAdapter menuBarAdapter = new MenuBarAdapter(mContext, item.getMenuBarList(), R.layout.gridview_menu_bar_item);
mGridView.setAdapter(menuBarAdapter);
break;
case MainActivity.HomeIndexMultiItemTypeSupport.TYPE_ADVERT_1:
ImageView mImgUrl = holder.getView(R.id.img_advert);
ImageLoaderUtils.loadImage(mContext, mImgUrl, item.getImgUrl());
break;
case MainActivity.HomeIndexMultiItemTypeSupport.TYPE_PRODUCT:
setDataForProduct(holder, item);
break;
}
}
/**
* 设置产品数据
* @param holder
* @param item
*/
private void setDataForProduct(ViewHolder holder, HomeBean item){
ProductBean productBeanLeft = item.getProductBeanLeft();
ImageView mImgLeft = holder.getView(R.id.img_product_url_left);
ImageLoaderUtils.loadImage(mContext, mImgLeft, productBeanLeft.getList_image());
holder.setText(R.id.txt_product_name_left, productBeanLeft.getPro_name());
holder.setText(R.id.txt_product_price_left, productBeanLeft.getPro_price());
holder.setText(R.id.txt_product_sales_left, "销量:" + productBeanLeft.getSales_volume());
holder.setText(R.id.txt_product_evaluate_left, productBeanLeft.getGood_px() + "%好评");
ProductBean productBeanRight = item.getProductBeanRight();
ImageView mImgRight = holder.getView(R.id.img_product_url_right);
ImageLoaderUtils.loadImage(mContext, mImgRight, productBeanRight.getList_image());
holder.setText(R.id.txt_product_name_right, productBeanRight.getPro_name());
holder.setText(R.id.txt_product_price_right, productBeanRight.getPro_price());
holder.setText(R.id.txt_product_sales_right, "销量:" + productBeanRight.getSales_volume());
holder.setText(R.id.txt_product_evaluate_right, productBeanRight.getGood_px() + "%好评");
// 点击事件
LinearLayout mLLLeft = holder.getView(R.id.linear_left);
mLLLeft.setTag(R.id.product_bean_id, productBeanLeft);
mLLLeft.setOnClickListener(productClickListener);
LinearLayout mLLRight = holder.getView(R.id.linear_right);
mLLRight.setTag(R.id.product_bean_id, productBeanRight);
mLLRight.setOnClickListener(productClickListener);
}
class onProductClickListener implements View.OnClickListener{
@Override
public void onClick(View v) {
ProductBean bean = (ProductBean) v.getTag(R.id.product_bean_id);
if (bean != null){
Toast.makeText(mContext, bean.getPro_name(), Toast.LENGTH_LONG).show();
}
}
}
}
在adapter中,我自己封装了MultiItemCommonAdapter工具类,用于方便在adapter中不同类型的item的展示。
接下来是实体类HomeBean:
package pts.com.apphomeproject.model.bean;
import java.util.List;
/**
* home实体类,可扩展,自定义
* Created by Kang on 2017/6/21.
*/
public class HomeBean {
int type = 0; // 类型 用于展示不同的Item ()
// 菜单栏数据
List<MenuBarBean> menuBarList;
// 广告数据
String imgUrl = "";
// 产品数据
ProductBean productBeanLeft;
ProductBean productBeanRight;
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public List<MenuBarBean> getMenuBarList() {
return menuBarList;
}
public void setMenuBarList(List<MenuBarBean> menuBarList) {
this.menuBarList = menuBarList;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this.imgUrl = imgUrl;
}
public ProductBean getProductBeanLeft() {
return productBeanLeft;
}
public void setProductBeanLeft(ProductBean productBeanLeft) {
this.productBeanLeft = productBeanLeft;
}
public ProductBean getProductBeanRight() {
return productBeanRight;
}
public void setProductBeanRight(ProductBean productBeanRight) {
this.productBeanRight = productBeanRight;
}
}
在实体类中,主要是type参数,这个是用于设置不同类型item的标识。
通过上述代码,实现首页ListView不同类型item的展示会变的简单,不会太复杂,代码基本上一看就会明白。
项目下载链接:http://download.csdn.net/detail/emptoney/9876706