GridPagerSnapHelper

Introduction: A powerful tools to impl grid paging layout by RecyclerView
More: Author   ReportBugs   
Tags:

Download Build Status

A powerful tools to impl grid paging layout by RecyclerView,support horizontal and vertical page

效果图

vertical orientation

带有 Indicator 的

Download

Jcenter(Recommend)

 compile 'com.hhl:gridpagersnaphelper:1.0.0'

 // Optional , config indicator
 compile 'com.hhl:recyclerviewindicator:1.0.0'

Maven

<dependency>
  <groupId>com.hhl</groupId>
  <artifactId>gridpagersnaphelper</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

// Optional , config indicator

<dependency>
  <groupId>com.hhl</groupId>
  <artifactId>recyclerviewindicator</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>

Usage:

for example:

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);

//setLayoutManager
GridLayoutManager gridLayoutManager = new GridLayoutManager(this, row, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(gridLayoutManager);

//attachToRecyclerView
GridPagerSnapHelper gridPagerSnapHelper = new GridPagerSnapHelper();
gridPagerSnapHelper.setRow(row).setColumn(column);
gridPagerSnapHelper.attachToRecyclerView(recyclerView);

int screenWidth = ScreenUtils.getScreenWidth(this);
int itemWidth = screenWidth / column;

//transform data list
List<DataSourceUtils.ItemData> dataList = DataSourceUtils.getDataSource();
dataList = GridPagerUtils.transformAndFillEmptyData(
        new OneRowDataTransform<DataSourceUtils.ItemData>(column), dataList);

//setAdapter
RecyclerViewAdapter adapter = new RecyclerViewAdapter(this, dataList, itemWidth);
recyclerView.setAdapter(adapter);

//indicator
CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.first_page_indicator);
indicator.setRecyclerView(firstRV);
//Note: pageColumn must be config
indicator.setPageColumn(column);

indicator.setOnPageChangeListener(new OnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

Step 1. setLayoutManager:

You'd better set a horizontal direction GridLayoutManager

Step 2. RecyclerView attach to GridPagerSnaperHelper

GridPagerSnapHelper gridPagerSnapHelper = new GridPagerSnapHelper();
gridPagerSnapHelper.setRow(row).setColumn(column);
gridPagerSnapHelper.attachToRecyclerView(recyclerView);

Here,you must set row and column

Step 3. transform data list

if your src data is dataList,you must transform it to dst data

GridPagerUtils.transformAndFillEmptyData(
        new OneRowDataTransform<DataSourceUtils.ItemData>(column), dataList);

Here,I have provided three transform order functions

  1. OneRowDataTransform

    mapping one row,n column

  2. TwoRowDataTransform

    mapping two row,n column

  3. ThreeRowDataTransform

    mapping three row,n column

You can impl your custom row funcitons by extends AbsRowDataTransform

Step4. (Optional) Config Indicator

CirclePageIndicator indicator = (CirclePageIndicator) findViewById(R.id.first_page_indicator);
indicator.setRecyclerView(firstRV);
//Note: pageColumn must be config
indicator.setPageColumn(column);

indicator.setOnPageChangeListener(new OnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

Why use AbsRowDataTransform?

In general,horizontal direction GridLayoutManager layout like this:

But,We want is the following case :

so,We need to make a transformation of the data.Here,AbsRowDataTransform can meet your needs.

Author

hanhailong worked in 58 同城,A fantastic website

hanhailong.cool@163.com

Apps
About Me
Google+: Trinea trinea
GitHub: Trinea