RecyclerView多type布局

2021-11-25

1. 简介

RecyclerView是一种特殊的view，可以用来显示类似列表的数据。

要展示一个RecyclerView，需要的组成成分包括：数据实体类、Adapter类、ViewHolder类以及显示view的Activity/Fragment。

数据实体类定义每一个item中要显示的数据，如字符串、图像等；

Adapter类用来绑定、创建ViewHolder，Activity/Fragment中的recyclerView对象通过设置该adapter实现对item中内容的显示；Adapter类需要继承自RecyclerView.Adapter，重写onCreateViewHolder、onBindViewHolder、getItemCount等方法；

ViewHolder类用来绑定每一个item展示时对应的布局文件及其id；ViewHolder类需要继承自RecyclerView.ViewHolder类。

RecyclerView的简单使用见文章。

2. 多布局分析与效果展示

在一个Fragment中展示包括Banner轮播图、日期TextView以及内容TextView，因此需要展示三种类别的内容。该RecyclerView作为多Tab切换中的首页Tab，其余Tab展示其他View，每一个Tab都是一个Fragment，因此Activity需要用一个容器来承载不同Tab对应的Fragment的布局文件。

MainActivity布局文件设计如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
  
    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


    <com.github.mmin18.widget.RealtimeBlurView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@color/color_title_bg"
         />

    <com.flyco.tablayout.CommonTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@color/color_translucent"
        app:tl_divider_color="@color/color_black"
        app:tl_iconHeight="23dp"
        app:tl_iconWidth="23dp"
        app:tl_indicator_color="@color/colorPrimary"
        app:tl_indicator_height="0dp"
        app:tl_textSelectColor="@color/color_black"
        app:tl_textUnselectColor="@color/color_gray"
        app:tl_textsize="10sp"
        app:tl_underline_color="#DDDDDD"
        app:tl_underline_height="1dp" />


</RelativeLayout>

其中fl_container这个FrameLayout用来承载不同的Fragment，CommonTabLayout用来展示底部导航。

首页Fragment的布局文件设计如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/backgroundColor">
    
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/mRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        app:srlAccentColor="@android:color/white"
        app:srlEnableHeaderTranslationContent="false"
        app:srlEnableLoadmore="false"
        app:srlPrimaryColor="@color/colorPrimary">

        <com.scwang.smartrefresh.header.MaterialHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.classic.common.MultipleStatusView
                android:id="@+id/multipleStatusView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:emptyView="@layout/layout_empty_view"
                app:errorView="@layout/layout_error_view"
                app:loadingView="@layout/layout_loading_view"
                app:noNetworkView="@layout/layout_network_view">

                <android.support.v7.widget.RecyclerView
                    android:id="@+id/mRecyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:clipToPadding="false"
                    android:paddingBottom="@dimen/padding_tab_layout_bottom" />

            </com.classic.common.MultipleStatusView>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetStart="0dp">

                <RelativeLayout
                    android:id="@+id/rel_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/tv_header_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:layout_centerVertical="true"
                        android:textColor="@color/color_item_title"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <ImageView
                        android:id="@+id/iv_search"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_centerVertical="true"
                        android:layout_marginEnd="15dp"
                        android:transitionName="@string/search_transition_name"
                        tools:src="@mipmap/ic_action_search_black"
                        tools:targetApi="lollipop" />

                </RelativeLayout>

            </android.support.v7.widget.Toolbar>

        </FrameLayout>

    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

</RelativeLayout>

其中最外层的SmartRefreshLayout表示整个区域可刷新， MaterialHeader表示刷新时的头部样式，紧接着的FrameLayout为整个页面需要显示的东西，包括ToolBar和自定义的MultipleStatusView，MultipleStatusView为多种状态下View的显示，包括无网络、加载错误、加载成功等，其中包裹着一个RecyclerView，该RecyclerView即数据加载成功时页面展示的所有内容。

当Activity添加了该Fragment后，展示样式如图所示：

3. 编码实现

(1) activity显示底部导航数据

定义底部导航选中与未选中时的图标与文字：

