1. 程式人生 > >Recyclerview 實現多條目載入

Recyclerview 實現多條目載入

這裡寫圖片描述

這種佈局樣式,相信很多開發者都會用到
今天我是用RecyclerView來實現這個多種Item的載入.
其實最關鍵的是要複寫RecyclerView的Adapter中的getItemViewType()方法
這個方法就根據條件返回條目的型別

一般有多少種類型我們就定義多少種常量

    //定義兩種常量  表示兩種條目型別
    public static final int TYPE_LEFT_IMAGE = 0;
    public static final int TYPE_RIGHT_IMAGE = 1;

其實就是從activity中傳到adapter中的資料中必須要有一個type欄位來判斷這個item物件需要那種檢視,然後return出一個標記,在onCreateViewHolder中在引用所對應的item佈局.

   /**
     * 獲取不同的條目型別
     *
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        String imgUrls = list.get(position).getImgUrls();
        if (imgUrls == null || imgUrls.isEmpty()) {
            return TYPE_LEFT_IMAGE;
        } else {
            return
TYPE_RIGHT_IMAGE; } }

有了定義的常量之後 在onCreateViewHolder里根據viewtype來判斷 所引用的item佈局型別 這樣每一條item就會不一樣了

 /**
     * 建立viewholder
     *
     * @param parent
     * @param viewType
     * @return
     */

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int
viewType) { View view = null; RecyclerView.ViewHolder holder = null; switch (viewType) { case TYPE_LEFT_IMAGE: //條目佈局 view = LayoutInflater.from(context).inflate(R.layout.recyclerview_item, null); holder = new TextViewHolder(view); break; case TYPE_RIGHT_IMAGE: view = LayoutInflater.from(context).inflate(R.layout.recyclerview_item2, null); holder = new ImageViewHolder(view); break; } return holder; }

建立不同的佈局

 //只有文字的佈局
 private class TextViewHolder extends RecyclerView.ViewHolder {
        public TextView mCrossetalk;

        public TextViewHolder(View itemView) {
            super(itemView);
            mCrossetalk = itemView.findViewById(R.id.crossetalk);
        }
    }
   //圖文並茂的佈局
    private class ImageViewHolder extends RecyclerView.ViewHolder {
        public ImageView crossetalk_pic;
        public TextView crossetalk2;

        public ImageViewHolder(View itemView) {
            super(itemView);
            crossetalk2 = itemView.findViewById(R.id.crossetalk2);
            crossetalk_pic = itemView.findViewById(R.id.crossetalk_pic);
        }
    }

好了,關鍵點就這麼多,這是一個完整的adapter

/**
 * Author:AND
 * Time: 2018/4/1.
 * Email:[email protected]
 * Description: recyclerview多條目載入
 * Detail:又一次實踐,從未有的體驗
 */
public class CrosseTalkAdapter extends RecyclerView.Adapter {

    //定義兩種常量  表示兩種條目型別
    public static final int TYPE_LEFT_IMAGE = 0;
    public static final int TYPE_RIGHT_IMAGE = 1;
    private List<CrosseTalkBean.DataBean> list;
    private Context context;

    public CrosseTalkAdapter(List<CrosseTalkBean.DataBean> list, Context context) {
        this.list = list;
        this.context = context;
    }

    /**
     * 建立viewholder
     *
     * @param parent
     * @param viewType
     * @return
     */

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = null;
        RecyclerView.ViewHolder holder = null;
        switch (viewType) {
            case TYPE_LEFT_IMAGE:
                //條目佈局
                view = LayoutInflater.from(context).inflate(R.layout.recyclerview_item, null);
                holder = new TextViewHolder(view);
                break;
            case TYPE_RIGHT_IMAGE:
                view = LayoutInflater.from(context).inflate(R.layout.recyclerview_item2, null);
                holder = new ImageViewHolder(view);
                break;

        }
        return holder;

    }

    /**
     * 繫結資料
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        CrosseTalkBean.DataBean dataBean = list.get(position);
        if (holder instanceof TextViewHolder) {
            ((TextViewHolder) holder).mCrossetalk.setText(dataBean.getCreateTime());
        }
        //在裡面設定各自的介面卡  和顯示的佈局
        if (holder instanceof ImageViewHolder) {
            ((ImageViewHolder) holder).crossetalk2.setText(dataBean.getCreateTime());
            String imgUrls = dataBean.getImgUrls();
            String[] split = imgUrls.split("\\|");
            Glide.with(context).load(split[0]).into(((ImageViewHolder) holder).crossetalk_pic);
        }
    }

    /**
     * 條目數量
     *
     * @return
     */
    @Override
    public int getItemCount() {
        return list.size();
    }

    /**
     * 獲取不同的條目型別
     *
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        String imgUrls = list.get(position).getImgUrls();
        if (imgUrls == null || imgUrls.isEmpty()) {
            return TYPE_LEFT_IMAGE;
        } else {
            return TYPE_RIGHT_IMAGE;
        }
    }


    private class TextViewHolder extends RecyclerView.ViewHolder {
        public TextView mCrossetalk;

        public TextViewHolder(View itemView) {
            super(itemView);
            mCrossetalk = itemView.findViewById(R.id.crossetalk);
        }
    }

    private class ImageViewHolder extends RecyclerView.ViewHolder {
        public ImageView crossetalk_pic;
        public TextView crossetalk2;

        public ImageViewHolder(View itemView) {
            super(itemView);
            crossetalk2 = itemView.findViewById(R.id.crossetalk2);
            crossetalk_pic = itemView.findViewById(R.id.crossetalk_pic);
        }
    }
}