An image control used for placing in RecycleView, its main function is to follow the list up and down scrolling and up and down translation, so that the presentation of an image relative to the list of static feeling.

Overview

ScrollingImageView provides the following features:

  • In vertical direction, makes the component with the scrolling list online love translation, optional parameters: scrollType (middle | whole).

When scrollType is whole, the list is scrolled from entry to exit

ScrollType: middle: scrolls only when the item is fully displayed in the column list

Demo code

Gradle integration

This repository is managed in the jCenter repository and you just need to add the following code to use it

The dependencies {the compile site. Okhttp. Codeyel: scrollingImageView: 1.0.0 '}Copy the code

Basic uasge

Step 1: Introduce ScrollingImageView into the corresponding layout of the list’s individual items, for example :(item.xml)

<com.yel.image.ScrollingImageView
    android:id="@+id/img"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    custom:scrollType="middle"
/>
Copy the code

Step 2: Add listeners to your code

General code:

final LinearLayoutManager layoutManager = new LinearLayoutManager(getApplicationContext());
recyclerView.setLayoutManager(layoutManager);
Copy the code

Code to add:

recyclerView.addOnScrollListener(new ScrollingImageView.ScrollListener(layoutManager, R.id.img, index));
Copy the code

Where {index} represents the index value of item in the list, {r.idmg} corresponds to android:id=”@+id/img”

Advance uasge

  1. Open interface for custom scrolling

Principle

  1. Rewrite the setFrame method: Translate the image vertically through the postTranslate method to show different positions in the image.
  2. Set the OnScrollListener listener to listen to the scroll position of the list to calculate the appropriate translation parameter and pass it to the postTranslate method in step 1.

As shown in the figure below

  • The original:

  • When at the top and in the middle of the control:

  • Before and after translation

Contribution

Want to contribute? Please, feel free to create a pull request! 😉

License

Apache Version 2.0