1. 概述
在开发过程中，有时候遇到这样的需求：点击ListView的item，可以动态的上移和下移，就和支付宝的扣款顺序一样，如下图所示：
图片.png
效果如下：
1>：银行卡列表为listview，默认向上向下箭头隐藏；
2>：点击某个item，就让向上向下箭头显示；
3>：第一个item的向上箭头不能点击，最后一个item的向下箭头不能点击；
4>：对于中间的item：
点击向上箭头：和上边item数据交换位置；
点击向下箭头：和下边item数据交换位置；
说明：这个效果自己也是参照网上别人写的，自己根据自己理解有重新写了一遍，然后贴出思路和代码
2. 实现思路
1. 利用 ListView+BaseAdapter 来布局；
2. 在 BaseAdapter中 的 getView() 方法中，需要设置3个点击事件：
1>：开始时：默认向上向下箭头隐藏；
2>：设置 listview 的 setOnItemClickListener 点击事件，然后将点击的 item 的 向上向下箭头显示；
3>：向上箭头设置点击事件，点击时将该 item 上移；
4>：向下箭头设置点击事件，点击时将该 item 下移；
3. item上移下移的原理：
1>：点击向上箭头时，将当前item的数据值与前一个 item 的数据值交换，并调用adapter.notifyDataSetChanged()刷新数据；
2>：点击向下箭头时，将当前item的数据值与后一个 item 的数据值交换，并调用adapter.notifyDataSetChanged()刷新数据；
3. 代码如下
1>：DefaultPayStyleActivity代码如下：
/**
* Email: 2185134304@qq.com
* Created by Novate 2018/8/21 9:42
* Version 1.0
* Params:
* Description: 默认付款方式
*/
public class DefaultPayStyleActivity extends BaseActivity implements ChangeAdapter.Callback {
private ListView lv;
private ChangeAdapter adapter;
private ArrayList<String> itemList;
private int currentPosition = -1;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_default_pay_style);
}
@Override
public void initView() {
lv = (ListView) findViewById(R.id.lv_change);
initDatas() ;
adapter = new ChangeAdapter(this, itemList, this, currentPosition);
lv.setAdapter(adapter);
}
private void initDatas() {
itemList = new ArrayList<String>();
itemList.add("余额宝");
itemList.add("蚂蚁花呗");
itemList.add("余额");
itemList.add("工商银行储蓄卡(1689)");
itemList.add("花呗分期");
}
/**
* ChangeAdapter中的3个点击事件
* 1. 整个item点击事件的处理逻辑
* 2. 向上图标按键点击事件的处理逻辑
* 3. 向下图标按键点击事件的处理逻辑
*/
@Override
public void click(View v) {
int curPosition;
int mCurPosition;
switch (v.getId()){
//整个item点击事件的处理逻辑
case R.id.item:
// 通过getTag(key)方法, 强制类型转换获取该item的position，然后调用refresh()方法通知adapter当前position数据更新了，
// 然后adapter就会根据 currentPosition处理向上向下箭头的显示与隐藏
mCurPosition = (int) v.getTag(R.id.tag_item_click);
currentPosition = mCurPosition;
adapter.refresh(currentPosition);
break;
//向上图标按键点击事件的处理逻辑
case R.id.up:
// 调用getTag获取点击的position，调换当前位置与上一个位置的数据值，就实现了item上移效果，对于第一个item，不处理上移，
// 然后调用refresh()方法刷新数据即可
curPosition = (int) v.getTag();
if (curPosition != 0) {
String upFirst = itemList.get(curPosition); // 当前item位置对应数据
String upSecond = itemList.get(curPosition - 1); // 上一个位置数据值
itemList.remove(curPosition);
itemList.remove(curPosition - 1);
itemList.add(curPosition - 1, upFirst);
itemList.add(curPosition, upSecond);
currentPosition = curPosition - 1;
adapter.refresh(currentPosition);
}
break;
//向下图标按键点击事件的处理逻辑
case R.id.down:
// 调用getTag获取点击的position，调用当前位置与下一个位置的数据值，就实现item下移效果，对于最后一个item，不处理下移，
// 然后调用refresh()方法刷新数据即可
curPosition = (int) v.getTag();
if (curPosition != itemList.size() - 1) {
String downFirst = itemList.get(curPosition);
String downSecond = itemList.get(curPosition + 1);
itemList.remove(curPosition + 1);
itemList.remove(curPosition);
itemList.add(curPosition, downSecond);
itemList.add(curPosition + 1, downFirst);
currentPosition = curPosition + 1;
adapter.refresh(currentPosition);
}
break;
default:
break;
}
}
}
2>：ChangeAdapter代码如下：
/**
* Email: 2185134304@qq.com
* Created by Novate 2018/8/21 10:24
* Version 1.0
* Params:
* Description: 默认付款方式扣款
*/
public class ChangeAdapter extends BaseAdapter implements View.OnClickListener {
private ArrayList<String> itemList;
private Context mContext;
private Callback mCallback;
private int mCurPosition;//定义该变量来标记当前item的点击位置
//定义回调接口实现ListView内Item的内部控件的点击事件
public interface Callback {
public void click(View v);
}
public ChangeAdapter(Context mContext, ArrayList<String> itemList, Callback mCallback, int mCurPosition) {
this.mContext = mContext;
this.itemList = itemList;
this.mCallback = mCallback;
this.mCurPosition = mCurPosition;
}
@Override
public int getCount() {
return itemList.size();
}
@Override
public Object getItem(int position) {
return itemList.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_change, null);
viewHolder = new ViewHolder();
viewHolder.itemName = (CustomTextView) convertView.findViewById(R.id.item_name);
viewHolder.upBtn = (ImageView) convertView.findViewById(R.id.up);
viewHolder.downBtn = (ImageView) convertView.findViewById(R.id.down);
convertView.setTag(R.id.tag_viewholder, viewHolder);
} else {
viewHolder = (ViewHolder) convertView.getTag(R.id.tag_viewholder);
}
viewHolder.itemName.setText(itemList.get(position));
//根据点击或者向上向下操作的item的当前位置，来控制向上和向下的按钮的可见与否
if (mCurPosition == position && mCurPosition == 0) {
// 自己添加
viewHolder.upBtn.setVisibility(View.VISIBLE);
viewHolder.upBtn.setEnabled(false);
viewHolder.downBtn.setVisibility(View.VISIBLE);
} else if (mCurPosition == position && mCurPosition == itemList.size() - 1) {
viewHolder.upBtn.setVisibility(View.VISIBLE);
// 自己添加
viewHolder.downBtn.setVisibility(View.VISIBLE);
viewHolder.downBtn.setEnabled(false);
} else if (mCurPosition == position && mCurPosition != 0 && mCurPosition != itemList.size() - 1) {
viewHolder.upBtn.setVisibility(View.VISIBLE);
viewHolder.downBtn.setVisibility(View.VISIBLE);
// 自己添加
viewHolder.upBtn.setEnabled(true);
viewHolder.upBtn.setEnabled(true);
} else {
viewHolder.upBtn.setVisibility(View.INVISIBLE);
viewHolder.downBtn.setVisibility(View.INVISIBLE);
}
//设置item向下移动的点击事件并标志其位置，只需要设置position即可
viewHolder.downBtn.setOnClickListener(this);
viewHolder.downBtn.setTag(position);
//设置item向上移动的点击事件并标志其位置，只需要设置position即可
viewHolder.upBtn.setOnClickListener(this);
viewHolder.upBtn.setTag(position);
//设置整个item的点击事件并标志其位置，需要通过tag_item_click
convertView.setOnClickListener(this);
convertView.setTag(R.id.tag_item_click, position);
return convertView;
}
class ViewHolder {
CustomTextView itemName;
ImageView upBtn,downBtn;
}
//定义item内部控件的点击事件由回调接口定义的点击方法来处理
@Override
public void onClick(View v) {
mCallback.click(v);
}
//在对数据进行处理后，调用该方法，通知adapter刷新数据
public void refresh(int currentPosition) {
mCurPosition = currentPosition;
notifyDataSetChanged();
}
}
3>：item_change布局文件如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/px70"
android:paddingLeft="@dimen/px30"
android:paddingRight="@dimen/px30"
>
<cn.uploo.yhh.view.CustomTextView
android:id="@+id/item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="余额宝"
android:layout_centerVertical="true"
/>
<ImageView
android:id="@+id/up"
android:layout_width="@dimen/px50"
android:layout_height="@dimen/px50"
android:src="@mipmap/up"
android:background="@null"
android:visibility="visible"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/px60"
/>
<ImageView
android:id="@+id/down"
android:layout_width="@dimen/px50"
android:layout_height="@dimen/px50"
android:src="@mipmap/down"
android:background="@null"
android:visibility="visible"
android:layout_toLeftOf="@id/up"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/px30"
/>
</RelativeLayout>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/px1"
android:background="@color/bg_hui"
/>
</LinearLayout>
4>：在res -> values 创建 ids.xml文件：
<resources>
<!-- 绑定 ChangeAdapter 中的 viewholder -->
<item type="id" name="tag_viewholder"></item>
<!-- 绑定 ChangeAdapter 的item 点击事件的id -->
<item type="id" name="tag_item_click"></item>
</resources>
4. 需要注意的地方
1. 在ChangeAdapter中定义接口Callback，然后在 getView() 方法中对 item、向上箭头、向下箭头设置点击事件，
并且通过setTag方法保存对应position位置：
a：对于 viewHolder、整个item的点击事件需要在 res -> values -> ids中定义对应id
来保存viewHolder和点击的item：
convertView.setTag(R.id.tag_viewholder, viewHolder);
convertView.setTag(R.id.tag_item_click, position);
b：对于向上、向下箭头的点击事件直接使用setTag方法保存点击的位置就可以：
viewHolder.downBtn.setOnClickListener(this);
viewHolder.downBtn.setTag(position);
viewHolder.upBtn.setOnClickListener(this);
viewHolder.upBtn.setTag(position);
c：在 DefaultPayStyleActivity中直接实现Callback接口，然后通过ChangeAdapter的构造方法把 callback的
this传递给 ChangeAdapter即可
2. 从第一步可知：我们已经对item、两个箭头的点击事件通过setTag方法和setTag(R.id.tag_item_click, position)
方法将点击的 位置 position保存了，可以直接在 Activity中听过 getTag方法获取即可；
3. 然后 在 ChangeAdapter中 定义 refresh()刷新数据的方法，当点击位置放生改变后，通知adapter刷新：
4. 在DefaultPayStyleActivity中重点就是click方法：
1>：对于item的点击事件：首先通过 getTag方法并强制转换为点击的item的position，然后调用refresh()方法刷新
数据；
2>：对于向上箭头点击事件：通过getTag获取到当前点击位置，并交换当前位置和上一个位置的数据值，此时就实现了
item上移效果，对于第一个item不处理上移效果，最后调用refresh()刷新数据即可；
3>：对于向下箭头点击事件：通过getTag获取到当前点击位置，并交换当前位置和下一个位置的数据值，此时就实现了
item下移效果，对于最后一个item不处理下移效果，最后调用refresh()刷新数据即可；
5. 这里没有存储item移动位置后的位置，如果需要，可以使用sp存储，这样下次再打开界面时就可以看见之前移动后的位置.
这里会涉及到ArrayList移除数据 remove方法的使用，详情见下边文章：
ArrayList中上移下移list集合中相邻两个位置数据
