DragBoardView Save

:star: Android 看板,支持项拖拽、列拖拽。Draggable kanban/board view for Android.

Project README

DragBoardView

Codacy Badge

DragBoardView is a draggable kanban/board view for Android. it supports drag item, drag column, auto center

You can just use it like a RecyclerView!

Just use it like a RecyclerView! 中文文档

How to use Recyclerview:

1. Add dependency for recyclerview
compile 'com.android.support:recyclerview-v7:23.1.0'

Add recyclerview in main layout file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v7.widget.RecyclerView
        android:id="@+id/item_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        />
</LinearLayout>
2. Make one item layout xml file
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">

    <TextView
        android:id="@+id/txtChords"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center_horizontal"
        />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/txtLyrics"/>

</LinearLayout>
3. Make model class for each item in list.

it can be any custom class.

public class Item {

    private String name;

    public Item(String n) {
        name = n;
    }
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
4. make adapter for recyclerview
import androidx.recyclerview.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import com.codexpedia.list.viewholder.R;
import java.util.ArrayList;

public class ItemArrayAdapter extends RecyclerView.Adapter<ItemArrayAdapter.ViewHolder> {

    //All methods in this adapter are required for a bare minimum recyclerview adapter
    private int listItemLayout;
    private ArrayList<Item> itemList;
    // Constructor of the class
    public ItemArrayAdapter(int layoutId, ArrayList<Item> itemList) {
        listItemLayout = layoutId;
        this.itemList = itemList;
    }

    // get the size of the list
    @Override
    public int getItemCount() {
        return itemList == null ? 0 : itemList.size();
    }


    // specify the row layout file and click for each row
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(listItemLayout, parent, false);
        ViewHolder myViewHolder = new ViewHolder(view);
        return myViewHolder;
    }

    // load data in each row element
    @Override
    public void onBindViewHolder(final ViewHolder holder, final int listPosition) {
        TextView item = holder.item;
        item.setText(itemList.get(listPosition).getName());
    }

    // Static inner class to initialize the views of rows
    static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        public TextView item;
        public ViewHolder(View itemView) {
            super(itemView);
            itemView.setOnClickListener(this);
            item = (TextView) itemView.findViewById(R.id.txtChords);
        }
        @Override
        public void onClick(View view) {
            Log.d("onclick", "onClick " + getLayoutPosition() + " " + item.getText());
        }
    }
5. bind adapter with recyclerview
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.codexpedia.list.viewholder.R;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

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

        // Initializing list view with the custom adapter
        ArrayList <Item> itemList = new ArrayList<Item>();

        ItemArrayAdapter itemArrayAdapter = new ItemArrayAdapter(R.layout.list_item, itemList);
        recyclerView = (RecyclerView) findViewById(R.id.item_list);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setItemAnimator(new DefaultItemAnimator());
        recyclerView.setAdapter(itemArrayAdapter);

        // Populating list items
        for(int i=0; i<100; i++) {
            itemList.add(new Item("Item " + i));
        }

    }

}

As for DragBoardView, it's all the same.

How to use DragBoardView:

1. Add dependency for DragBoardView

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency

dependencies {
    compile 'com.github.LinXueyuanStdio:DragBoardView:v1.0.0'
}

declare it in your main layout xml file:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>

    <com.time.cat.dragboardview.DragBoardView
        android:id="@+id/layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"/>

</RelativeLayout>
2. Make two item layout xml files.

One for each column item. it should contains a RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/col_content_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

</RelativeLayout>

One for the item in each column.

<TextView
    android:id="@+id/item_title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="item"/>
3. Make model class for each column and each item in list.

for each column, it should implement DragColumn interface.

public class Entry implements DragColumn {
    private final String name;
    private int columnIndex;
    private final List<DragItem> itemList;

    public Entry(String name, int columnIndex, List<DragItem> items) {
        this.name = name;
        this.columnIndex = columnIndex;
        this.itemList = items;
    }

    public String getName() {
        return name;
    }

    public List<DragItem> getItemList() {
        return itemList;
    }

    @Override
    public int getColumnIndex() {
        return columnIndex;
    }

    @Override
    public void setColumnIndex(int columnIndexInHorizontalRecycleView) {
        //save to database here
    }
}

for each item in the column, it should implement DragItem interface.

public class Item implements DragItem {
    private final String itemName;
    private int colIndex;
    private int itemIndex;

    public Item(String itemName, int colIndex, int itemIndex) {
        this.itemName = itemName;
        this.colIndex = colIndex;
        this.itemIndex = itemIndex;
    }

    public String getItemName() {
        return itemName;
    }

    @Override
    public int getColumnIndex() {
        return colIndex;
    }

    @Override
    public int getItemIndex() {
        return itemIndex;
    }

    @Override
    public void setColumnIndex(int columnIndexInHorizontalRecycleView) {
        //save to database here
    }

    @Override
    public void setItemIndex(int itemIndexInVerticalRecycleView) {
        //save to database here
    }
}
4. make adapter for DragBoardView
public class ColumnAdapter extends HorizontalAdapter<ColumnAdapter.ViewHolder>
public class ItemAdapter extends VerticalAdapter<ItemAdapter.ViewHolder>
5. bind adapter with DragBoardView
public class MainActivity extends AppCompatActivity {

    DragBoardView dragBoardView;
    List<DragColumn> mData = new ArrayList<>();

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

        dragBoardView = findViewById(R.id.layout_main);
        mAdapter = new ColumnAdapter(this);
        mAdapter.setData(mData);
        dragBoardView.setHorizontalAdapter(mAdapter);
    }

}

gif

ScreenShot

截图1 截图2 截图3
截图4 截图5

Advance

Meanwhile, PagerRecyclerView is able to be customized by these 3 params:

name format description
singlePageFling boolean single Page Fling, default false
triggerOffset float trigger offset, default 0.25f
flingFactor float fling factor, default 0.15f

demo is more clear

demo apk

download

Open Source Agenda is not affiliated with "DragBoardView" Project. README Source: LinXueyuanStdio/DragBoardView

Open Source Agenda Badge

Open Source Agenda Rating