Implementation of multiple layouts of ListView Item


Introduction to this section:

This section is the last section of the ListView section. It brings you the implementation of ListView multi-layout Item. What is ListView Item multiple layout? For example, QQ chat list:

1.png

If it is made with a ListView, then there are two types of ListView Different items! One left and one right, hey, this section will teach you how to implement multiple layouts of ListView!


1. Key points:

Rewrite the getItemViewType() method to correspond to which category of View it is, and the getViewTypeCount() method iew returns How many categories are there in total! Then call getItemViewType on getView to obtain the corresponding category, and then load the corresponding View!


2. Code implementation:

Here, use the two layouts from the previous section directly, and then write another Adapter to rewrite several of the key points. Several places:


MutiLayoutAdapter.java:

/**
 * Created by Jay on 2015/9/23 0023.
 */
public class MutiLayoutAdapter extends BaseAdapter{

//Define two category flags
private static final int TYPE_BOOK = 0;
private static final int TYPE_APP = 1;
private Context mContext;
private ArrayList<Object> mData = null;


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

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

@Override
public Object getItem(int position) {
return mData.get(position);
}

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

//The core of multi-layout, through this judgment category
@Override
public int getItemViewType(int position) {
If (mdata.get (poss) Instanceof app) {
Return Type_app;
} Else if (mdata.get (positation) Instanceof Book) {
Return Type_Book;
} else {
             return super.getItemViewType(position);
                                                                                                                                                      }


@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        int type = getItemViewType(position);
        ViewHolder1 holder1 = null;
        ViewHolder2 holder2 = null;
        if(convertView == null){
           switch (type){
               case TYPE_APP:
                   holder1 = new ViewHolder1();
                   convertView = LayoutInflater.from(mContext).inflate(R.layout.item_one, parent, false);
                   holder1.img_icon = (ImageView) convertView.findViewById(R.id.img_icon);
                   holder1.txt_aname = (TextView) convertView.findViewById(R.id.txt_aname);
                   convertView.setTag(R.id.Tag_APP,holder1);
                   break;
               case TYPE_BOOK:
                   holder2 = new ViewHolder2();
                   convertView = LayoutInflater.from(mContext).inflate(R.layout.item_two, parent, false);
                   holder2.txt_bname = (TextView) convertView.findViewById(R.id.txt_bname);
                   holder2.txt_bauthor = (TextView) convertView.findViewById(R.id.txt_bauthor);
                   convertView.setTag(R.id.Tag_Book,holder2);
                   break;
           }
        }else{
            switch (type){
                case TYPE_APP:
                    holder1 = (ViewHolder1) convertView.getTag(R.id.Tag_APP);
                    break;
                case TYPE_BOOK:
                    holder2 = (ViewHolder2) convertView.getTag(R.id.Tag_Book);
                    break;
            }
        }

        Object obj = mData.get(position);
        //设置下控件的值
        switch (type){
            case TYPE_APP:
                App app = (App) obj;
                if(app != null){
                    holder1.img_icon.setImageResource(app.getaIcon());
                    holder1.txt_aname.setText(app.getaName());
                }
                break;
            case TYPE_BOOK:
                Book book = (Book) obj;
                if(book != null){
holder2.txt_bname.setText(book.getbName());
holder2.txt_bauthor.setText(book.getbAuthor());
                                     }
                                                                                                                                                                                                                                                                        # # }

## //Two different ViewHolder
private static class ViewHolder1{
ImageView img_icon;
TextView txt_aname;
}

private static class ViewHolder2{
            TextView txt_bname;
                       -  .Tag_APP,holder1); We usually directly setTag(Object), this is the overloaded method of setTag, the parameters are a unique key and an object after it! only! ! ! I directly used TYPE_BOOK as the first parameter at first, and then reported the following error:





##The key must be an application-specific resource idThat is, the previous one must be unique. Defining a final type int variable and hard-coding a value will not work. The approach here is to add directly to strings.xml:

<item name="Tag_APP" type="id"></item><item name="Tag_Book" type="id"></item>2.png

Of course you can also create another ids.xml file under res/values/ and paste the above code! In addition to this, there is another thing to note, that is, the signs that distinguish categories must start from 0, otherwise the following will be reported Such an error

3.png


MainActivity.java:

public class MainActivity extends AppCompatActivity {

    private static final int TYPE_BOOK = 0;
    private static final int TYPE_APP = 1;
    private ListView list_content;
    private ArrayList<Object> mData = null;
    private MutiLayoutAdapter myAdapter = null;

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

        //数据准备:
        mData = new ArrayList<Object>();
        for(int i = 0;i < 20;i++){
            switch ((int)(Math.random() * 2)){
                case TYPE_BOOK:
                    mData.add(new Book("《第一行代码》","郭霖"));
                    break;
                case TYPE_APP:
                    mData.add(new App(R.mipmap.iv_icon_baidu,"百度"));
                    break;
            }
        }

        list_content = (ListView) findViewById(R.id.list_content);
        myAdapter = new MutiLayoutAdapter(MainActivity.this,mData);
        list_content.setAdapter(myAdapter);
    }
}

The above randomly generates 0 and 1, 0 adds a Book object to the collection, and 1 adds an App object!


3. Code download:

ListViewDemo6.zip


Summary of this section:

Okay, this section I explained to you the implementation of multiple layouts of ListView Item, which is the rewriting of two methods. Then getView() makes a judgment and sets different layouts~The code is very simple~

This concludes the knowledge about ListView. Of course, the knowledge about ListView is not limited to this. Asynchronous loading, optimization, etc., we will learn these in the advanced part~ That’s all, thank you~