2. 程式人生 > >RecyclerView實現多種item佈局

RecyclerView實現多種item佈局

阿新 • • 發佈：2019-02-16

在專案中列表是基本都會用到的，然而在顯示列表時，我們需要的資料可能需要不止一種item顯示，對於複雜的資料就需要多種item，以不同的樣式顯示出來，這樣效果是很棒的，我們先看一下效果

我們可以看到，這個RecyclerView中有多種item顯示出來，那麼具體怎麼實現呢，其實在RecyclerView中，我們可以重寫方法getItemViewType()，這個方法會傳進一個引數position表示當前是第幾個Item，然後我們可以通過position拿到當前的Item物件，然後判斷這個item物件需要那種檢視，返回一個int型別的檢視標誌，然後在onCreatViewHolder方法中給引入佈局，這樣就能夠實現多種item顯示了，講了這麼多我們看一下具體的例子

    @Override
    public int getItemViewType(int position) {
        if(list.size() == 0){
            return EMPTY_VIEW;
        } else if(list.get(position) == null){
            return PROGRESS_VIEW;
        } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){
            return IMAGE_VIEW;
        } else {
            return super.getItemViewType(position);
        }
    }
首先我們重寫了getItemViewType這個方法，在這個方法中根據position對item物件做了一些判斷，如果儲存item物件的集合大小為空，返回空view標識（這裡為1），如果item物件為null，返回進度條標識，這個主要是用於實現下拉載入更多，如果item物件型別屬於圖片型別，就返回圖片型別對應的Item，這個就是效果圖中的第一個Item型別，否則就是其它型別，也就是效果圖中的另一種item佈局，然後我們在onCreatViewHolder中具體的為每一種型別引入其佈局 
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        if(viewType == PROGRESS_VIEW){
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);
            return new ProgressViewHolder(view);
        } else if(viewType == EMPTY_VIEW){
            return null;
        } else if(viewType == IMAGE_VIEW){
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);
            return new ImageViewHolder(view);
        } else {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);
            return new NewsViewHolder(view);
        }
    }
上面的程式碼就是具體為每種viewType引入其對應的佈局，這樣就基本實現了多種item佈局，但是僅僅是這些還不夠，因為我們還要對每種item設定資料，所以還要對每種item寫一個VIewHolder來為item顯示資料 
    class NewsViewHolder extends RecyclerView.ViewHolder{

        @BindView(R.id.news_title)TextView title;
        @BindView(R.id.news_digest)TextView digest;
        @BindView(R.id.news_time)TextView time;
        @BindView(R.id.news_src)ImageView image;

        public NewsViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    class ImageViewHolder extends RecyclerView.ViewHolder{

        @BindView(R.id.news_title) TextView title;
        @BindView(R.id.image_left) ImageView imageLeft;
        @BindView(R.id.image_right) ImageView imageRight;
        @BindView(R.id.image_middle) ImageView imageMiddle;
        @BindView(R.id.news_time) TextView time;

        public ImageViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    class ProgressViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.progressBar) ProgressBar progressBar;
        @BindView(R.id.textView) TextView textView;

        public ProgressViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }
上面就是item對應的幾個ViewHolder，判斷viewHolder屬於那種物件，然後在onBindViewHolder中根據對應的ViewHolder對其控制元件設定資料並顯示 
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                clickListener.onItemClick(v, position);
            }
        });
        if(holder instanceof NewsViewHolder){
            NewsViewHolder viewHolder = (NewsViewHolder)holder;
            viewHolder.title.setText(list.get(position).getTitle());
            viewHolder.time.setText(list.get(position).getTime());
            /**
             * Glide載入圖片
             */
            Glide.with(context).load(list.get(position).getImageUrl().get(0))
                    .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);
            if(list.get(position).getType().equals(News.TEXT_NEWS)){
                viewHolder.digest.setText(list.get(position).getDigest());
            } else {
                viewHolder.digest.setText("");
            }
        } else if(holder instanceof ImageViewHolder){
            ImageViewHolder viewHolder = (ImageViewHolder)holder;
            viewHolder.title.setText(list.get(position).getTitle());
            viewHolder.time.setText(list.get(position).getTime());
            setItemImage(viewHolder, list, position);
        } else if(holder instanceof ProgressViewHolder){
            ProgressViewHolder viewHolder = (ProgressViewHolder)holder;
            viewHolder.progressBar.setIndeterminate(true);

        }
    }