private val mTitles = arrayOf("每日精选", "发现", "热门", "我的")

// 未被选中的图标
private val mIconUnSelectIds = intArrayOf(R.mipmap.ic_home_normal, R.mipmap.ic_discovery_normal, R.mipmap.ic_hot_normal, R.mipmap.ic_mine_normal)
// 被选中的图标
private val mIconSelectIds = intArrayOf(R.mipmap.ic_home_selected, R.mipmap.ic_discovery_selected, R.mipmap.ic_hot_selected, R.mipmap.ic_mine_selected)

private val mTabEntities = ArrayList<CustomTabEntity>()

自定义TabEntity类用于得到图标与文字，该类继承自CustomTabEntity类：

class TabEntity(var title: String, private var selectedIcon: Int, private var unSelectedIcon: Int) :
CustomTabEntity {

  override fun getTabTitle(): String {
    return title
  }

  override fun getTabSelectedIcon(): Int {
    return selectedIcon
  }

  override fun getTabUnselectedIcon(): Int {
    return unSelectedIcon
  }
}

设置显示的样式

private fun initTab() {
  (0 until mTitles.size)
  .mapTo(mTabEntities) { TabEntity(mTitles[it], mIconSelectIds[it], mIconUnSelectIds[it]) }
  // 为tab赋值
  tab_layout.setTabData(mTabEntities)
  tab_layout.setOnTabSelectListener(object : OnTabSelectListener {
    override fun onTabSelect(p0: Int) {
      switchFragment(p0)
    }

    override fun onTabReselect(p0: Int) {
    }

  })
}

(2) Acticity获得Fragment实例显示Fragment布局

private fun switchFragment(position: Int) {
  val transaction = supportFragmentManager.beginTransaction()
  hideFragments(transaction)
  when (position) {
    0 // 首页
    -> mHomeFragment?.let {
      transaction.show(it)
    } ?: HomeFragment.getInstance(mTitles[position]).let {
      mHomeFragment = it
      transaction.add(R.id.fl_container, it, "home")
    }
  }

  mIndex = position
  tab_layout.currentTab = mIndex
  transaction.commitAllowingStateLoss()
}

(3) Fragment中RecyclerView状态的改变

当RecyclerView滚动结束后需要判断是否需要加载更多数据，滚动停止后RecyclerView内的childCount返回的是当前可见的view个数，RecyclerView.layoutManager.itemCount返回的是布局中填充的item个数，layoutManager的findFirstVisibleItemPosition方法返回的是布局管理器中可见的第一个View的position，通过三个数值大小判断是否要加载更多数据。

mRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
  // 滚动停止调用
  override fun onScrollStateChanged(recyclerView: RecyclerView?, newState: Int) {
    super.onScrollStateChanged(recyclerView, newState)
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
      val childCount = mRecyclerView.childCount
      val itemCount = mRecyclerView.layoutManager.itemCount
      val firstVisibleItem = (mRecyclerView.layoutManager as LinearLayoutManager).findFirstVisibleItemPosition()
      if (firstVisibleItem + childCount == itemCount) {
        if (!loadingMore) {
          loadingMore = true
          mPresenter.loadMoreData()
        }
      }
    }
  }
  
  ....
}

滚动时ToolBar中的字体需要根据当前位置来决定显示什么文字：

当Type为Banner时不显示ToolBar，当Type为日期TextView，更新ToolBar文字为日期TextView的文字；当Type为内容TextView，ToolBar中的文字一直显示日期TextView的文字。

// 滚动时调用
override fun onScrolled(recyclerView: RecyclerView?, dx: Int, dy: Int) {
  super.onScrolled(recyclerView, dx, dy)
  val currentVisibleItemPosition = linearLayoutManager.findFirstVisibleItemPosition()
  if (currentVisibleItemPosition == 0) {
    toolbar.setBackgroundColor(getColor(R.color.color_translucent))
    iv_search.setImageResource(R.mipmap.ic_action_search_white)
    tv_header_title.text = ""
  }
  else {
    if (mHomeAdapter?.mData!!.size > 1) {
      toolbar.setBackgroundColor(getColor(R.color.color_title_bg))
      iv_search.setImageResource(R.mipmap.ic_action_search_black)
      val itemList = mHomeAdapter!!.mData
      val item = itemList[currentVisibleItemPosition + mHomeAdapter!!.bannerItemSize - 1]
      if (item.type == "textHeader") {
        tv_header_title.text = item.data?.text
      }
      else {
        tv_header_title.text = simpleDateFormat.format(item.data?.date)
      }
    }
  }
}

