2. 程式人生 > >RecyclerView展示多種佈局

RecyclerView展示多種佈局

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

按照慣例 先看看效果圖

多種佈局效果圖

簡介

最上面是一個輪播圖,然後下面是一個橫向滑動的頻道,然後下面就是一個GridView,再下面就是正常的佈局顯示了
當然這還不算是很複雜的佈局,我這邊只是講講原理和實現步驟,更多複雜佈局可以根據這個去擴充套件

原理

給不同position的item設定不同的layout佈局, 繫結不同的ViewHolder

實現步驟

1,定義不同的viewType常量(非必須)
2,在getItemViewType方法中根據position來返回不同的viewType
3,根據getItemViewType方法返回的不同的viewType在onCreateViewHolder建立不同的ViewHolder
4,onBindViewHolder方法裡面用instanceof判斷不同的ViewHolder來做不通的賦值處理
5,注意getItemCount的返回值

開擼程式碼

1,定義不同的viewType常量

上面的圖片上可以看出,一共有4個type,輪播圖,頻道,美女,正常4個,下面是定義的常量

    private final int BANNER_VIEW_TYPE = 0;//輪播圖
    private final int CHANNEL_VIEW_TYPE = 1;//頻道
    private final int GIRL_VIEW_TYPE = 2;//美女
    private final int NORMAL_VIEW_TYPE = 3;//正常佈局

2,在getItemViewType方法中根據position來返回不同的viewType

 /**
     * 獲取item的型別
     *
     * @param position item的位置
     * @return item的型別
     * 有幾種type就回在onCreateViewHolder方法中引入幾種佈局,也就是建立幾個ViewHolder
     */
    @Override
    public int getItemViewType(int position) {
        /*
        區分item型別,返回不同的int型別的值
        在onCreateViewHolder方法中用viewType來建立不同的ViewHolder
         */
 

        if (position == 0) {//第0個位置是輪播圖
                return BANNER_VIEW_TYPE;
        } else if (position == 1) {//第一個是頻道佈局
            return CHANNEL_VIEW_TYPE;
        } else if (position == 2) {//第2個位置是美女佈局
            return GIRL_VIEW_TYPE;
        } else {//其他位置返回正常的佈局
            return NORMAL_VIEW_TYPE;
        }
    }

position就是每個item的位置,根據不同的位置來返回不同的佈局type,可以根據你的需求自己穿插的來返回不同的viewType

3,根據getItemViewType方法返回的不同的viewType在onCreateViewHolder建立不同的ViewHolder
從這一步開始就是重頭戲了

以輪播圖為例子,每一個viewType都要有這幾個步驟
a,寫xml佈局:既然有輪播圖就肯定有輪播圖的佈局,我這裡用的是第三方的輪播圖,看佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.youth.banner.Banner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="175dp"
        app:delay_time="3000"
        app:scroll_time="1500"
        app:indicator_margin="5dp"
        app:indicator_height="6dp"
        app:indicator_width="6dp"
        app:indicator_drawable_selected="@color/colorPrimary"
        app:indicator_drawable_unselected="@color/colorAccent"
         />
</LinearLayout>

沒什麼別的,就是你要展示的佈局檔案

b,建立ViewHolder內部類,繼承RecyclerView.ViewHolder,在裡面例項化你要賦值的控制元件

 /**
     * 輪播圖的ViewHolder
     */
    public static class BannerHolder extends RecyclerView.ViewHolder {
        Banner banner;

        public BannerHolder(View itemView) {
            super(itemView);
            banner = (Banner) itemView.findViewById(R.id.banner);

        }
    }

c,引入佈局,new出ViewHolder並將引入的佈局傳遞進去,在onCreateViewHolder方法裡面

if (viewType == BANNER_VIEW_TYPE) {//如果viewType是輪播圖就去建立輪播圖的viewHolder
            View view = View.inflate(context, R.layout.item_banner, null);
            BannerHolder bannerHolder = new BannerHolder(view);
            return bannerHolder;
        }

