Android仿支付宝扣款顺序，动态改变ListView各Item次序

前言：今天遇到个需求，需要让用户动态选择语音传输方式的次序，突然想起支付宝选择扣款顺序的功能，恰好能满足需要，就花了点时间写了个demo，在此权当学习记录

---

**先上效果图**

• 支付宝的效果

• demo的效果

---

思路：

• 用ListView+BaseAdapter来布局
• 在BaseAdapter的getView方法中，我们要设置三个点击事件

  1. 当前view的点击事件，即ListView的item的点击事件，点击时将该item的向上和向下的图标按钮设为可见

  2. 向上图标按钮的点击事件，点击时将该item往上移

  3. 向下图标按钮的点击时间，点击时将该item往下移

• item向上向下移动的原理
  • 点击向上图标时，将当前item的数据值与前一个item的数据值进行交换，并调用adapter的notifyDataSetChanged()方法进行刷新；
  • 同理，点击向上按钮，将当前item的数据值与下一个item的数据值进行交换后刷新；

---

**实现：**

• 首先定义ListView的item布局item_change.xml，
  
  很简单，在线性布局中放置三个控件，TextView用于显示文字内容，两个ImageButton分别放置向上和向下的图标按钮，并在初始的时候将这两个按钮设为不可见。

    <?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="80dp"
    android:orientation="horizontal">
  
    <TextView
        android:id="@+id/item_name"
        android:layout_width="140dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="5dp"
        android:text="余额宝"/>
  
    <ImageButton
        android:id="@+id/up"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@drawable/up"
        android:background="@null"
        android:layout_marginLeft="50dp"
        android:layout_gravity="center_vertical"
        android:visibility="invisible"/>
  
    <ImageButton
        android:id="@+id/down"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@drawable/down"
        android:background="@null"
        android:layout_marginLeft="45dp"
        android:layout_gravity="center_vertical"
        android:visibility="invisible"/>
  
    </LinearLayout>
  

• 接下来看Adapter的代码,定义ChangeAdapter继承自BaseAdapter

    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 = (TextView) convertView.findViewById(R.id.item_name);
            viewHolder.upBtn = (ImageButton) convertView.findViewById(R.id.up);
            viewHolder.downBtn = (ImageButton) 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.downBtn.setVisibility(View.VISIBLE);
        } else if (mCurPosition == position && mCurPosition == itemList.size() - 1) {
            viewHolder.upBtn.setVisibility(View.VISIBLE);
        } else if (mCurPosition == position && mCurPosition != 0 && mCurPosition != itemList.size() - 1) {
            viewHolder.upBtn.setVisibility(View.VISIBLE);
            viewHolder.downBtn.setVisibility(View.VISIBLE);
        } else {
            viewHolder.upBtn.setVisibility(View.INVISIBLE);
            viewHolder.downBtn.setVisibility(View.INVISIBLE);
        }
  
        //设置item向下移动的点击时间并标志其位置
        viewHolder.downBtn.setOnClickListener(this);
        viewHolder.downBtn.setTag(position);
  
        //设置item向上移动的点击时间并标志其位置
        viewHolder.upBtn.setOnClickListener(this);
        viewHolder.upBtn.setTag(position);
  
        //设置整个item的点击时间并标志其位置
        convertView.setOnClickListener(this);
        convertView.setTag(R.id.tag_item_click, position);
  
        return convertView;
    }
  
    class ViewHolder {
        TextView itemName;
        ImageButton upBtn;
        ImageButton downBtn;
    }
  
    //定义item内部控件的点击事件由回调接口定义的点击方法来处理
    @Override
    public void onClick(View v) {
        mCallback.click(v);
    }
  
    //在对数据进行处理后，调用该方法，通知adapter刷新数据
    public void refresh(int currentPosition) {
        mCurPosition = currentPosition;
        notifyDataSetChanged();
   	 }
    }
  

Adapter这部分代码不难，几个注意的点稍微讲解下