(4) 显示不同type的内容

显示的type包括Banner、日期TextView以及内容TextView。每一种type用一个布局文件设计，因此包括三种布局文件。

item_home_banner布局文件设计如下：

<?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="wrap_content"
    android:orientation="vertical">

    <cn.bingoogolapple.bgabanner.BGABanner
        android:id="@+id/banner"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:scaleType="fitXY"
        app:banner_indicatorGravity="bottom|right"
        app:banner_placeholderDrawable="@drawable/placeholder_banner"
        app:banner_pointAutoPlayInterval="3000"
        app:banner_tipTextColor="@color/color_title_bg"
        app:banner_tipTextSize="@dimen/textSize_titleSmall"
        app:banner_transitionEffect="alpha" />

</LinearLayout>

该文件仅包含一个Banner，用于显示轮播图。

Item_home_header布局文件设计如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/color_title_bg">

    <TextView
        android:id="@+id/tvHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textColor="@color/color_item_title"
        android:textSize="18sp"
        android:textStyle="bold"
        tools:text="@string/app_name" />

</RelativeLayout>

该文件仅包含一个TextView，用于显示日期。

item_home_content布局文件设计如下：

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

    <ImageView
        android:id="@+id/iv_cover_feed"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:scaleType="fitXY"
        android:src="@drawable/placeholder_banner" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp">

        <ImageView
            android:id="@+id/iv_avatar"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            tools:src="@mipmap/ic_launcher_round" />

        <LinearLayout
            android:id="@+id/layout_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginEnd="15dp"
            android:layout_toEndOf="@id/iv_avatar"
            android:layout_toStartOf="@+id/tv_category"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:textColor="@color/color_item_title"
                android:textSize="15sp"
                tools:text="我正在用 Kotlin 写 Android" />

            <TextView
                android:id="@+id/tv_tag"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                tools:text="a/b/c/03`18`" />
        </LinearLayout>

        <TextView
            android:id="@+id/tv_category"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="15dp"
            tools:text="#搞笑" />


        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_alignParentBottom="true"
            android:background="@color/color_darker_gray" />

    </RelativeLayout>

</LinearLayout>

该布局文件用于显示每一个content，包括图片、文字、底部线条。

前面提到RecyclerView需要自定义Adapter继承自RecyclerView.Adapter、自定义ViewHolder继承自RecyclerView.ViewHolder。

Adapter类需要继承自RecyclerView.Adapter，重写onCreateViewHolder、onBindViewHolder、getItemCount、getItemViewType方法。

getItemCount返回RecyclerView中item的个数，其中Banner有多张图片，但只算一个item：

/**
 * 得到Item数量，Banner为第一个item
 * */
override fun getItemCount(): Int {
    return when {
        mData.size > bannerItemSize -> mData.size - bannerItemSize + 1
        mData.isEmpty() -> 0
        else -> 1
    }
}

getItemViewType返回RecyclerView中item的类型：

/**
 * 得到item类型
 * */
override fun getItemViewType(position: Int): Int {
    return when {
        position == 0 ->
            ITEM_TYPE_BANNER
        mData[position + bannerItemSize - 1].type == "textHeader" ->
            ITEM_TYPE_TEXT_HEADER
        else ->
            ITEM_TYPE_CONTENT
    }
}

onCreateViewHolder中根据不同的type得到不同的ViewHolder：

