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