仿网易新闻客户端分类排序

效果图

先来看看网易新闻客户端以及自己实现的效果图,效果当然还是网易的好

如何实现拖拽一个Item

WindowManager添加一个ImageView,并且将这个ImageView的显示图片设置成被拖拽item的截图,截图可以通过ViewgetDrawingCache获得。拖拽的时候,隐藏原始的item。处理触摸事件的ActionMove,调整ImageView的位置,跟随手指移动。在ActionUp的时候removeView

GridView

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
@Override
public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l)
{
// 至少有两个item的时候,才有排序
if (getChildCount() >= 2)
{
mView = view;
// 在调用getDrawingCache必须先调用
view.setDrawingCacheEnabled(true);
// 获取截图并设置
Bitmap bitmap = view.getDrawingCache();
mDragItemView.setImageBitmap(bitmap);
// 设置拖拽的imageview的params
mDragItemLayoutParams.gravity = Gravity.TOP | Gravity.LEFT;
mDragItemLayoutParams.width = bitmap.getWidth();
mDragItemLayoutParams.height = bitmap.getHeight();
mDragItemLayoutParams.x = (mDownX - mDragItemLayoutParams.width / 2);
mDragItemLayoutParams.y = (mDownY - mDragItemLayoutParams.height / 2);
// 设置拖拽imageview的中心位于长按点击点
mDragItemLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE //不接受按键事件
| WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE // 不接收触摸事件
| WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON // 保持常亮
| WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN; // place the window within the entire screen, ignoring decorations around the border (such as the status bar)
mDragItemLayoutParams.format = PixelFormat.TRANSLUCENT;
mDragItemLayoutParams.windowAnimations = 0;
// 往WindowManager中添加拖拽的View
mWindowManager.addView(mDragItemView, mDragItemLayoutParams);

((GridViewSortAdapter) getAdapter()).init();

((GridViewSortAdapter) getAdapter()).hideView(i);

Log.d(TAG, "long click = " + i);

mDragStarted = true;
}
return true;
}

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
@Override
public boolean onTouchEvent(MotionEvent ev)
{
switch (ev.getAction() & ev.getActionMasked())
{
case MotionEvent.ACTION_DOWN:
mDownX = (int) ev.getRawX();
mDownY = (int) ev.getRawY();
break;

case MotionEvent.ACTION_MOVE:
if (mDragStarted)
{
// 保持中心
mDragItemLayoutParams.x = (int) (ev.getRawX() - mDragItemView.getWidth() / 2);
mDragItemLayoutParams.y = (int) (ev.getRawY() - mDragItemView.getHeight() / 2);
// 更新params
mWindowManager.updateViewLayout(mDragItemView, mDragItemLayoutParams);
// ......
}
break;

case MotionEvent.ACTION_UP:
// ......
break;
}
return super.onTouchEvent(ev);
}

如何实现隐藏拖拽的Item

在开始拖拽的时候,把隐藏的item的position告诉Adapter,调用AdapternotifyDataSetChanged刷新数据,在getView方法中判断当前的构建的item的position是不是需要隐藏的position是的话就设置viewinVisible

GridView

1
2
3
4
5
6
7
@Override
public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l)
{
// ......
((GridViewSortAdapter) getAdapter()).hideView(i);
// ......
}

GridViewSortAdapter

1
2
3
4
5
6
public void hideView(int item)
{
// ......
mStartHideItemPosition = item;
notifyDataSetChanged();
}

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
private int mStartHideItemPosition = AdapterView.INVALID_POSITION;

@Override
public View getView(int position, View convertView, ViewGroup parent)
{
ViewHolder holder = null;
if (convertView == null)
{
convertView = LayoutInflater.from(mContext).inflate(R.layout.view_item_grid_view_sort, null);
holder = new ViewHolder();
holder.title = (TextView) convertView.findViewById(R.id.view_item_grid_view_sort_title);
convertView.setTag(holder);
}
else
{
holder = (ViewHolder) convertView.getTag();
}
holder.title.setText(mTypeTitle.get(position));
if (mStartHideItemPosition == position)
{
convertView.setVisibility(View.INVISIBLE);
}
else
{
convertView.setVisibility(View.VISIBLE);
}
return convertView;
}

如何知道当前拖拽到哪一个item之上

要想在拖拽到其他item上面时互换位置,那必须得知道当前拖拽到了哪一个item之上。GrideView提供了一个方法叫pointToPosition,可以在处理触摸事件的ACTION_MOVE时,获取手指触摸的x,y来得到当前拖拽到item之上的position。这里需要注意的一点是,在拖拽的过程,同一个item的position是不会变的,除非调用了AdapternotifyDataSetChangedposition才会重新计算。比如position为2的item,在拖拽的过程无论怎么动画移动位置,他的position都是2,知道一次拖拽结束,ActionUp的时候,会调用notifyDataSetChanged

