Giter VIP home page Giter VIP logo

pagerlayout's Introduction

combine PagerView + GridLayout to PagerLayout

https://github.com/o0starshine0o/PagerLayout

Travis (.com) Maven Central Download GitHub GitHub last commit

PagerLayout

what we can do...

  • replace "viewPager>recyclerView" with just only a "RecyclerView"
  • reduce memory using by cache all items
  • grid layout support
  • custom indicator drawable support
  • add lock, dot and corner for each item
  • add NineDrawable and FolderView for Folder Like Group just like iOS
  • add Guide View if you want to guide people how to use

Quick View

https://github.com/o0starshine0o/PagerLayout https://github.com/o0starshine0o/PagerLayout https://github.com/o0starshine0o/PagerLayout/tree/master/LockItem/ https://github.com/o0starshine0o/PagerLayout/tree/master/Guide/ https://github.com/o0starshine0o/PagerLayout/tree/master/FolderView/

Install

Please using latest version:

  1. PagerLayout:Maven Central
  2. LockItem:Maven Central
  3. Guide:Maven Central
  4. FolderView:Maven Central
  5. NineDrawable:Maven Central
// 翻页网格布局,本地或者网络库
implementation 'com.github.qicodes:pagerlayout:1.0.0'
// 加锁红点item(可选:如果需要加锁或者红点可以添加)
implementation 'com.github.qicodes:lockitem:1.0.0'
// 新手引导,(可选:如果需要添加用户引导可以添加)
implementation 'com.github.qicodes:guide:1.0.0'
// iOS风格文件夹,(可选:如果需要添加类似iOS风格的文件夹效果可以添加)
implementation 'com.github.qicodes:folderview:1.0.0'
// 生成九宫格的drawable,(可选:如果需要添加类似iOS风格的文件夹效果可以添加)
implementation 'com.github.qicodes:ninedrawable:1.0.0'

How To Use

  1. add PagerLayoutManager as recyclerView's layoutManager
recyclerView.layoutManager = PagerLayoutManager()
  1. set a adapter to recyclerView as usual
recyclerView.adapter = SlideAdapter(baseContext)
  1. set PagerSnapHelper to scroll like a PageView
PagerSnapHelper().attachToRecyclerView(recyclerView)

That's all! We will layout all children automatically using pager grid.

  1. if you want a indicator , we supply 4 kind indicators as implements of PageIndicator. Dot, LineSquare, Drawable. just need a attachToRecyclerView.
dotIndicator.attachToRecyclerView(recyclerView)
lineIndicator.attachToRecyclerView(recyclerView)
lineIndicator2.attachToRecyclerView(recyclerView)
drawIndicator.attachToRecyclerView(recyclerView)
  1. if you need your item in RecyclerView with lock or dot, you can implementation lockitem, follow this link to see LockItem

  2. if you need a gray transparent layer to guide user, follow this link to see Guide

  3. if you need a folder view, click it to open sub-file items, just like iOS, follow this link to see FolderView and this link to see NineDrawable

What's More

PagerLayout

Custom Grid

just like GridLayoutManager you can set the grid weights of each item

The default spanCount is 12, you can using this to layout children by all (1,2,3,4,6,12). Also you can custom this spanCount. Here is a simple example with kotlin code:

recyclerView.layoutManager = PagerLayoutManager(12) {
    when (it) {
        37 -> SlideAdapter.TYPE_1
        in 0..1 -> SlideAdapter.TYPE_2
        in 18..20 -> SlideAdapter.TYPE_3
        in 46..51 -> SlideAdapter.TYPE_6
        in 56..58 -> SlideAdapter.TYPE_3
        else -> SlideAdapter.TYPE_4
    }
}

Cache Item By Type

Control to cache item just like RecyclerView for each type of item.

recyclerView.recycledViewPool.setMaxRecycledViews(SlideAdapter.TYPE_6, 20)
recyclerView.recycledViewPool.setMaxRecycledViews(SlideAdapter.TYPE_4, 20)
recyclerView.recycledViewPool.setMaxRecycledViews(SlideAdapter.TYPE_3, 4)
recyclerView.recycledViewPool.setMaxRecycledViews(SlideAdapter.TYPE_2, 4)
recyclerView.recycledViewPool.setMaxRecycledViews(SlideAdapter.TYPE_1, 4)

OR using one recycledViewPool to cache all items

recyclerView.recycledViewPool.setMaxRecycledViews(0, 30)

Indicator

You can set width, height, normalColor, selectColor, padding, round to indicator. Also you can set a Bitmap as indicator

android:padding="8dp"
app:indicatorHeight="26dp"
app:indicatorWidth="26dp"
app:normalColor="@android:color/holo_blue_light"
app:selectColor="@android:color/holo_orange_light"
app:round="true"

For detail config, here is a Demo for you.

Lock && Dot

Each item can be covered with lock and dot, and the number in dot, here is a Demo

lockItem.showNumber = false
lockItem.dotNumber = -1
lockItem.showLock = false

Also, you can control this with xml:

<com.abelhu.lockitem.LockItem
    android:id="@+id/iconView"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:padding="8dp"
    android:src="@color/colorAccent"
    app:cornerSize="8dp"
    app:dotBackgroundColor="@android:color/white"
    app:dotBackgroundRadio="0.5dp"
    app:dotBigRadio="8dp"
    app:dotNormalRadio="4dp"
    app:dotNumber="88"
    app:dotTextSize="12sp"
    app:layout_constraintDimensionRatio="w, 1:1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:lock="@mipmap/icon_lock"
    app:lockBackgroundColor="#aa000000"
    app:lockHeight="23.5dp"
    app:lockText="@string/app_name"
    app:lockTextColor="@android:color/white"
    app:lockTextMargin="8dp"
    app:lockTextSize="12sp"
    app:lockWidth="21dp"
    app:showLock="true"
    app:showNumber="true"
    app:srcCompat="@drawable/ic_launcher_foreground"
    tools:ignore="ContentDescription" />

Demo

This project can be run if download.

pagerlayout's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

pagerlayout's Issues

error: duplicate value for resource 'attr/round'

I ran into this issues

C:\Users\pc\.gradle\caches\transforms-2\files-2.1\566f722e43a8f7680fe865920827115b\jetified-pagerlayout-1.0.4\res\values\values.xml:5:5-106: AAPT: error: duplicate value for resource 'attr/round' with config ''.

Seems like the this attribute name="round"

conflicting with androidx ConstraintLayout?

image

LockItem会有性能问题

这个项目很不错,代码简洁,并且有效。唯一的问题是lockitem都使用canvas绘画会有性能问题,当然我觉得你可能并不会犯这样的错误,而是想练习canvas?我需要的PagerLayoutManager和PagerSnapHelper两个类,但是由于lockitem的性能问题,差点就放弃了这个项目,所以我建议换一种方式实现,使得demo程序看起来更高效

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.