快捷導(dǎo)航

Android Recyclerview實現(xiàn)水平分頁GridView效果示例

更新時間：2017年08月08日 15:22:40 作者：T9的第三個三角

本篇文章主要介紹了Android Recyclerview實現(xiàn)水平分頁GridView效果示例，具有一定的參考價值，有興趣的可以了解一下

昨天UI妹子給了給需求，展示水平分頁效果，而且第二頁要默認(rèn)顯示一部分，提示用戶水平可以滑動，先上效果圖：

很明顯橫向滑動的分頁，第一反應(yīng)就是使用ViewPager，畢竟只要通過自定義ViewPager，實現(xiàn)這個效果還是很容易，但是實際中問題時，當(dāng)前模塊是Recyclerview中某一個Holder，為了性能，肯定盡量使用Recyclerview去復(fù)用View，而且ViewPager并不能復(fù)用，所以考慮之后，還是要用Recyclerview去實現(xiàn)。

解決思路

既然打算用Recyclerview實現(xiàn)，很明顯這就可以用GridLayoutManager處理橫向滑動的列表，初步實現(xiàn)橫向列表的效果，列數(shù)為4的橫向分頁效果

橫向列表效果是實現(xiàn)了，但是并沒有達(dá)到設(shè)計稿的要求，第二頁要默認(rèn)顯示一部分，那么就要從水平方向上去思考解決問題，既然第二頁要顯示一部分，假如顯示16dp，那么將第一頁列表寬度減少右邊距16dp，第二頁就可以在第一頁顯示了。
在Recyclerview的Adapter中，先上布局：

<?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:id="@+id/rl_parent"
  android:layout_width="match_parent"
  android:layout_height="55dp"
  android:background="@drawable/news_click_bg"
  android:clickable="true"
  android:gravity="center_vertical">

  <ImageView
    android:id="@+id/iv_img"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_centerVertical="true"
     android:layout_marginLeft="16dp"
    android:padding="3dp"
    android:src="@drawable/icon_book_default"
    android:tint="@color/blue" />

  <com.ddz.lifestyle.baseview.customview.RobotoTextView
    android:id="@+id/tv_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="20dp"
    android:layout_toRightOf="@+id/iv_img"
    android:ellipsize="end"
    android:lines="1"
    android:textSize="18sp"
    app:typeface="roboto_regular"
    tools:text="name" />

  <ImageView
    android:id="@+id/iv_menu"
    android:layout_width="34dp"
    android:layout_height="34dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="10dp"
    android:padding="10dp"
    android:src="@drawable/menu_right"
    android:visibility="invisible" />
</RelativeLayout>```

在onBindViewHolder方法中，去修改邊距

@Override
public void onBindViewHolder(ItemHolder holder, int position) {
  if (null == bean) {
    return;
  }
  RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, DensityUtil.dip2px(86));   //DensityUtil是px轉(zhuǎn)dp的工具類
  int screenWidth = TCommonUtils.getScreenWidth(context);
  if (position <= 3) { //因為每列數(shù)量為4個，那么只需要將前4個item的寬度減少32dp
    screenWidth -= DensityUtil.dip2px(32); //寬度減少32dp,即左右各16dp
    params.width = screenWidth;
  } else {
    params.width = screenWidth;
  }
  holder.rlParent.setLayoutParams(params);
  holder.tvTitle.setText(bean.get(position).getTitle());
}```

來看看效果