整個過程基本就是這樣，這種方式在專案中經常會用到，我們就可以這樣去處理，下拉載入更多就可以這樣實現，在載入完資料後再往物件集合中傳入null，然後判斷如果出現null就載入progressBar佈局，再加上Google官方的SwipeRefreshLayout，下拉重新整理，上拉載入就搞定了，其實很容易，而且也有點Material Design 的感覺~~~~~~

看下Adapter的全部程式碼

package com.zmt.e_read.Adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.zmt.e_read.Module.News;
import com.zmt.e_read.Module.OnItemClickListener;
import com.zmt.e_read.R;
import com.zmt.e_read.Utils.ProgressViewHolder;

import java.util.Collection;
import java.util.Collections;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * Created by Dangelo on 2016/9/27.
 */
public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private final int EMPTY_VIEW = 1;
    private final int PROGRESS_VIEW = 2;
    private final int IMAGE_VIEW = 3;

    private Context context;
    private List<News> list;
    private OnItemClickListener clickListener;

    public NewsAdapter(Context context, List<News> list, OnItemClickListener clickListener) {
        this.context = context;
        this.list = list;
        this.clickListener = clickListener;
    }

    public void addOnItemClickListener(OnItemClickListener clickListener){
        this.clickListener = clickListener;
    }

    @Override
    public int getItemViewType(int position) {
        if(list.size() == 0){
            return EMPTY_VIEW;
        } else if(list.get(position) == null){
            return PROGRESS_VIEW;
        } else if(list.get(position).getType().equals(News.IMAGE_NEWS)){
            return IMAGE_VIEW;
        } else {
            return super.getItemViewType(position);
        }
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        if(viewType == PROGRESS_VIEW){
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.progressbar_item, parent, false);
            return new ProgressViewHolder(view);
        } else if(viewType == EMPTY_VIEW){
            return null;
        } else if(viewType == IMAGE_VIEW){
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_news_item, parent, false);
            return new ImageViewHolder(view);
        } else {
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);
            return new NewsViewHolder(view);
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                clickListener.onItemClick(v, position);
            }
        });
        if(holder instanceof NewsViewHolder){
            NewsViewHolder viewHolder = (NewsViewHolder)holder;
            viewHolder.title.setText(list.get(position).getTitle());
            viewHolder.time.setText(list.get(position).getTime());
            /**
             * Glide載入圖片
             */
            Glide.with(context).load(list.get(position).getImageUrl().get(0))
                    .override(dpToPx(72), dpToPx(72)).centerCrop().into(viewHolder.image);
            if(list.get(position).getType().equals(News.TEXT_NEWS)){
                viewHolder.digest.setText(list.get(position).getDigest());
            } else {
                viewHolder.digest.setText("");
            }
        } else if(holder instanceof ImageViewHolder){
            ImageViewHolder viewHolder = (ImageViewHolder)holder;
            viewHolder.title.setText(list.get(position).getTitle());
            viewHolder.time.setText(list.get(position).getTime());
            setItemImage(viewHolder, list, position);
        } else if(holder instanceof ProgressViewHolder){
            ProgressViewHolder viewHolder = (ProgressViewHolder)holder;
            viewHolder.progressBar.setIndeterminate(true);

        }
    }

    public void setItemImage(ImageViewHolder viewHolder, List<News> list, int position){
        viewHolder.imageMiddle.setVisibility(View.VISIBLE);
        viewHolder.imageRight.setVisibility(View.VISIBLE);
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        if(list.get(position).getImageUrl().size() == 1){
            Glide.with(context).load(list.get(position).getImageUrl().get(0))
                    .override(displayMetrics.widthPixels - dpToPx(10), dpToPx(90))
                    .centerCrop().into(viewHolder.imageLeft);
            viewHolder.imageMiddle.setVisibility(View.GONE);
            viewHolder.imageRight.setVisibility(View.GONE);
        } else if(list.get(position).getImageUrl().size() == 2){
            int imageWidth = (displayMetrics.widthPixels - dpToPx(20)) / 2;
            Glide.with(context).load(list.get(position).getImageUrl().get(0))
                    .override(imageWidth, dpToPx(90))
                    .centerCrop().into(viewHolder.imageLeft);
            Glide.with(context).load(list.get(position).getImageUrl().get(1))
                    .override(imageWidth, dpToPx(90))
                    .centerCrop().into(viewHolder.imageMiddle);
            viewHolder.imageRight.setVisibility(View.GONE);
        } else if(list.get(position).getImageUrl().size() >= 3){
            int imageWidth = (displayMetrics.widthPixels - dpToPx(30)) / 3;
            Glide.with(context).load(list.get(position).getImageUrl().get(0))
                    .override(imageWidth, dpToPx(90))
                    .centerCrop().into(viewHolder.imageLeft);
            Glide.with(context).load(list.get(position).getImageUrl().get(1))
                    .override(imageWidth, dpToPx(90))
                    .centerCrop().into(viewHolder.imageMiddle);
            Glide.with(context).load(list.get(position).getImageUrl().get(2))
                    .override(imageWidth, dpToPx(90))
                    .centerCrop().into(viewHolder.imageRight);
        }
    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public int dpToPx(float dp){
        float px = context.getResources().getDisplayMetrics().density;
        return (int)(dp * px + 0.5f);
    }

    class NewsViewHolder extends RecyclerView.ViewHolder{

        @BindView(R.id.news_title)TextView title;
        @BindView(R.id.news_digest)TextView digest;
        @BindView(R.id.news_time)TextView time;
        @BindView(R.id.news_src)ImageView image;

        public NewsViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }

    class ImageViewHolder extends RecyclerView.ViewHolder{

        @BindView(R.id.news_title) TextView title;
        @BindView(R.id.image_left) ImageView imageLeft;
        @BindView(R.id.image_right) ImageView imageRight;
        @BindView(R.id.image_middle) ImageView imageMiddle;
        @BindView(R.id.news_time) TextView time;

        public ImageViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }
        
    <pre name="code" class="java">    class ProgressViewHolder extends RecyclerView.ViewHolder {

        @BindView(R.id.progressBar) ProgressBar progressBar;
        @BindView(R.id.textView) TextView textView;

        public ProgressViewHolder(View itemView) {
            super(itemView);
            ButterKnife.bind(this, itemView);
        }
    }
}

