yarolegovich/DiscreteScrollView

Java
Android

A scrollable list of items that centers the current element and provides easy-to-use APIs for cool item animations.

androidviewdiscrete-scrollitem-pickerrecyclerviewpagercarouselandroid-developmentandroid-uiandroid-libraryswiperecyclerviewviewpager
スター成長
スター
5.8k
フォーク
779
週間成長
+-1
Issue
42
2k3k4k5k
2017年3月2020年5月2023年7月2026年9月
成果物Maven
README

DiscreteScrollView

The library is a RecyclerView-based implementation of a scrollable list, where current item is centered and can be changed using swipes. It is similar to a ViewPager, but you can quickly and painlessly create layout, where views adjacent to the currently selected view are partially or fully visible on the screen.

GifSampleShop

Gradle

Add this into your dependencies block.

compile 'com.yarolegovich:discrete-scrollview:1.5.1'

Reporting an issue

If you are going to report an issue, I will greatly appreciate you including some code which I can run to see the issue. By doing so you maximize the chance that I will fix the problem.

By the way, before reporting a problem, try replacing DiscreteScrollView with a RecyclerView. If the problem is still present, it's likely somewhere in your code.

Sample

Get it on Google Play

Please see the sample app for examples of library usage.

GifSampleWeather

Wiki

General

The library uses a custom LayoutManager to adjust items' positions on the screen and handle scroll, however it is not exposed to the client code. All public API is accessible through DiscreteScrollView class, which is a simple descendant of RecyclerView.

If you have ever used RecyclerView - you already know how to use this library. One thing to note - you should NOT set LayoutManager.

Usage:

  1. Add DiscreteScrollView to your layout either using xml or code:
  2. Create your implementation of RecyclerView.Adapter. Refer to the sample for an example, if you don't know how to do it.
  3. Set the adapter.
  4. You are done!
<com.yarolegovich.discretescrollview.DiscreteScrollView
  android:id="@+id/picker"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:dsv_orientation="horizontal|vertical" />  <!-- orientation is optional, default is horizontal -->
DiscreteScrollView scrollView = findViewById(R.id.picker);
scrollView.setAdapter(new YourAdapterImplementation());

API

General

scrollView.setOrientation(DSVOrientation o); //Sets an orientation of the view
scrollView.setOffscreenItems(count); //Reserve extra space equal to (childSize * count) on each side of the view
scrollView.setOverScrollEnabled(enabled); //Can also be set using android:overScrollMode xml attribute

Related to the current item:

scrollView.getCurrentItem(); //returns adapter position of the currently selected item or -1 if adapter is empty.
scrollView.scrollToPosition(int position); //position becomes selected
scrollView.smoothScrollToPosition(int position); //position becomes selected with animated scroll
scrollView.setItemTransitionTimeMillis(int millis); //determines how much time it takes to change the item on fling, settle or smoothScroll

Transformations

One useful feature of ViewPager is page transformations. It allows you, for example, to create carousel effect. DiscreteScrollView also supports page transformations.

scrollView.setItemTransformer(transformer);

public interface DiscreteScrollItemTransformer {
    /**
     * In this method you apply any transform you can imagine (perfomance is not guaranteed).
     * @param position is a value inside the interval [-1f..1f]. In idle state:
     * |view1|  |currentlySelectedView|  |view2|
     * -view1 and everything to the left is on position -1;
     * -currentlySelectedView is on position 0;
     * -view2 and everything to the right is on position 1.
     */
    void transformItem(View item, float position); 
}

In the above example view1Position == (currentlySelectedViewPosition - n) and view2Position == (currentlySelectedViewPosition + n), where n defaults to 1 and can be changed using the following API:

scrollView.setClampTransformProgressAfter(n);

Because scale transformation is the most common, I included a helper class - ScaleTransformer, here is how to use it:

cityPicker.setItemTransformer(new ScaleTransformer.Builder()
  .setMaxScale(1.05f) 
  .setMinScale(0.8f) 
  .setPivotX(Pivot.X.CENTER) // CENTER is a default one
  .setPivotY(Pivot.Y.BOTTOM) // CENTER is a default one
  .build());

You may see how it works on GIFs.

Slide through multiple items

To allow slide through multiple items call:

scrollView.setSlideOnFling(true);

The default threshold is set to 2100. Lower the threshold, more fluid the animation. You can adjust the threshold by calling:

scrollView.setSlideOnFlingThreshold(value);

Infinite scroll

Infinite scroll is implemented on the adapter level:

InfiniteScrollAdapter wrapper = InfiniteScrollAdapter.wrap(yourAdapter);
scrollView.setAdapter(wrapper);

An instance of InfiniteScrollAdapter has the following useful methods:

int getRealItemCount();

int getRealCurrentPosition();

int getRealPosition(int position);

/*
 * You will probably want this method in the following use case:
 * int targetAdapterPosition = wrapper.getClosestPosition(targetPosition);
 * scrollView.smoothScrollTo(targetAdapterPosition);
 * To scroll the data set for the least required amount to reach targetPosition.
 */
