RecyclerView的Item点击事件，增加删除Item瀑布流动画效果，长按拖动Item，RecyclerView复杂布局、实现新闻频道选择器
RecyclerView的Item点击事件的实现，增加和删除Item使用瀑布流动画效果，长按拖动Item，RecyclerView复杂布局的实现使用、RecyclerView去实现今日头条新闻频道选择器。
使用ItemTouchHelper实现Item的拖动交换，由于RecyclerView本身没有自带的Item点击事件所以我们仿照ListView的Item点击事件利用RecyclerView自带findChildViewUnder方法的自己实现点击效果。
首先我们来看一下demo的运行效果：
demo源码下载连接：(http://download.csdn.net/detail/qq_30000411/9700050)
接下来是我们代码的实现，（注：本demo拖动事件的实现为不同类型的Item之间不能进行拖动）。
RecyclerView的适配器的实现扩展Item自定义的交换的接口并且重写交换方法，每个Item布局建立不同的ViewHolder，利用GridLayoutManager来实现每一个Item应该怎样放置（传入每个类型的公倍数)。
复杂布局不用类型的Item每行多少列的代码如下：
GridLayoutManager gridLayoutManager = new
GridLayoutManager(this.getApplicationContext(),4);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
AddPinDao addPinDao = addPinDaos.get(position);
if (addPinDao.getTag() == 0 || addPinDao.getTag() == 2){
return 4;
}else {
return 1;
}
}
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
适配器的代码如下：
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.Collections;
import java.util.List;
/**
* 适配器添加频道的recyclerview 的适配器
* Created by lwp940118 on 2016/11/28.
*/
public class RecyclerView_Add_Adapter extends RecyclerView.Adapter implements
RecyclerViewAddItemCallBackListener{
private int tag = 0;
private List addPinDaos;
private Context context;
public RecyclerView_Add_Adapter(List addPinDaos,Context context){
super();
this.addPinDaos = addPinDaos;
this.context = context;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = null;
RecyclerView.ViewHolder viewHolder = null;
switch (viewType){
case 0:
view = LayoutInflater.from(context).inflate(R.layout.recyclerview_add_item_one
,parent,false);
viewHolder = new ViewHolderOne(view);
break;
case 1:
view = LayoutInflater.from(context).inflate(R.layout.recyclerview_add_item_my
,parent,false);
viewHolder = new ViewHolderMy(view);
break;
case 2:
view = LayoutInflater.from(context).inflate(R.layout.recyclerview_add_item_tow
,parent,false);
viewHolder = new ViewHolderTow(view);
break;
case 3:
view = LayoutInflater.from(context).inflate(R.layout.recyclerview_add_item_pindao
,parent,false);
viewHolder = new ViewHolderPinDao(view);
}
return viewHolder;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
AddPinDao addPinDao = addPinDaos.get(position);
switch (getItemViewType(position)){
case 0:
final ViewHolderOne viewHolderOne = (ViewHolderOne)holder;
viewHolderOne.textView_one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (tag == 0) {
viewHolderOne.textView_one.setText("完 成");
viewHolderOne.textView_tuodong.setText("拖动可以排序");
tag = 1;
Log.e("----t2",""+tag);
for (int i = 0;i < addPinDaos.size();i++){
if (addPinDaos.get(i).getTag() == 1){
addPinDaos.get(i).setMyTag(1);
}
}
notifyDataSetChanged();
}else {
viewHolderOne.textView_one.setText("编 辑");
viewHolderOne.textView_tuodong.setText("");
tag = 0;
Log.e("----t1",""+tag);
for (int i = 0;i < addPinDaos.size();i++){
if (addPinDaos.get(i).getTag() == 1){
addPinDaos.get(i).setMyTag(0);
}
}
notifyDataSetChanged();
}
}
});
break;
case 1:
final ViewHolderMy viewHolderMy = (ViewHolderMy)holder;
viewHolderMy.textView_my.setText(addPinDao.getMessage());
if (addPinDao.getMyTag() == 1) {
viewHolderMy.imageView_my.setVisibility(View.VISIBLE);
}else {
viewHolderMy.imageView_my.setVisibility(View.INVISIBLE);
}
break;
case 2:
final ViewHolderTow viewHolderTow = (ViewHolderTow)holder;
break;
case 3:
final ViewHolderPinDao viewHolderPinDao = (ViewHolderPinDao)holder;
viewHolderPinDao.textView_pin.setText(addPinDao.getMessage());
break;
}
}
@Override
public int getItemCount() {
return addPinDaos.size();
}
@Override
public int getItemViewType(int position) {
AddPinDao addPinDao = addPinDaos.get(position);
switch (addPinDao.getTag()){
case 0:
return 0;
case 1:
return 1;
case 2:
return 2;
case 3:
return 3;
}
return 0;
}
@Override
public void onMove(int fromPosition, int toPosition) {
AddPinDao addPinDao = addPinDaos.get(fromPosition);
AddPinDao addPinDao1 = addPinDaos.get(toPosition);
if (fromPosition != 1 && toPosition != 1) {
if ((addPinDao.getTag() == 1 && addPinDao1.getTag() == 1) || (addPinDao.getTag()
== 3 && addPinDao1.getTag() == 3)) {
//通知数组的移动
Collections.swap(addPinDaos, fromPosition, toPosition);
notifyItemMoved(fromPosition, toPosition);
}
}
}
class ViewHolderMy extends RecyclerView.ViewHolder{
private TextView textView_my;
private ImageView imageView_my;
public ViewHolderMy(View itemView) {
super(itemView);
imageView_my = (ImageView)itemView.findViewById(R.id.imageView_recyclerview_add_itme_my);
textView_my = (TextView)itemView.findViewById(R.id.textview_recyelerview_add_item_my);
}
}
class ViewHolderPinDao extends RecyclerView.ViewHolder{
private TextView textView_pin;
public ViewHolderPinDao(View itemView) {
super(itemView);
textView_pin = (TextView) itemView.findViewById(R.id.textview_recyelerview_add_item_pindao);
}
}
class ViewHolderOne extends RecyclerView.ViewHolder{
private TextView textView_tuodong;
private TextView textView_one;
public ViewHolderOne(View itemView) {
super(itemView);
textView_one = (TextView)itemView.findViewById(R.id.textview_recyclerview_add_item_one);
textView_tuodong = (TextView)itemView.findViewById(R.id.textview_recyclerview_add_item_one_tuodong);
}
}
class ViewHolderTow extends RecyclerView.ViewHolder{
public ViewHolderTow(View itemView) {
super(itemView);
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
Item交换接口的实现：
public interface RecyclerViewAddItemCallBackListener {
/**
* itme交换的接口
* @param fromPosition
* @param toPosition
*/
void onMove(int fromPosition,int toPosition);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
利用ItemTouchHelper实现RecyclerView的Item长按拖动交换代码：
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.support.v7.widget.helper.ItemTouchHelper;
/**
* Created by lwp940118 on 2016/12/2.
*/
public class OnItemCallbackHelper extends ItemTouchHelper.Callback {
private RecyclerView_Add_Adapter recyclerView_add_adapter;
public OnItemCallbackHelper(RecyclerView_Add_Adapter recyclerView_add_adapter){
this.recyclerView_add_adapter = recyclerView_add_adapter;
}
/**
* 是否删除
* @return
*/
@Override
public boolean isItemViewSwipeEnabled() {
return false;
}
/**
* 是否拖住
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
int dragFlags;
RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
if(layoutManager instanceof GridLayoutManager || layoutManager instanceof StaggeredGridLayoutManager){
dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN|ItemTouchHelper.START | ItemTouchHelper.END;
}else{
dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
}
int swipeFlag = 0;
return makeMovementFlags(dragFlags,swipeFlag);
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder,
RecyclerView.ViewHolder target) {
recyclerView_add_adapter.onMove(viewHolder.getAdapterPosition(),
target.getAdapterPosition());
return true;
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
利用OnItemTouchListener实现对RecyclerViewItem的点击：
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
/**
* Created by lwp940118 on 2016/12/2.
*/
public class RecyclerViewAddItemOnClickListener implements RecyclerView.OnItemTouchListener{
public interface OnItemClickListener{
void onItemCilck(View view, int position);
}
private OnItemClickListener onItemClickListener;
private GestureDetector gestureDetector;
public RecyclerViewAddItemOnClickListener(Context context, final RecyclerView recyclerView,
OnItemClickListener onItemClickListener){
this.onItemClickListener = onItemClickListener;
gestureDetector = new GestureDetector(context,new GestureDetector.SimpleOnGestureListener(){
@Override
public void onLongPress(MotionEvent e) {
super.onLongPress(e);
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
});
}
@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
View view = rv.findChildViewUnder(e.getX(),e.getY());
if (view != null && onItemClickListener != null && gestureDetector.onTouchEvent(e)
&& rv.getChildPosition(view) > 1){
onItemClickListener.onItemCilck(view,rv.getChildPosition(view));
}
return false;
}
@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
为了实现今日头条的频道选择效果所以在Item的点击之后会出现Item的移动，为了简单、方便的实现该效果，我没有重写View的动画，而是利用RecyclerView的增加和删除代替View的移动效果。因此在Item的点击事件中需要出现Item的增加和删除逻辑操作，进而就产生了一个处理RecyclerView的增加删除类。代码如下：
import java.util.List;
/**
* Created by lwp940118 on 2016/12/2.
*/
public class RecyclerViewAddItemExchange {
private int position;
private RecyclerView_Add_Adapter recyclerView_add_adapter;
private List addPinDaos;
public RecyclerViewAddItemExchange(int position,
RecyclerView_Add_Adapter recyclerView_add_adapter,
List addPinDaos){
this.position = position;
this.recyclerView_add_adapter = recyclerView_add_adapter;
this.addPinDaos = addPinDaos;
itemExchange();
}
private void itemExchange(){
AddPinDao addPinDao = addPinDaos.get(position);
int toposition = position ;
if (addPinDao.getTag() == 1){
for (int i = 2; i < addPinDaos.size(); i++){
if (addPinDaos.get(i).getTag() == 3){
toposition = i;
break;
}
}
addPinDao.setTag(3);
addPinDaos.remove(position);
recyclerView_add_adapter.notifyItemRemoved(position);
addPinDaos.add(toposition - 1,addPinDao);
recyclerView_add_adapter.notifyItemInserted(toposition - 1);
}else if (addPinDao.getTag() == 3){
addPinDaos.get(position).setTag(1);
for (int i = 2; i < addPinDaos.size(); i++){
if (addPinDaos.get(i).getTag() == 2){
toposition = i;
break;
}
}
addPinDao.setTag(1);
addPinDaos.remove(position);
recyclerView_add_adapter.notifyItemRemoved(position);
addPinDaos.add(toposition,addPinDao);
recyclerView_add_adapter.notifyItemInserted(toposition);
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
对于数据对象的定义：
/**
* recyclerview 的item的 频道汉字列表D的类
* Created by lwp940118 on 2016/11/28.
*/
public class AddPinDao {
private String message;
private int tag;
private int myTag;
public int getMyTag() {
return myTag;
}
public void setMyTag(int myTag) {
this.myTag = myTag;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public int getTag() {
return tag;
}
public void setTag(int tag) {
this.tag = tag;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
Activity的代码实现：
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;
import android.util.Log;
import android.view.View;
import android.widget.ImageButton;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends Activity implements View.OnClickListener{
private ImageButton imageButton_add_back;
private RecyclerView recyclerView_add;
private RecyclerView_Add_Adapter recyclerView_add_adapter = null;
private List addPinDaos = new ArrayList();
private RecyclerViewAddItemCallBackListener recyclerViewAddItemCallBackListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}
private void initData(){
for (int i = 0 ; i < 4;i++){
if (i == 1){
for (int t = 0 ; t < 20;t++){
AddPinDao addPinDao = new AddPinDao();
addPinDao.setTag(1);
addPinDao.setMessage("首页"+t);
addPinDao.setMyTag(0);
addPinDaos.add(addPinDao);
}
}
AddPinDao addPinDao = new AddPinDao();
addPinDao.setTag(i);
addPinDao.setMessage("wq"+i);
addPinDao.setMyTag(0);
addPinDaos.add(addPinDao);
}
for (int i = 0 ; i < 30;i++){
AddPinDao addPinDao = new AddPinDao();
addPinDao.setTag(3);
addPinDao.setMessage("wq"+i);
addPinDao.setMyTag(0);
addPinDaos.add(addPinDao);
}
}
private void initView(){
imageButton_add_back = (ImageButton)findViewById(R.id.imagebutton_add_back);
imageButton_add_back.setOnClickListener(this);
recyclerView_add = (RecyclerView)findViewById(R.id.recylerView_add);
if (recyclerView_add_adapter == null){
recyclerView_add_adapter = new RecyclerView_Add_Adapter(addPinDaos,this);
}
GridLayoutManager gridLayoutManager = new
GridLayoutManager(this.getApplicationContext(),4);
gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
AddPinDao addPinDao = addPinDaos.get(position);
if (addPinDao.getTag() == 0 || addPinDao.getTag() == 2){
return 4;
}else {
return 1;
}
}
});
recyclerView_add.setLayoutManager(gridLayoutManager);
recyclerView_add.setAdapter(recyclerView_add_adapter);
recyclerView_add.setItemAnimator(new DefaultItemAnimator());
ItemTouchHelper.Callback callback = new OnItemCallbackHelper(recyclerView_add_adapter);
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
itemTouchHelper.attachToRecyclerView(recyclerView_add);
recyclerView_add.addOnItemTouchListener(new RecyclerViewAddItemOnClickListener(
getApplicationContext(),recyclerView_add,new RecyclerViewAddItemOnClickListener
.OnItemClickListener(){
@Override
public void onItemCilck(View view, int position) {
Log.e("---","点击了"+position);
RecyclerViewAddItemExchange recyclerViewAddItemExchange = new
RecyclerViewAddItemExchange(position,recyclerView_add_adapter,addPinDaos);
}
}));
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.imagebutton_add_back:
break;
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
然后就是 各个XML的布局文件，
activity的xml为：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
四个Item的界面布局分别为：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
到此已经全部实现，仿今日头条的频道选择器。RecyclerViewItem的交换点击增加删除复杂布局。
--------------------- 本文来自 xy_liwp 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_30000411/article/details/53436523?utm_source=copy