以上就是為一種佈局建立ViewHodler

下面是完整的onCreateViewHolder方法裡面判斷不同的viewType建立不同的ViewHolder的程式碼

/**
     * 建立ViewHolder,根據getItemViewType方法裡面返回的幾種型別來建立
     *
     * @param viewType 就是getItemViewType返回的type
     * @return 返回自己建立的ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        if (viewType == BANNER_VIEW_TYPE) {//如果viewType是輪播圖就去建立輪播圖的viewHolder
            view = getView(R.layout.item_banner);
            BannerHolder bannerHolder = new BannerHolder(view);
            return bannerHolder;
        } else if (viewType == CHANNEL_VIEW_TYPE) {//頻道的type
            view = getView(R.layout.item_channel);
            return new ChannelHolder(view);
        } else if (viewType == GIRL_VIEW_TYPE) {//美女
            view = getView(R.layout.item_girl);
            return new GirlHolder(view);
        } else {//正常
            view = getView(R.layout.item_normal);
            RecyclerView.LayoutParams lp = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            view.setLayoutParams(lp);
            return new NormalHolder(view);
        }
    }

    /**
     * 用來引入佈局的方法
     */
    private View getView(int view) {
        View view1 = View.inflate(context, view, null);
        return view1;
    }

4,onBindViewHolder方法裡面用instanceof判斷不同的ViewHolder來做不通的賦值處理

直接上程式碼了,註釋很清楚了

@Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        //判斷不同的ViewHolder做不同的處理
        if (holder instanceof BannerHolder) {//輪播圖
            BannerHolder bannerHolder = (BannerHolder) holder;
            //呼叫設定輪播圖相關方法
            setBanner(bannerHolder);
        } else if (holder instanceof ChannelHolder) {//頻道
            ChannelHolder channelHolder = (ChannelHolder) holder;
            //設定頻道
            setChannel(channelHolder);
        } else if (holder instanceof GirlHolder) {//美女
            GirlHolder girlHolder = (GirlHolder) holder;
            GridViewAdapter adapter = new GridViewAdapter(context, girlList);
            girlHolder.gridView.setAdapter(adapter);
            girlHolder.gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(context, "美女" + position, Toast.LENGTH_SHORT).show();
                }
            });
        } else if (holder instanceof NormalHolder) {//正常佈局
            NormalHolder normalHolder = (NormalHolder) holder;
            normalHolder.textView.setText(normalList.get(position - 3));
            normalHolder.textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, "點選了" + normalList.get(position - 3), Toast.LENGTH_SHORT).show();
                }
            });
        }

    }

5,注意getItemCount的返回值
稍微不注意就越界了,+3是因為除了正常的佈局還有3個不同的佈局
如果是伺服器請求資料的話就得不同的情況不同處理了

@Override
    public int getItemCount() {
        return normalList.size() + 3;
    }

下面貼出 整個RecyclerView的adapter的程式碼

package duanlian.multiplerecyclerviewdemo;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.Transformer;
import com.youth.banner.loader.ImageLoader;

import java.util.List;
import java.util.Map;


