Android之自定义ListView(一)

PS：自定义View是Android中高手进阶的路线.因此我也打算一步一步的学习.看了鸿洋和郭霖这两位大牛的博客,决定一步一步的学习,循序渐进.

学习内容:

1.自定义View实现ListView的Item左右滑动显示和隐藏弹窗的效果

  自定义View其实是在Android学习路上比较难掌握的一个重要点,但是也是高手的必经之路,自定义View分为很多种,我们可以直接继承View,或者是继承他的直接子类或间接子类.ViewGroup,ListView,LinearLayout,Button等等.继承他们的间接子类还算是比较简单的..因为View的子类或者是间接子类可以帮助我们做很多的事情.有很多的地方,我们可以不去实现,子类就帮我们做了(onMeasure,onLayout,onDraw)这些方法.直接继承View,我们是必须要对这些方法进行重写的,来实现我们自定义View.

  因此我这里就没有去直接继承View,而是选择继承了他的子类.由于ListView的使用还是相当的广泛的,也是有些费劲的.因此决定从ListView开始..这里先把自定义的ListView代码先粘出来.然后再一步一步的分析.

package com.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
import com.example.administrator.myview.R;

/**
 * Created by totem on 2016/7/10.
 * @author 代码丶如风
 */
public class MyListView extends ListView {

    private static final String TAG = "ListView";

    private LayoutInflater inflater;

    /**
     * 手指按下的x,y坐标,以及移动以后的x,y坐标
     */
    private int xDown;

    private int yDown;

    private int xMove;

    private int yMove;

    private boolean isRightSliding;
    private boolean isLeftSliding;

    //滑动的最小距离
    private int touchSlop;

    //PopWindow弹窗
    private PopupWindow popupWindow;
    private int popWindowWidth;
    private int popWindowHeight;

    private Button delButton;

    private int mCurrentViewPosition;
    private View mCurrentView;

    //回调接口
    private DeleteItemListener deleteItemListener;

    /**
     * 初始化操作
     */
    public MyListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        inflater = LayoutInflater.from(context);
        touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
        View view = inflater.inflate(R.layout.delete_item, null);
        delButton = (Button) view.findViewById(R.id.id_item_btn);
        popupWindow = new PopupWindow(view, LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        popupWindow.getContentView().measure(0, 0);
        popWindowWidth = popupWindow.getContentView().getMeasuredWidth();
        popWindowHeight = popupWindow.getContentView().getMeasuredHeight();
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        int action = event.getAction();
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                xDown = x;
                yDown = y;
                if (popupWindow.isShowing()) {
                    dismissPopWindow();
                }
                mCurrentViewPosition = pointToPosition(xDown, yDown);
                View view = getChildAt(mCurrentViewPosition - getFirstVisiblePosition());
                mCurrentView = view;
                break;
            case MotionEvent.ACTION_MOVE:
                xMove = x;
                yMove = y;
                int offsetX = xDown - xMove;
                int offsetY = yDown - yMove;
                if (xMove < xDown && Math.abs(offsetX) > touchSlop && Math.abs(offsetY) < touchSlop) {
                    isLeftSliding = true;
                }else if(xMove >xDown && Math.abs(offsetX) >touchSlop && Math.abs(offsetY) < touchSlop){
                    isRightSliding = true;
                }
                break;
        }
        return super.dispatchTouchEvent(event);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getAction();
        if (isLeftSliding) {
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    int location[] = new int[2];
                    mCurrentView.getLocationOnScreen(location);
                    popupWindow.setAnimationStyle(R.style.popwindow_delete_btn_anim_style); //设置弹窗的动画效果
                    popupWindow.update();
                    popupWindow.showAtLocation(mCurrentView, Gravity.LEFT | Gravity.TOP, location[0] + mCurrentView.getWidth(), location[1] + mCurrentView.getHeight() / 2
                            - popWindowHeight / 2);
                    delButton.setOnClickListener(new OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            if (deleteItemListener != null) {
                                deleteItemListener.DeleteItem(mCurrentViewPosition);
                                popupWindow.dismiss();
                            }
                        }
                    });
                    break;
                case MotionEvent.ACTION_UP:
                    isLeftSliding = false;
                    break;
            }
            //防止与Item点击事件冲突
            return true;
        }else if(isRightSliding){
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    if(popupWindow.isShowing()){
                        dismissPopWindow();
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    isRightSliding = false;
                    break;
            }
            return true;
        }
        return super.onTouchEvent(event);
    }

    public void setDeleteItemListener(DeleteItemListener listener) {
        deleteItemListener = listener;
    }

    public interface DeleteItemListener {
        void DeleteItem(int position);
    }

    private void dismissPopWindow() {
        if (popupWindow != null && popupWindow.isShowing()) {
            popupWindow.dismiss();
        }
    }
}