• ListView的Item的内部控件，即向上和向下的图标按钮的点击事件的实现.
  
  我们定义了如下的回调接口，并在该接口中定义了一个click方法

    	//定义回调接口实现ListView内Item的内部控件的点击事件
    		public interface Callback {
        		public void click(View v);
    		}
  

我们在ChangeAdapter实现了OnClickListener接口，并在getView方法中，对整个Item，及Item的内部的两个ImageButton定义了点击事件

		//设置item向下移动的点击时间并标志其位置
        viewHolder.downBtn.setOnClickListener(this);
        viewHolder.downBtn.setTag(position);

        //设置item向上移动的点击时间并标志其位置
        viewHolder.upBtn.setOnClickListener(this);
        viewHolder.upBtn.setTag(position);

        //设置整个item的点击时间并标志其位置
        convertView.setOnClickListener(this);
        convertView.setTag(R.id.tag_item_click, position);

接下来看onClick方法，可以看到我们item和图标按钮的点击这里交给了前面定义的回调Callback中的click方法来处理

		@Override
	    public void onClick(View v) {
	        mCallback.click(v);
	    }

所以这样就明显了，我们在要调用ChangeAdapter的Activity里实现这里定义的Callback接口，并将其作为ChageAdapter构造方法的一部分，由于item的内部控件点击事件会由Callback处理，而此时Activity又实现了Callback，相应的点击事件就可以由Activity处理。

		public ChangeAdapter(Context mContext, ArrayList<String> itemList, Callback mCallback, int mCurPosition) {
		    this.mContext = mContext;
		    this.itemList = itemList;
		    this.mCallback = mCallback;
		    this.mCurPosition = mCurPosition;
		}

• 在上一步的基础上，由于在点击item或者两个ImageButton时，我们需要获取到当前点击的item的position来做相应的逻辑处理，所以我们在设置item和ImageButton的点击事件时，都相应的用setTag方法，保存了当前的item的position，以便在Activity中获取。分析下getView的代码

这部分就是我们在点击item时，根据该item的位置，刷新adapter。点击位置为0时只显示向下按钮，点击位置为最后一个时只显示向上按钮，点击其他位置时，向上和向下按钮都设为可见

		 //根据点击或者向上向下操作的item的当前位置，来控制向上和向下的按钮的可见与否
        if (mCurPosition == position && mCurPosition == 0) {
            viewHolder.downBtn.setVisibility(View.VISIBLE);
        } else if (mCurPosition == position && mCurPosition == itemList.size() - 1) {
            viewHolder.upBtn.setVisibility(View.VISIBLE);
        } else if (mCurPosition == position && mCurPosition != 0 && mCurPosition != itemList.size() - 1) {
            viewHolder.upBtn.setVisibility(View.VISIBLE);
            viewHolder.downBtn.setVisibility(View.VISIBLE);
        } else {
            viewHolder.upBtn.setVisibility(View.INVISIBLE);
            viewHolder.downBtn.setVisibility(View.INVISIBLE);
        }

向上和向下按钮的setTag方法都只需传入position，以后就可以在Activity中，用getTag取到当前点击item的position。

而整个item的setTag就比较特殊

        //设置整个item的点击时间并标志其位置
        convertView.setOnClickListener(this);
        convertView.setTag(R.id.tag_item_click, position);

追一下代码就能知道，在getView方法中，有两个地方用到了convertView.setTag方法，第一个要存入的是一个ViewHolder对象，第二个存入的是当前item的position。所以需要用不同的key来标志。不然你在调用getTag时必然会出错。

        convertView.setTag(R.id.tag_viewholder, viewHolder);

而这里的key需要是resourceId,所以我们在values/strings.xml,定义两个item来作为key

	<item type="id" name="tag_viewholder"></item>
		<item type="id" name="tag_item_click"></item>

这样以后就可以通过view.getTag(key),取到相应的值