/**
 * 程式猿： 段煉
 * 建立日期： 2017/4/19
 * 建立時間： 9:30
 * 本類功能：recyclerView的Adapter
 */

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private Context context;
    private List<String> picList;
    private List<Map<String, Object>> channelList;
    private List<Integer> girlList;
    private List<String> normalList;
    private final int BANNER_VIEW_TYPE = 0;//輪播圖
    private final int CHANNEL_VIEW_TYPE = 1;//頻道
    private final int GIRL_VIEW_TYPE = 2;//美女
    private final int NORMAL_VIEW_TYPE = 3;//正常佈局

    public RecyclerAdapter(Context context, List<String> picList, List<Map<String, Object>> channelList,
                           List<Integer> girlList, List<String> normalList) {
        this.context = context;
        this.picList = picList;
        this.channelList = channelList;
        this.girlList = girlList;
        this.normalList = normalList;
    }

    /**
     * 獲取item的型別
     *
     * @param position item的位置
     * @return item的型別
     * 有幾種type就回在onCreateViewHolder方法中引入幾種佈局,也就是建立幾個ViewHolder
     */
    @Override
    public int getItemViewType(int position) {
        /*
        區分item型別,返回不同的int型別的值
        在onCreateViewHolder方法中用viewType來建立不同的ViewHolder
         */
        if (position == 0) {//第0個位置是輪播圖
            return BANNER_VIEW_TYPE;
        } else if (position == 1) {//第一個是頻道佈局
            return CHANNEL_VIEW_TYPE;
        } else if (position == 2) {//第2個位置是美女佈局
            return GIRL_VIEW_TYPE;
        } else {//其他位置返回正常的佈局
            return NORMAL_VIEW_TYPE;
        }
    }

    /**
     * 建立ViewHolder,根據getItemViewType方法裡面返回的幾種型別來建立
     *
     * @param viewType 就是getItemViewType返回的type
     * @return 返回自己建立的ViewHolder
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        if (viewType == BANNER_VIEW_TYPE) {//如果viewType是輪播圖就去建立輪播圖的viewHolder
            view = getView(R.layout.item_banner);
            BannerHolder bannerHolder = new BannerHolder(view);
            return bannerHolder;
        } else if (viewType == CHANNEL_VIEW_TYPE) {//頻道的type
            view = getView(R.layout.item_channel);
            return new ChannelHolder(view);
        } else if (viewType == GIRL_VIEW_TYPE) {//美女
            view = getView(R.layout.item_girl);
            return new GirlHolder(view);
        } else {//正常
            view = getView(R.layout.item_normal);
            RecyclerView.LayoutParams lp = new RecyclerView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            view.setLayoutParams(lp);
            return new NormalHolder(view);
        }
    }

    /**
     * 用來引入佈局的方法
     */
    private View getView(int view) {
        View view1 = View.inflate(context, view, null);
        return view1;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        //判斷不同的ViewHolder做不同的處理
        if (holder instanceof BannerHolder) {//輪播圖
            BannerHolder bannerHolder = (BannerHolder) holder;
            //呼叫設定輪播圖相關方法
            setBanner(bannerHolder);
        } else if (holder instanceof ChannelHolder) {//頻道
            ChannelHolder channelHolder = (ChannelHolder) holder;
            //設定頻道
            setChannel(channelHolder);
        } else if (holder instanceof GirlHolder) {//美女
            GirlHolder girlHolder = (GirlHolder) holder;
            GridViewAdapter adapter = new GridViewAdapter(context, girlList);
            girlHolder.gridView.setAdapter(adapter);
            girlHolder.gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(context, "美女" + position, Toast.LENGTH_SHORT).show();
                }
            });
        } else if (holder instanceof NormalHolder) {//正常佈局
            NormalHolder normalHolder = (NormalHolder) holder;
            normalHolder.textView.setText(normalList.get(position - 3));
            normalHolder.textView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, "點選了" + normalList.get(position - 3), Toast.LENGTH_SHORT).show();
                }
            });
        }

    }

    /**
     * 設定頻道
     *
     * @param channelHolder
     */
    private void setChannel(ChannelHolder channelHolder) {
        //動態新增View
        for (int i = 0; i < channelList.size(); i++) {
            View view = View.inflate(context, R.layout.item_channel_view, null);
            ImageView ivLogo = (ImageView) view.findViewById(R.id.iv_logo);
            TextView tvChannel = (TextView) view.findViewById(R.id.tv_channel);
            Glide.with(context).load(channelList.get(i).get("pic")).into(ivLogo);
            tvChannel.setText(channelList.get(i).get("title").toString());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            view.setLayoutParams(params);
            params.setMargins(24, 0, 24, 0);
            view.setTag(i);
            final int finalI = i;
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(context, channelList.get(finalI).get("title").toString(), Toast.LENGTH_SHORT).show();
                }
            });
            channelHolder.linearLayout.addView(view);
        }
    }

    /**
     * 設定輪播圖
     *
     * @param bannerHolder
     */
    private void setBanner(BannerHolder bannerHolder) {
        //設定banner樣式
        bannerHolder.banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR);
        //設定圖片載入器
        bannerHolder.banner.setImageLoader(new GlideImageLoader());
        //設定圖片集合
        bannerHolder.banner.setImages(picList);
        //設定banner動畫效果
        bannerHolder.banner.setBannerAnimation(Transformer.Default);
        //設定標題集合（當banner樣式有顯示title時）