/**
 * 创建布局
 * */
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    return when (viewType) {
        ITEM_TYPE_BANNER ->
            ViewHolder(inflaterView(R.layout.item_home_banner, parent))
        ITEM_TYPE_TEXT_HEADER ->
            ViewHolder(inflaterView(R.layout.item_home_header, parent))
        else ->
            ViewHolder(inflaterView(R.layout.item_home_content, parent))
    }
}

/**
 * 加载布局
 */
private fun inflaterView(mLayoutId: Int, parent: ViewGroup): View {
  val view = mInflater?.inflate(mLayoutId, parent, false)
  return view ?: View(parent.context)
}

ViewHolder传入解析的View作为参数，在其中通过set方法对子控件进行赋值，由于子控件包含ImageView、TextView多种View，因此在ViewHolder中定义泛型方法得到View，根据不同的View设置不同内容：

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

    // 缓存已找的界面
    private var mView: SparseArray<View>? = null

    init {
        mView = SparseArray()
    }

    fun <T : View> getView(viewId: Int): T {
        // 对已有的view做缓存
        var view: View? = mView?.get(viewId)
        // 使用缓存的方式减少findViewById的次数
        if (view == null) {
            view = itemView.findViewById(viewId)
            mView?.put(viewId, view)
        }
        return view as T
    }

    @SuppressLint("SetTextI18n")
    //通用的功能进行封装  设置文本 设置条目点击事件  设置图片
    fun setText(viewId: Int, text: CharSequence): ViewHolder {
        val view = getView<TextView>(viewId)
        view.text = "" + text
        //希望可以链式调用
        return this
    }

    fun setHintText(viewId: Int, text: CharSequence): ViewHolder {
        val view = getView<TextView>(viewId)
        view.hint = "" + text
        return this
    }

    /**
     * 设置本地图片
     *
     * @param viewId
     * @param resId
     * @return
     */
    fun setImageResource(viewId: Int, resId: Int): ViewHolder {
        val iv = getView<ImageView>(viewId)
        iv.setImageResource(resId)
        return this
    }

    /**
     * 加载图片资源路径
     *
     * @param viewId
     * @param imageLoader
     * @return
     */
    fun setImagePath(viewId: Int, imageLoader: HolderImageLoader): ViewHolder {
        val iv = getView<ImageView>(viewId)
        imageLoader.loadImage(iv, imageLoader.path)
        return this
    }
    .......
}

onBindViewHolder是对每一个holder进行数据的绑定，同时调用set方法设置每个ViewHolder中不同view应该展示的内容：

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
  //绑定数据
  bindData(holder, mData[position], position)
}

/**
 * 绑定数据
 * */
override fun bindData(holder: ViewHolder, data: HomeBean.Issue.Item, position: Int) {
  when (getItemViewType(position)) {
    // Banner
    ITEM_TYPE_BANNER -> {
      val bannerItemData: ArrayList<HomeBean.Issue.Item> = mData.take(bannerItemSize).toCollection(ArrayList())
      val bannerFeedList = ArrayList<String>()
      val bannerTitleList = ArrayList<String>()
      // 取出banner显示的img和title
      Observable.fromIterable(bannerItemData)
      .subscribe { list ->
                  bannerFeedList.add(list.data?.cover?.feed ?: "")
                  bannerTitleList.add(list.data?.title ?: "")
                 }

      // 设置banner
      with(holder) {
        getView<BGABanner>(R.id.banner).run {
          setAutoPlayAble(bannerFeedList.size > 1)
          setData(bannerFeedList, bannerTitleList)
          setAdapter { banner, _, feedImageUrl, position ->
                      GlideApp.with(mContext)
                      .load(feedImageUrl)
                      .transition(DrawableTransitionOptions().crossFade())
                      .placeholder(R.drawable.placeholder_banner)
                      .into(banner.getItemImageView(position))
                     }
        }
      }
    }

    //TextHeader
    ITEM_TYPE_TEXT_HEADER -> {
      holder.setText(R.id.tvHeader, mData[position + bannerItemSize - 1].data?.text ?: "")
    }

    //content
    ITEM_TYPE_CONTENT -> {
      setVideoItem(holder, mData[position + bannerItemSize - 1])
    }
  }
}