• 刷新adapter，我们定义了一个refresh方法，在点击的位置发生改变后，通知adapter刷新

    	//在对数据进行处理后，调用该方法，通知adapter刷新数据
        public void refresh(int currentPosition) {
            mCurPosition = currentPosition;
            notifyDataSetChanged();
       	 }
  

---

最后看一下MainActivity中的逻辑

定义布局activity_main.xml,就放一个ListView

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

	<ListView
    	android:layout_width="match_parent"
    	android:layout_height="wrap_content"
    	android:id="@+id/lv_change">
	</ListView>

	</LinearLayout>

MainActivity：

		public class MainActivity extends AppCompatActivity implements ChangeAdapter.Callback {

		    private ListView lv;
		    private ChangeAdapter adapter;
		    private ArrayList<String> itemList;
		    private int currentPosition = -1;

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

		    private void initAndSetView() {
		        lv = (ListView) findViewById(R.id.lv_change);
		        initData();
		        adapter = new ChangeAdapter(this, itemList, this, currentPosition);
		        lv.setAdapter(adapter);
		    }

		    @Override
		    public void click(View v) {
		        int curPosition;
		        int mCurPosition;
		        switch (v.getId()) {
					//整个item点击事件的处理逻辑
		            case R.id.item:
		                mCurPosition = (int) v.getTag(R.id.tag_item_click);
		                currentPosition = mCurPosition;
		                adapter.refresh(currentPosition);
		                break;

					//向上图标按键点击事件的处理逻辑
		            case R.id.up:
		                curPosition = (int) v.getTag();
		                if (curPosition != 0) {
		                    String upFirst = itemList.get(curPosition);
		                    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:
		                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;
		        }

		    }

			//初始化填充数据
		    private void initData() {
		        itemList = new ArrayList<String>();
		        itemList.add("余额宝");
		        itemList.add("蚂蚁花呗");
		        itemList.add("余额");
		        itemList.add("工商银行储蓄卡(1689)");
		        itemList.add("花呗分期");
		    }
		}

这部分逻辑很简单,如之前所讲的，MainActivity实现ChangeAdapter的Callback接口，并实现接口的click方法，注意导包不要导错了。而后在adapter的构造方法中，传入this，这样item及其内部控件的点击事件就可以在MainActivity中处理。重点看click方法：

	@Override
    public void click(View v) {
    	int curPosition;
    	int mCurPosition;
    	switch (v.getId()) {
			//整个item点击事件的处理逻辑
            case R.id.item:
                mCurPosition = (int) v.getTag(R.id.tag_item_click);
                currentPosition = mCurPosition;
                adapter.refresh(currentPosition);
                break;
			//向上图标按键点击事件的处理逻辑
            case R.id.up:
                curPosition = (int) v.getTag();
                if (curPosition != 0) {
                    String upFirst = itemList.get(curPosition);
                    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:
                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;
        }

    }

• 对于item的点击事件，我们用之前讲的getTag(key)方法并用强制类型转换获取该item的position，并调用之前定义的refresh方法，通知adapter当前的position数据更新了，而后adapter中就会根据这个position处理向上和向下的图标按钮的显示与否。

• 对于向上的ImageButton的点击事件，我们用getTag方法获取其position，并调换当前位置与前一个位置的数据的值，就实现了item的向上移动的效果。注意对于第一个item，我们不处理向上移动的逻辑，所以这里要加个判断。处理完之后，调用refresh方法，就可以刷新数据。

• 对于向下的ImageButton的点击事件，与向上的ImageButton的逻辑是相似的，这里就不再赘述。

• 要注意的是ArrayList的remove方法，当你remove了一个position的数据，后面位置的数据就会前移，所以这里处理数据要小心点，稍微思考下就能明白。

• 在这里，item位置移动后退出并没有存储，可以用SharedPreference进行存储，在下次打开后能重现之前的更改。

---

以上就是全部的实现，要是有什么讲错或者需要改进的地方，欢迎指出