int getClosestPosition(int position); 

Currently InfiniteScrollAdapter handles data set changes inefficiently, so your contributions are welcome.

Disabling scroll

It's possible to forbid user scroll in any or specific direction using:

scrollView.setScrollConfig(config);

Where config is an instance of DSVScrollConfig enum. The default value enables scroll in any direction.

Callbacks

  • Scroll state changes:
scrollView.addScrollStateChangeListener(listener);
scrollView.removeScrollStateChangeListener(listener);

public interface ScrollStateChangeListener<T extends ViewHolder> {

  void onScrollStart(T currentItemHolder, int adapterPosition); //called when scroll is started, including programatically initiated scroll
  
  void onScrollEnd(T currentItemHolder, int adapterPosition); //called when scroll ends
  /**
   * Called when scroll is in progress. 
   * @param scrollPosition is a value inside the interval [-1f..1f], it corresponds to the position of currentlySelectedView.
   * In idle state:
   * |view1|  |currentlySelectedView|  |view2|
   * -view1 is on position -1;
   * -currentlySelectedView is on position 0;
   * -view2 is on position 1.
   * @param currentIndex - index of current view
   * @param newIndex - index of a view which is becoming the new current
   * @param currentHolder - ViewHolder of a current view
   * @param newCurrent - ViewHolder of a view which is becoming the new current
   */
  void onScroll(float scrollPosition, int currentIndex, int newIndex, @Nullable T currentHolder, @Nullable T newCurrentHolder); 
}
  • Scroll:
scrollView.addScrollListener(listener);
scrollView.removeScrollListener(listener);

public interface ScrollListener<T extends ViewHolder> {
  //The same as ScrollStateChangeListener, but for the cases when you are interested only in onScroll()
  void onScroll(float scrollPosition, int currentIndex, int newIndex, @Nullable T currentHolder, @Nullable T newCurrentHolder);
}
  • Current selection changes:
scrollView.addOnItemChangedListener(listener);
scrollView.removeOnItemChangedListener(listener);

public interface OnItemChangedListener<T extends ViewHolder> {
  /**
   * Called when new item is selected. It is similar to the onScrollEnd of ScrollStateChangeListener, except that it is 
   * also called when currently selected item appears on the screen for the first time.
   * viewHolder will be null, if data set becomes empty 
   */
  void onCurrentItemChanged(@Nullable T viewHolder, int adapterPosition); 
}

Special thanks

Thanks to Tayisiya Yurkiv for sample app design and beautiful GIFs.

License

Copyright 2017 Yaroslav Shevchuk

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
関連リポジトリ
flutter/flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond

DartlibraryBSD 3-Clause "New" or "Revised" Licensemobileandroid
flutter.dev
178.9k31.1k
Genymobile/scrcpy

Display and control your Android device

CappApache License 2.0androidc
149.2k13.7k
react/react-native

A framework for building native applications using React

C++MIT Licenseandroidapp-framework
reactnative.dev
126.5k25.2k
rustdesk/rustdesk

An open-source remote desktop application designed for self-hosting, as an alternative to TeamViewer.

Rustcrates.ioappGNU Affero General Public License v3.0remote-controlremote-desktop
rustdesk.com
123k18.9k
Hack-with-Github/Awesome-Hacking

A collection of various awesome lists for hackers, pentesters and security researchers

awesomeCreative Commons Zero v1.0 Universalhackingsecurity
120k10.7k
justjavac/free-programming-books-zh_CN

:books: 免费的计算机编程类中文书籍,欢迎投稿

awesomeGNU General Public License v3.0pythonjavascript
weibo.com/justjavac
118.8k28.3k
tldr-pages/tldr

Collaborative cheatsheets for console commands 📚.

MarkdowntutorialOthershellman-page
tldr.sh
63.6k5.4k
2dust/v2rayNG

A V2Ray client for Android, support Xray core and v2fly core

KotlinGNU General Public License v3.0androidproxy
v2rayng.2dust.link
62.4k8.1k
Solido/awesome-flutter

An awesome list that curates the best Flutter libraries, tools, tutorials, articles and more.

Dartawesomeflutterawesome-list
61.1k6.9k
termux/termux-app

Termux - a terminal emulator application for Android OS extendible by variety of packages.

JavaMavencliOtherandroidterminal
f-droid.org/en/packages/com.termux
60.5k7.5k
wasabeef/awesome-android-ui

A curated list of awesome Android UI/UX libraries

awesomeMIT Licenseandroidawesome
57.5k10.3k
appwrite/appwrite

Appwrite® - complete cloud infrastructure for your web, mobile and AI apps. Including Auth, Databases, Storage, Functions, Messaging, Hosting, Realtime and more

TypeScriptnpmBSD 3-Clause "New" or "Revised" Licenseappwritedocker
appwrite.io
57.3k5.7k