相關推薦

RecyclerView實現多種item佈局

在專案中列表是基本都會用到的，然而在顯示列表時，我們需要的資料可能需要不止一種item顯示，對於複雜的資料就需要多種item，以不同的樣式顯示出來，這樣效果是很棒的，我們先看一下效果 我們可以看到，這個RecyclerView中有多種item顯示出來，那麼具體怎麼實現

RecyclerView實現多種佈局樣式

1、新增依賴 compile 'com.android.support:recyclerview-v7:25.3.0' 2、佈局 <android.support.v7.widget.RecyclerView android:id="

Android RecyclerView多個Item佈局的實現（可實現頭部底部）

廢話不多說，小猿，上程式碼 package git.dzc.library; import android.support.v7.widget.RecyclerView; import android.view.ViewGroup; /** * Cre

recyclerview實現瀑布流佈局

先看效果,這裡我用的背景圖片, 首先匯入依賴 compile 'com.android.support:recyclerview-v7:26.1.0' 下面就是程式碼,首先是佈局 activity_main <RelativeLayout xmlns:a

Android開發之RecyclerView實現流式佈局

RecyclerView是什麼? RecycleView的出現, 替代了ListView, 沒了OnitemClickListener,; LayoutManager負責計算佈局; Adapter 負責適配,還增加了ViewHolder;RecycleView

FlexboxLayoutManager+ RecyclerView實現流式佈局，樓層導航欄，摺疊導航欄，導航欄和列表聯動

好久不寫安卓相關的文章了，最近專案需要就做了一個recylerview和頂部導航欄聯動，並且導航欄要有摺疊效果，樓層效果，大體效果如下（手機錄屏，解析度不是很高） 下面來講解具體實現 一，先看佈局檔案 <?xml version="1

Android教程2020 - RecyclerView顯示多種item

Android教程2020 - 系列總覽 本文連結 前面我們已經用RecyclerView顯示一些資料。也知道如何獲取滑動的距離。 前面我們的列表中顯示的都是同類資料。如果要在一個列表中顯示不同類別的資料，該怎麼做呢？ RecyclerView已經有應對這類場景的能力，本文描述如何用RecyclerView顯

RecyclerView載入多型別item 實現淘寶首頁佈局

主要為大家介紹如何用RecycleView來實現淘寶首頁複雜的佈局，做電商類app的小夥伴們可以略作參考。 首先上效果圖： 下面說一下實現方式，主要思路就是根據不同的資料型別去制定不同的item型別，然後動態地去設定這些item的寬高，設定item的型別相信大家都會，我這

為RecyclerView的不同item項實現不同的佈局(新增分類Header)

最近在做一個應用的時候，需要為GridLayoutManager新增頭部header，然後自然而然就想到了用不同的itemType去載入不同的佈局。 1.實現多item佈局，用不同的itemType去載入不同的佈局。     主要思路就是先定義好標識itemType的常量

RecyclerView使用GridLayoutManager實現九宮格佈局 item居中對齊問題

用RecyclerView實現九宮格的佈局，除了常規的LinearLayout之外，還有比較常用的GridLayoutManager和StaggeredGridLayoutManager，後兩種分別是九宮格佈局、瀑布佈局。本人這次主要運用用了GridLayoutManager

recyclerView 實現複雜的item佈局（如淘寶、京東、商城類首頁）

前言 現在各種電商如火如荼，首頁頁面設計也頗有色彩。 之前專案也是一個電商類購物app，主頁設計了好幾套樣式。 其中一個樣式如下圖相似涉及到： 輪播廣告圖banner、viewPager的輪播、沉浸式狀態列、 recyclerView的item的複雜分割

Android ListView不同的item佈局實現

類似與這個 聊天效果 和 進入直播間 注意 在使用不同佈局的時候,在介面卡中 getItemViewType和getViewTypeCount不能少,一般的同一種item的列表是不用這兩個函式的過載的，但是如果需要不同種類的item，就必須過載這兩個

Android RecyclerView優雅實現複雜列表佈局（二）

轉載：https://blog.csdn.net/huang3513/article/details/62046528 前言 學習了（一）中那個RecyclerView的一些基礎知識，如果沒有具體看懂可以再返回看不一樣的RecyclerView優雅實現複雜列表佈局（一），那麼接下來我們就在（

Android RecyclerView優雅實現複雜列表佈局（一）

轉載：https://blog.csdn.net/huang3513/article/details/62044688 前言 在多彩佈局不斷呈現的今天，多佈局混合排布成為一個時尚，今天就結合Holder實現RecyclerView複雜列表佈局。  效果圖如下（三種佈局）： 

Android完美處理RecyclerView實現item條目點選事件處理

前言： RecyclerView並沒有像ListView那樣提供了OnItemClick，OnItemLongClick等事件回撥介面，所以，我們需要自己寫介面去進行實現。 正題 ①、建立介面類OnRecyclerViewClickListener /** * Recy

RecyclerView 實現縱向，橫向，和瀑布流 的滾動佈局

實現縱向滾動 1，在app/build.gradle檔案，dependencies中新增如下內容 ----------------- compile ‘com.android.support:recyclerview-v7:24.2.1’ --------

RecyclerView實現佈局的切換

public class Main2Activity extends AppCompatActivity implements MyView, View.OnClickListener { private RecyclerView recycler; private List<Da

RecyclerView實現Item點選事件方法三/四

此係列文章隔上次釋出有一段時間，原因就是懶(其實是比較忙)，今天來說下剩下的兩種方法，如何優雅的實現 對於方法三我這裡就不說了，因為有很多文章都有說明，那就是基於RecyclerView.On

RecyclerView.ItemDecoration實現佔位Item

RecyclerView.ItemDecoration實現佔位Item 一、為什麼需要佔位Item 二、實現效果 三、實現原理 四、完整程式碼 五、核心程式碼 六、下載地址 一、為什麼需要佔

RecyclerView實現帶有頭部的頂部懸浮置頂佈局

由於專案需求需要，需要一個帶有頭部的吸頂佈局，在網上搜索了好多實現辦法，都不太理想，最終使用對RecyclerView新增分割線的方式，重寫了RecyclerView的分割線來實現這個懸浮欄。效果比較簡單，但是比較實用，下面主要介紹實現過程。 首先先貼上效果圖