Android开发之ListView不同类型item的展示

在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>

其实activity_main里面的代码很简单，就是一个listview， 接下来看看MainActivity的代码：

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