//            bannerHolder.banner.setBannerTitles(titles);
        //設定自動輪播，預設為true
        bannerHolder.banner.isAutoPlay(true);
        //設定輪播時間
//            bannerHolder.banner.setDelayTime(3500);
        //設定指示器位置（當banner模式中有指示器時）
        bannerHolder.banner.setIndicatorGravity(BannerConfig.CENTER);
        //banner設定方法全部呼叫完畢時最後呼叫
        bannerHolder.banner.start();
    }

    public class GlideImageLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            //Glide 載入圖片簡單用法
            Glide.with(context).load(path).into(imageView);
        }
    }

    @Override
    public int getItemCount() {
        return normalList.size() + 3;
    }

    /*****************************************下面是為不同的佈局建立不同的ViewHolder*******************************************************/
    /**
     * 輪播圖的ViewHolder
     */
    public static class BannerHolder extends RecyclerView.ViewHolder {
        Banner banner;

        public BannerHolder(View itemView) {
            super(itemView);
            banner = (Banner) itemView.findViewById(R.id.banner);

        }
    }

    /**
     * 頻道列表的ViewHolder
     */
    public static class ChannelHolder extends RecyclerView.ViewHolder {
        LinearLayout linearLayout;

        public ChannelHolder(View itemView) {
            super(itemView);
            linearLayout = (LinearLayout) itemView.findViewById(R.id.ll_channel);

        }
    }

    /**
     * 美女的ViewHolder
     */
    public static class GirlHolder extends RecyclerView.ViewHolder {
        GridView gridView;

        public GirlHolder(View itemView) {
            super(itemView);
            gridView = (GridView) itemView.findViewById(R.id.gridview);
        }
    }

    /**
     * 正常佈局的ViewHolder
     */
    public static class NormalHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public NormalHolder(View itemView) {
            super(itemView);
            textView = (TextView) itemView.findViewById(R.id.text);
        }
    }

}

還有些細節就不說了,請下載demo

相關推薦

RecyclerView展示多種佈局

按照慣例 先看看效果圖 簡介 最上面是一個輪播圖,然後下面是一個橫向滑動的頻道,然後下面就是一個GridView,再下面就是正常的佈局顯示了 當然這還不算是很複雜的佈局,我這邊只是講講原理和實現步驟,更多複雜佈局可以根據這個去擴充套件 原理 給不同

RecyclerView實現多種佈局樣式

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

RecyclerView的多種佈局MultiItemTypeAdapter

為RecyclerView新增多種佈局，MultiItemTypeAdapter，文章很詳細，篇幅比較長，請耐心看完 思路： (1).資料來源List<T> 中每條item,即T 有可能對應不同的佈局模式，這就是的Recyclerview中出現了多

RecyclerView的載入顯示多種佈局

RecyclerView是對ListView的封裝，所以ListView上能用的方法對RecyclerView同樣適用，並且會更簡單 在實際開發中，我們可能需要一個列表，顯示多種佈局，getItemViewType()方法完美解決了這個問題，在BaseAdapter中還有getViewTypeCount()

封裝RecyclerView Adapter 實現可新增多個header和footer,可設定loadingView，低耦合的多種佈局。

