GithubHelp home page GithubHelp logo

blueflychief / drag-select-recyclerview Goto Github PK

View Code? Open in Web Editor NEW

This project forked from afollestad/drag-select-recyclerview

0.0 2.0 0.0 16.97 MB

Easy to implement Google Photos style multi-selection for RecyclerViews.

Home Page: https://aidanfollestad.com

License: Apache License 2.0

Java 100.00%

drag-select-recyclerview's Introduction

Drag Select Recycler View

This library allows you to implement Google Photos style multi-selection in your apps! You start by long pressing an item in your list, then you drag your finger without letting go to select more.

Art

Sample

You can download a sample APK or view it on Google Play!

Get it on Google Play

Gradle Dependency

jCenter Build Status License

The Gradle dependency is available via jCenter. jCenter is the default Maven repository used by Android Studio.

Dependency

Add the following to your module's build.gradle file:

dependencies {
    // ... other dependencies
    compile 'com.afollestad:drag-select-recyclerview:1.0.0'
}

Tutorial

  1. Introduction
  2. DragSelectRecyclerView
    1. How to create a DragSelectRecyclerView in your layout. How to set it up from code.
  3. Adapter Implementation
    1. An example of how adapter's should be setup.
  4. User Activation, Initializing Drag Selection
    1. How drag selection mode is activated by a long press. How to maintain selected items through configuration changes, etc.
  5. Auto Scroll
    1. By default, this library will auto-scroll up or down if the user holds their finger at the top or bottom of the list during selection mode.

Introduction

DragSelectRecyclerView is the main classes of this library.

This library will handle drag interception and auto scroll logic - if you drag to the top of the RecyclerView, the list will scroll up, and vice versa.


DragSelectRecyclerView

DragSelectRecyclerView replaces the regular RecyclerView in your layouts. It intercepts touch events when you tell if selection mode is active, and automatically reports to your adapter.

<com.afollestad.dragselectrecyclerview.DragSelectRecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

Setup is basically the same as it would be for a regular RecyclerView. You just set a LayoutManager and RecyclerView.Adapter to it:

DragSelectRecyclerView list = (DragSelectRecyclerView) findViewById(R.id.list);
list.setLayoutManager(new GridLayoutManager(this, 3));
list.setAdapter(adapter);

Adapter Implementation

You use regular RecyclerView.Adapter's with the DragSelectRecyclerView. However, it has to implement the IDragSelectAdapter interface:

public class MainAdapter extends RecyclerView.Adapter<MainAdapter.MainViewHolder>
      implements IDragSelectAdapter {

  @Override
  public void setSelected(int index, boolean selected) {
    // 1. Make this index as selected in your implementation.
    // 2. Tell the RecyclerView.Adapter to render this item's changes.
    notifyItemChanged(index);
  }
  
  @Override
  public boolean isIndexSelectable(int index) {
    // Return false if you don't want this position to be selectable.
    // Useful for items like section headers.
    return true;
  }
 
  // The rest of your regular adapter overrides
}

Checkout the sample project for an in-depth example.


User Activation, Initializing Drag Selection

The library won't start selection mode unless you tell it to. You want the user to be able to active it. The click listener implementation setup in the adapter above will help with this.

public class MainActivity extends AppCompatActivity implements
      MainAdapter.ClickListener, DragSelectRecyclerViewAdapter.SelectionListener {

  private DragSelectRecyclerView listView;
  private MainAdapter adapter;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Setup adapter and callbacks
    adapter = new MainAdapter(this);

    // Setup the recycler view
    listView = (DragSelectRecyclerView) findViewById(R.id.list);
    listView.setLayoutManager(
        new GridLayoutManager(this, 
            getResources().getInteger(R.integer.grid_width)));
    listView.setAdapter(adapter);
  }

  /** 
   * See the adapter in the sample project for a click listener implementation. Click listeners 
   * aren't provided by this library.
   */
  @Override
  public void onClick(int index) {
    // Single click will select or deselect an item
    adapter.toggleSelected(index);
  }

  /** 
   * See the adapter in the sample project for a click listener implementation. Click listeners 
   * aren't provided by this library.
   */
  @Override
  public void onLongClick(int index) {
    // Initialize drag selection -- also selects the initial item
    listView.setDragSelectActive(true, index);
  }
}

Auto Scroll

By default, this library will auto scroll. During drag selection, moving your finger to the top of the list will scroll up. Moving your finger to the bottom of the list will scroll down.

At the start of the activation point at the top or bottom, the list will scroll slowly. The further you move into the activation area, the faster it will scroll.

You can disable auto scroll, or change the activation hotspot from your layout XML:

<com.afollestad.dragselectrecyclerview.DragSelectRecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    app:dsrv_autoScrollEnabled="true"
    app:dsrv_autoScrollHotspotHeight="56dp" />

56dp is the default hotspot height, you can raise or lower it if necessary. Smaller hotspots will scroll quickly since there's not much room for velocity change.

drag-select-recyclerview's People

Contributors

afollestad avatar carlosph avatar

Watchers

James Cloos avatar  avatar

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.