Android学习总结（十四） ———— ListView Item多布局的实现

一、基本概念　

　　实现一个Item的多布局。像我们经常在用的各种即时通讯工具，QQ、微信等，假设他们的会话界面是ListView实现的，那么ListView就有多种Item布局，要实现ListView里面有多种Item，就要重写适配器的两个方法getViewTypeCount()和getItemViewType(int position)，第一个方法是返回Item的种类数目，第二个是返回当前Item是哪种类型。重写getItemViewType()方法对应View是哪个类别，以及getViewTypeCount()方法返回 view总共多少个类别！然后再getView那里调用getItemViewType获得对应类别，再加载对应的View！

二、示例代码

　　先建两个javaBean，一个是App，一个是Book，代码如下所示：

package com.nyl.updatelistview;

/**
 * Created by Administrator on 2017/3/11 0011.
 */

public class App {

    private int icon;
    private String name;

    public App(int icon,String name){
        this.icon = icon;
        this.name = name;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

package com.nyl.updatelistview;

/**
 * Created by Administrator on 2017/3/11 0011.
 */

public class Book {
    private String name;
    private String author;


    public Book(String name,String author){
        this.author = author;
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }
}

　　接下来建两个布局，布局也是非常简单的，代码如下所示：

<?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="horizontal"
    android:padding="5dp">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:src="@mipmap/book_center__ic_video_media_thumb_disabled" />

    <TextView
        android:id="@+id/txt_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        android:text="Test"
        android:textSize="20sp" />


</LinearLayout>

<?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="horizontal"
    android:padding="10dp">

    <TextView
        android:id="@+id/txt_bname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="《第一行代码Android》"
        android:textColor="#F3684A"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/txt_bauthor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:text="郭霖"
        android:textColor="#44BDED"
        android:textSize="18sp" />

</LinearLayout>

　　在写适配器类之前，我们先定义好Book和App的Id,在strings.xml的目录里建，代码如下：

  <item name="Tag_APP" type="id"></item>
  <item name="Tag_Book" type="id"></item>

　　好了，这些都是比较简单的，我们进入核心写一个MutiLayoutAdapter多个布局大适配器，代码如下所示：

package com.nyl.updatelistview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Administrator on 2017/3/11 0011.
 */

public class MutiLayoutAdapter extends BaseAdapter{

    //定义两个类别标准
    private static final int TYPE_BOOK = 0;
    private static final int TYPE_APP = 1;

    private Context context;
    private ArrayList<Object> data = null;

    public MutiLayoutAdapter(Context context,ArrayList<Object> data){
        this.context = context;
        this.data = data;
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int i) {
        return data.get(i);
    }

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

    //多布局的核心，通过这个判断类别
    @Override
    public int getItemViewType(int position) {
        if (data.get(position) instanceof App){
            return TYPE_APP;
        }else if (data.get(position) instanceof Book){
            return TYPE_BOOK;
        }else {
            return super.getItemViewType(position);
        }
    }

    //类别项目
    @Override
    public int getViewTypeCount() {
        return 2;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        //获取item视图类别
        int type = getItemViewType(i);
        ViewHolder1 holder1 = null;
        ViewHolder2 holder2 = null;
        if (view == null){
            //根据类别加载视图
            switch (type){
                case TYPE_APP:
                    holder1 = new ViewHolder1();
                    view = LayoutInflater.from(context).inflate(R.layout.item_one,viewGroup,false);
                    holder1.img_icon = (ImageView) view.findViewById(R.id.img_icon);
                    holder1.txt_name = (TextView) view.findViewById(R.id.txt_name);
                    //缓存ViewHolder1，使用的key是strings.xml中定义的Tag_APP
                    view.setTag(R.id.Tag_APP,holder1);
                    break;
                case TYPE_BOOK:
                    holder2 = new ViewHolder2();
                    view = LayoutInflater.from(context).inflate(R.layout.item_two,viewGroup,false);
                    holder2.txt_bauthor = (TextView) view.findViewById(R.id.txt_bauthor);
                    holder2.txt_bname = (TextView) view.findViewById(R.id.txt_bname);
                    //缓存ViewHolder2，使用的key是strings.xml中定义的Tag_Book
                    view.setTag(R.id.Tag_Book,holder2);
                    break;
            }
        }else {
            switch (type){
                case TYPE_APP:
                    holder1 = (ViewHolder1) view.getTag(R.id.Tag_APP);
                    break;
                case TYPE_BOOK:
                    holder2 = (ViewHolder2) view.getTag(R.id.Tag_Book);
                    break;
            }
        }

        Object object = data.get(i);
        //设置控件的值
        switch (type){
            case TYPE_APP:
            App app = (App) object;
                if (app != null){
                    holder1.img_icon.setImageResource(app.getIcon());
                    holder1.txt_name.setText(app.getName());
                }
                break;
            case TYPE_BOOK:
                Book book = (Book) object;
                if(book != null){
                    holder2.txt_bname.setText(book.getName());
                    holder2.txt_bauthor.setText(book.getAuthor());
                }
                break;
        }

        return view;
    }

    //两个不同的ViewHolder
    private class ViewHolder1 {
        ImageView img_icon;
        TextView txt_name;
    }

    private class ViewHolder2 {
        TextView txt_bname;
        TextView txt_bauthor;
    }
}

　　最后一步是自然而然就是MainActivity.java，代码如下：

package com.nyl.updatelistview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends Activity {

    private static final int TYPE_BOOK = 0;
    private static final int TYPE_APP = 1;
    private ListView listView;
    private ArrayList<Object> data = new ArrayList<>();
    private MutiLayoutAdapter myAdapter = null;

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

        //数据准备
        data = new ArrayList<Object>();
        for (int i = 0; i < 20;i++){
            switch ((int) (Math.random() * 2)){
                case TYPE_BOOK:
                    data.add(new Book("《第一行代码》","郭霖"));
                    break;
                case TYPE_APP:
                    App app = new App(R.mipmap.book_center__ic_video_media_thumb_disabled,"海豚");
                    data.add(app);
                    break;
            }
        }
        listView = (ListView) findViewById(R.id.listView);
        myAdapter = new MutiLayoutAdapter(MainActivity.this,data);
        listView.setAdapter(myAdapter);
    }
}

　　运行效果如下：

　　

　　 ListView Item多布局就学到这里，希望对android学习者有所帮助！