多種佈局的recyclerview的普通寫法是重寫RecyclerView.Adapter的getItemViewType返回不同position上的type，在onCreateViewHolder(ViewGroup parent,int viewType

使用Recyclerview實現線性佈局和網格佈局資料展示

         效果實現圖使用的依賴和許可權implementation 'com.facebook.fresco:fresco:0.12.0' implementation 'com.squareup.okhttp3:okhttp:3.4.2' implementatio

RecyclerView用法--展示多種型別Item資料

如題，本文主要介紹RecyclerView的基本使用方法，像ListView一樣展示多種型別的Item資料。 首先介紹一下實體類：ItemPO，用來表示每個Item代表的資料型別： package com.example.cxc.fullscreendemo.decora

RecyclerView中的多種佈局

概念 RecyclerView可以用於載入不同的檢視型別，基於伺服器的反饋，可能會要求載入不同的佈局。我們需要在介面卡中重寫的方法：getItemViewType(),onCreatViewHolder(),onBindViewHolder() 實現 首先

RecyclerView實現多種item佈局

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

RecyclerView支援下拉重新整理上劃載入，多種佈局樣式。RV整合框架使用（一）

還在使用古老的Listview嗎？ 還在繼承那個複雜的BaseAdapter嗎？ 還在給listview ADDHead，ADDfoot嗎？ 今天不用啦，我們只需使用SuperRefreshRecyclerView。 一切都只是一行程式碼的事情。 加入

fresco+recyclerView展示+MVP

public class Contant { public static final String BAUS_URI = "http://www.zhaoapi.cn/"; } public interface Api { @GET("home/getHome") Cal

Android RecyclerView、設定佈局管理器、設定Item增加、移除動畫、新增分割線

概述 RecyclerView出現已經有一段時間了，相信大家肯定不陌生了，大家可以通過匯入support-v7對其進行使用。 據官方的介紹，該控制元件用於在有限的視窗中展示大量資料集，其實這樣功能的控制元件我們並不陌生，例如：ListView、GridView。 那麼有了ListView、G

OkHttp網路載入資料+RecyclerView展示+屬性動畫

MainActivity.java public class MainActivity extends AppCompatActivity implements HttpUrls.ff{ private ImageView mImageView; private Rec

友盟登陸傳值+OkHttp+recyclerview展示瀑布流+跳轉Intent傳值+屬性動畫

友盟詳情見 https://blog.csdn.net/aijaijgnaw/article/details/84203936 分包 友盟第三方登入 MyApp(Application) package com.umeng.soexample.app; import and

RecyclerView展示資料

匯入依賴: implementation 'com.android.support:recyclerview-v7:28.0.0' 佈局引用: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/an

Android recyclerview 多個佈局 item資料錯亂

這個問題困擾了兩三天，recyclerview在採用多種佈局的情況下，在onBindViewHolder繫結的時候會，會將不會顯示的佈局用View.GONE隱藏起來，看似沒有問題！但是上下滑動的時候會發生item顯示錯亂！ 原本的item資料顯示，在滑動幾次後，顯示條數只剩下幾條 走了

RecyclerView三種佈局管理器

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.GridLayoutManager; impo

Okhttp網路請求+Recyclerview展示資料

首先匯入依賴 //Recyclerview是listview的升級版 implementation 'com.android.support:recyclerview-v7:28.0.0' //okhttp impleme

recyclerview多條目佈局

public class MyrecyclerAdater extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private Context mcontext; priva

Android瀑布流優化，解決Recyclerview展示大批量圖片時Item自動切換、閃爍、空白等問題

本文涉及的程式碼案例可以在下方的連結中找到，如果對你有幫助，請給個Star(#^.^#)問題分析        這段時間業務需求用到RecyclerView瀑布流載入並展示大批量圖片，但一開始單純使用RecyclerView直接載入圖片，使得顯示上出現了滑動到頂端時閃爍，It