GridView

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public boolean onTouchEvent(MotionEvent ev)
{
case MotionEvent.ACTION_MOVE:
if (mDragStarted)
{
// ......
int position = pointToPosition((int) ev.getX(), (int) ev.getY());
// ......
}
break;
}

如何实现动画

一个item需要水平以及垂直需要移动的距离可以事先先计算出来,其实水平距离不管怎么样一定会是GridView一个单元格的宽度加上水平间距,垂直距离无论如何都是一个单元格的高度加上垂直距离,宽度非常好取,高度的话,这里默认item 的高度和单元格的高度相同。

GridViewSortAdapter

1
2
3
View view = mGridView.getChildAt(0);
mTranslateX = view.getWidth() + mHorizontalSpace;
mTranslateY = view.getHeight() + mVerticalSpace;

当拖拽到其他item之上时,开始动画

SortGridView

1
2
3
4
5
if (position != AdapterView.INVALID_POSITION && !((GridViewSortAdapter) getAdapter()).isInAnimation())
{
Log.d(TAG, "position = " + position);
((GridViewSortAdapter) getAdapter()).swap(position);
}

GridSortAdapter

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
public void swap(int position)
{
mAnimatorSetList.clear();

int r_p = mPositionList.indexOf(position);

Log.d(TAG, "r_p = " + r_p);

if (mCurrentHideItemPosition < r_p)
{
for (int i = mCurrentHideItemPosition + 1; i <= r_p; i++)
{
View v = mGridView.getChildAt(mPositionList.get(i));
if (i % mColsNum == 0 && i > 0)
{
startMoveAnimation(v, v.getTranslationX() + mTranslateX * (mColsNum - 1), v.getTranslationY() -
mTranslateY);
}
else
{
startMoveAnimation(v, v.getTranslationX() - mTranslateX, 0);
}
}
}
else if (mCurrentHideItemPosition > r_p)
{
for (int i = r_p; i < mCurrentHideItemPosition; i++)
{
View v = mGridView.getChildAt(mPositionList.get(i));
if ((i + 1) % mColsNum == 0)
{
startMoveAnimation(v, v.getTranslationX() - mTranslateX * (mColsNum - 1), v.getTranslationY() + mTranslateY);
}
else
{
startMoveAnimation(v, v.getTranslationX() + mTranslateX, 0);
}
}
}

resetPositionList();

int value = mPositionList.get(mStartHideItemPosition);
if (mStartHideItemPosition < r_p)
{
mPositionList.add(r_p + 1, value);
mPositionList.remove(mStartHideItemPosition);
}
else if (mStartHideItemPosition > r_p)
{
mPositionList.add(r_p, value);
mPositionList.remove(mStartHideItemPosition + 1);
}

mCurrentHideItemPosition = r_p;
}

public boolean isInAnimation()
{
return mInAnimation;
}

private void resetPositionList()
{
mPositionList.clear();
for (int i = 0; i < mGridView.getChildCount(); i++)
{
mPositionList.add(i);
}
}


private void startMoveAnimation(View myView, float x, float y)
{
AnimatorSet set = new AnimatorSet();
set.playTogether(
ObjectAnimator.ofFloat(myView, "translationX", myView.getTranslationX(), x),
ObjectAnimator.ofFloat(myView, "translationY", myView.getTranslationY(), y)
);
set.addListener(new Animator.AnimatorListener()
{
@Override
public void onAnimationStart(Animator animator)
{
mInAnimation = true;
}

@Override
public void onAnimationEnd(Animator animator)
{
mInAnimation = false;
}

@Override
public void onAnimationCancel(Animator animator)
{

}

@Override
public void onAnimationRepeat(Animator animator)
{

}
});
mAnimatorSetList.add(set);
set.setDuration(150).start();
}

这里我主要解释一下代码中 mPositionList这个列表的作用,之前说过一次拖拽的时候,item的position是不会变化的。

假设有一组数据

1
2
3
a b c d
e f g h
i j k l

此时mPositionList的内容就是 0 1 2 3 4 5 6 7 8 9 10 11 12
现在将c拖拽到g上,拖拽完成之后的数据应该是,未释放手指

1
2
3
a b d e
f g c h
i j k l

此时mPositionList的内容就是 0 1 2 4 5 6 7 3 8 9 10 11 12
紧接着,继续拖拽ce上,你会发现调用pointToPosition方法得到的position是5,但是e现在的索引是4
因此你只需要调用

1
mPositionList.indexOf(pointToPosition(x,y))

就能得到真实的item的position

其他

如果把GridView的列数变成1那么似曾相识啊
gridviewex.gif