这里一部分是鸿洋大牛的.我又简单的优化了点.他写的只有向左滑动弹出,而没有向右滑动隐藏.因此我这里就给加上了.主要还是理解其中的思想才是关键.毕竟自定义View的学习没有什么相关的书籍,只能看这些牛人的博客了.看完也是受益匪浅的.废话不多说,我们总体缕一下思路,如何去实现这个自定义View是关键.

 首先：

 我们要清楚,用户的操作,怎样才算是滑动效果,怎样算是从左往右划,怎样算从右往左划,这也是问题的第一个关键所在,那么我们知道用户滑动的时候首先是需要点击屏幕的,因此这里定义了xDown和yDown来记录手指点下的坐标.那么滑动完以后,必然有一个结束滑动的坐标,xMove,yMove.相比到这里我们就明确怎样是向左滑动和向右滑动了.

 xMove - xDown > 0 ? 向左滑动:向右滑动。。同时这里还要满足xMove - xDown要大于最小的滑动距离,这里最小的滑动距离就是用touchslop来记录的即：touchslop = ViewConfiguration.get(context).getScaledTouchSlop().这样我们就先解决了第一个问题,如何判断滑动.

 其次：

 滑动之后需要弹出一个窗口,那么这里就使用PopWindow来实现了.因此这里就创建了一个PopWindow.这个PopWindow可以显示出滑动后的删除按钮,因此在new的时候,需要把相关的view附加上.

/**
     * <p>Create a new non focusable popup window which can display the
     * <tt>contentView</tt>. The dimension of the window must be passed to
     * this constructor.</p>
     *
     * <p>The popup does not provide any background. This should be handled
     * by the content view.</p>
     *
     * @param contentView the popup's content
     * @param width the popup's width
     * @param height the popup's height
     */
    public PopupWindow(View contentView, int width, int height) {
        this(contentView, width, height, false);
    }

源码是这样写的,创建一个无焦点的PopWindow用于显示我们传入的contentView.在这里这个PopWindow用于显示删除按钮.但是我们需要明确一个地方.这个PopWindow是我们new出来的,并没有在xml文件中进行书写,我们在获取它的宽高时,需要调用measure()方法,先对这个PopWindow进行测量,测量之后我们才能够拿到相应的宽度和高度,因为这个PopWindow并没有在我们的ListView中,也没有在Item中,而是我们手动加上的,因此ListView在onMeasure()的时候是不会对这个PopWindow进行测量的.这个取决于View的加载机制,这里我先不进行多说,等到后期我会补上View的加载机制,如果读者想现在弄明白怎么回事,推荐先去看看郭林大牛的博客,关于View的四篇文章,读完那四篇文章,就能够理解这块到底是怎么回事了.反正在这里读者只需要先记住就可以,不调用measure()方法是拿不到宽高的.读者可以自己去试一下.好了,这样我们就解决了第二个问题.

 最后：回调接口

 首先,我们在MyView中引入了一个按钮,也就是PopWindow显示的按钮,但是这个按钮需要做事情,它需要在被点击的时候移除掉当前的Item,我们知道只有主线程才有权利对View进行操作,我们定义的这个View是没有权利的,这样就需要一个回调接口,在Button被点击的时候出发回调事件,触发的时候需要传递position参数，也就是当前Item的position.这个position传入后,被称为登记回调函数.触发的同时登记回调函数告知主线程这个事件被触发了,需要主函数进行处理,那么主线程在对Item进行操作,这样就符合规则了,因此回调函数这个概念想必大家就清楚了.

 前一阵子在知乎上看到有解释这个的概念,觉得说的非常的合理,在这里放上,这样就更方便大家的理解了.

 回调函数是什么?

 链接：http://www.zhihu.com/question/19801131/answer/13005983  来源：知乎

 你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件.

 然后事件分发机制了.dispatchTouchEvent和onTouchEvent,其实中间还有一个interpectTouchEvent,用于判断是否需要对事件进行拦截,这个就不说了,对ACTION_DOWN,ACTION_UP,ACTION_DOWN事件进行处理.dispatchTouchEvent用于分发事件,只在这里进行了简单的操作,对当前被点击的Item进行记录,以及对isRightSliding,isLeftSliding属性进行赋值,分发之后就交给了onTouchEvent去处理.它来完成对ACTION的处理.这样我们的总体思路就非常清晰了.

 首先:对滑动事件的判断，其次：加入我们滑动后需要显示的效果,接着添加相应的回调函数用来处理View的触发事件,最后对事件分发处理,就解决了自定义View.最后附上MainActivity的源代码.

package com.example.administrator.myview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import com.view.MyListView;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends Activity {

    private MyListView myListView;
    private ArrayAdapter<String> adapter;
    private List<String> mData;

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

    private void initView(){
        myListView = (MyListView) findViewById(R.id.MyListView);
        mData = new ArrayList<>(Arrays.asList("1","2","3","4","5","6","7","8","9","10"));
        adapter = new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,mData);
        myListView.setAdapter(adapter);
        myListView.setDeleteItemListener(new MyListView.DeleteItemListener() {
            @Override
            public void DeleteItem(int position) {
                adapter.remove(adapter.getItem(position));
            }
        });
        myListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //Item的点击事件
            }
        });
    }
}

我们看到MainActivity实现回调接口,然后对View进行处理,与我们所说一致.这样就OK了,这里只简单的写了个Adapter,如果想写更复杂的就自己去实现Adapter了.

 博客园的文件上传限制在10M,没有办法只能分享个百度云的链接了.

 源代码：http://pan.baidu.com/s/1o8KVlXK