QQ视差特效和ListView侧滑删除

如图所示是效果图，当向下拉时，图片会被拉出来，松手后恢复。和ListView的侧滑删除

        

1.视差特效

首先图片是通过addHeaderView加上去的，所以在设置Adapter前先设置一个View来作为头布局，图片的设置android:scaleType="centerCrop"

然后可以重写ListView主要是用通过overScrollBy来实现图片的拉出效果的，当拉出图片绘制后，重写onTouchEvent方法MotionEvent.ACTION_UP

实现回弹

如下是主代码

package com.demo.sb.main;

import com.demo.sb.adapter.ParallacAdapter;
import com.demo.sb.widget.MyParallaxListView;
import com.demo.suibian.R;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.ImageView;

/**
 * 视差特效类型于QQ空间上的
 * 
 * @author Administrator
 * 
 */
public class MActivity_Parallac extends Activity {

    private MyParallaxListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.mactivity_parallax);

        mListView = (MyParallaxListView) findViewById(R.id.lv);
        mListView.setOverScrollMode(View.OVER_SCROLL_NEVER);
        // 加上Header
        final View mHeaderView = View.inflate(MActivity_Parallac.this,
                R.layout.viewheader, null);
        final ImageView mImage = (ImageView) mHeaderView.findViewById(R.id.iv);
        mListView.addHeaderView(mHeaderView);

        mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(
                new OnGlobalLayoutListener() {

                    @Override
                    public void onGlobalLayout() {
                        // TODO Auto-generated method stub
                        mListView.setParallaxImage(mImage);

                        mHeaderView.getViewTreeObserver()
                                .removeGlobalOnLayoutListener(this);
                    }
                });

        // mListView.setAdapter(new SuibianAdapter(this));
        mListView.setAdapter(new ParallacAdapter(this));
    }
}

<?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"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/d" />

</LinearLayout>

重写的ListView

package com.demo.sb.widget;

import com.nineoldandroids.animation.ValueAnimator;
import com.nineoldandroids.animation.ValueAnimator.AnimatorUpdateListener;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.OvershootInterpolator;
import android.view.animation.Transformation;
import android.widget.ImageView;
import android.widget.ListView;

public class MyParallaxListView extends ListView{
    
    private ImageView mImage;
    private int drawableHeight;
    private int mOriginalHeight;
    public MyParallaxListView(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }
    
    public MyParallaxListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }
    
    public MyParallaxListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
    }
    
    /**
     * 设置ImageView图片，拿到引用
     * @param mImage
     */
    public void setParallaxImage(ImageView mImage) {
        // TODO Auto-generated method stub
        this.mImage = mImage;
        mOriginalHeight = mImage.getHeight();
        drawableHeight = mImage.getDrawable().getIntrinsicHeight();
        
        Log.d("jiejie", "height: " + mOriginalHeight + " drawableHeight: " + drawableHeight);
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
            int scrollY, int scrollRangeX, int scrollRangeY,
            int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        // TODO Auto-generated method stub
        // deltaY : 竖直方向的瞬时偏移量 / 变化量 dx   顶部到头下拉为-, 底部到头上拉为+
        // scrollY : 竖直方向的偏移量 / 变化量
        // scrollRangeY : 竖直方向滑动的范围
        // maxOverScrollY : 竖直方向最大滑动范围
        // isTouchEvent : 是否是手指触摸滑动, true为手指, false为惯性
        
        Log.d("jiejie", "deltaY: " +deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
                + " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent);
        //手指拉动并且是下拉
        if(isTouchEvent && deltaY <0){
            //把拉动的瞬时变化量的绝对值交给Header，就可以实现放大的效果了
            if(mImage.getHeight() <=drawableHeight ){
                int newHeight = (int)(mImage.getHeight() + Math.abs(deltaY / 3.0f));
                //高度不超过图片最大高度时，才让其生效
                mImage.getLayoutParams().height = newHeight;
                mImage.requestLayout();
            }
        }
        
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,
                scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        
        switch (ev.getAction()) {
        case MotionEvent.ACTION_UP:
            //执行回弹动画，方式一：属性动画
            //从当前高度mImage.getHeight(),执行动画到原始高度mOriginalHeight
            final int startHeight = mImage.getHeight();
            final int endHeight = mOriginalHeight;
            //ValueAnimator(startHeight,endHeight);
            
            
            //执行回弹动画，方式二：自定义Animation
            ResetAnimation animation = new ResetAnimation(mImage,startHeight,endHeight);
            startAnimation(animation);
            
            break;

        default:
            break;
        }
        return super.onTouchEvent(ev);
    }

    private void ValueAnimator(final int startHeight, final int endHeight) {
        // TODO Auto-generated method stub
        ValueAnimator mValueAnimator = ValueAnimator.ofInt(1);
        mValueAnimator.addUpdateListener(new AnimatorUpdateListener() {
            
            @Override
            public void onAnimationUpdate(ValueAnimator arg0) {
                // TODO Auto-generated method stub
                float fraction = arg0.getAnimatedFraction();
                //percent 0.0-1.0
                Integer newHeight = evaluate(fraction, startHeight, endHeight);
                
                mImage.getLayoutParams().height = newHeight;
                mImage.requestLayout();
            }
        });
        mValueAnimator.setInterpolator(new OvershootInterpolator());
        mValueAnimator.setDuration(800);
        mValueAnimator.start();
    }
    /**
     * 类型估值器
     * @param fraction
     * @param startValue
     * @param endValue
     * @return
     */
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt));
    }
    
    /**
     * 执行的动画
     * @author Administrator
     *
     */
    private class ResetAnimation extends Animation{
        
        private final ImageView mImageView;
        private final int startHeight;
        private final int endHeight;

        public ResetAnimation(ImageView mImage, int startHeight, int endHeight) {
            // TODO Auto-generated constructor stub
            this.mImageView = mImage;
            this.startHeight = startHeight;
            this.endHeight = endHeight;
            /**
             * Interpolator被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果accelerated(加速)
             * decelerated(减速)，repeated(重复)，bounced(弹跳)等
             * 
             * OvershootInterpolator    向前甩一定值后再回到原来位置
             */
            setInterpolator(new OvershootInterpolator());
            //设置动画的执行时长
            setDuration(800);
        }
        @Override
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {
            // TODO Auto-generated method stub
            System.out.println(interpolatedTime );
            //interpolatedTime 0.0f -> 1.0f
            Integer newHeightInteger = evaluate(interpolatedTime, startHeight, endHeight);
            
            mImageView.getLayoutParams().height = newHeightInteger;
            mImageView.requestLayout();
            super.applyTransformation(interpolatedTime, t);
        }
    }
}

2.实现ListView的侧滑删除功能

自定义的布局来显示侧滑的功能

package com.demo.sb.adapter;

import com.demo.sb.utils.DensityUtil;

import android.content.Context;
import android.graphics.Rect;
import android.support.v4.view.ViewCompat;
import android.support.v4.widget.ViewDragHelper;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;

/**
 * 侧拉删除控件
 * 
 * @author Administrator
 * 
 */
public class SwipeLayout extends FrameLayout {

    private Status status = Status.Close;
    private OnSwipeLayoutListener swipeLayoutListener;

    public Status getStatus() {
        return status;
    }

    public void setStatus(Status status) {
        this.status = status;
    }

    public OnSwipeLayoutListener getSwipeLayoutListener() {
        return swipeLayoutListener;
    }

    public void setSwipeLayoutListener(OnSwipeLayoutListener swipeLayoutListener) {
        this.swipeLayoutListener = swipeLayoutListener;
    }

    public static enum Status {
        Close, Open, Draging
    }

    public static interface OnSwipeLayoutListener {
        void onClose(SwipeLayout mSwipeLayout);

        void onOpen(SwipeLayout mSwipeLayout);

        void onDraging(SwipeLayout mSwipeLayout);

        // 要去关闭
        void onStartClose(SwipeLayout mSwipeLayout);

        // 要去开启
        void onStartOpen(SwipeLayout mSwipeLayout);
    }

    public SwipeLayout(Context context) {
        this(context, null);
        // TODO Auto-generated constructor stub
    }

    public SwipeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        // TODO Auto-generated constructor stub
    }

    public SwipeLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        mDragHelper = ViewDragHelper.create(this, 1.0f, mCallback);
    }

    ViewDragHelper.Callback mCallback = new ViewDragHelper.Callback() {
        // c . 重写监听
        @Override
        public boolean tryCaptureView(View arg0, int arg1) {
            // TODO Auto-generated method stub
            return true;
        }

        // 限定移动范围
        public int clampViewPositionHorizontal(View child, int left, int dx) {
            // left
            if (child == mFrontView) {
                if (left > 0) {
                    return 0;
                } else if (left < -mRange) {
                    return -mRange;
                }
            } else if (child == mBackView) {
                if (left > mWidth) {
                    return mWidth;
                } else if (left < mWidth - mRange) {
                    return mWidth - mRange;
                }
            }
            return left;
        };

        public void onViewPositionChanged(View changedView, int left, int top,
                int dx, int dy) {
            // 专递事件
            if (changedView == mFrontView) {
                mBackView.offsetLeftAndRight(dx);
            } else if (changedView == mBackView) {
                mFrontView.offsetLeftAndRight(dx);
            }
            despatchSwipeEvent();

            // 兼容老版本
            invalidate();

        };

        public void onViewReleased(View releasedChild, float xvel, float yvel) {
            if (xvel == 0 && mFrontView.getLeft() < -mRange / 2.0f) {
                open();
            } else if (xvel < 0) {
                open();
            } else {
                close();
            }
        };

    };

    private ViewDragHelper mDragHelper;
    private View mBackView;
    private View mFrontView;
    private int mHeight;
    private int mWidth;
    private int mRange;

    // b. 专递触摸事件
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        return mDragHelper.shouldInterceptTouchEvent(ev);
    }

    protected void despatchSwipeEvent() {
        // TODO Auto-generated method stub
        if (swipeLayoutListener != null) {
            swipeLayoutListener.onDraging(this);
        }
        // 记录上一次的状态
        Status preStatus = status;
        // 更新当前的状态
        status = updateStatus();
        if (preStatus != status && swipeLayoutListener != null) {
            if (status == Status.Close) {
                swipeLayoutListener.onClose(this);
            } else if (status == Status.Open) {
                swipeLayoutListener.onOpen(this);
            } else if (status == Status.Draging) {
                if (preStatus == Status.Close) {
                    swipeLayoutListener.onStartOpen(this);
                } else if (preStatus == Status.Open) {
                    swipeLayoutListener.onStartClose(this);
                }
            }
        }
    }

    private Status updateStatus() {

        int left = mFrontView.getLeft();
        if (left == 0) {
            return Status.Close;
        } else if (left == -mRange) {
            return Status.Open;
        }
        return Status.Draging;
    }

    public void close() {
        // TODO Auto-generated method stub
        DensityUtil.showToast(getContext(), "Close");
        close(true);
    }

    public void close(boolean isSmooth) {
        // TODO Auto-generated method stub
        int finalLeft = 0;
        if (isSmooth) {
            // 开始动画
            if (mDragHelper.smoothSlideViewTo(mFrontView, finalLeft, 0)) {
                ViewCompat.postInvalidateOnAnimation(this);
            }
        } else {
            layoutContent(false);
        }
    }

    public void open() {
        DensityUtil.showToast(getContext(), "Open");
        open(true);
    }

    public void open(boolean isSmooth) {
        int finalLeft = -mRange;
        if (isSmooth) {
            // 开始动画
            if (mDragHelper.smoothSlideViewTo(mFrontView, finalLeft, 0)) {
                ViewCompat.postInvalidateOnAnimation(this);
            }
        } else {
            layoutContent(true);
        }
    }

    @Override
    public void computeScroll() {
        // TODO Auto-generated method stub
        super.computeScroll();

        if (mDragHelper.continueSettling(true)) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // TODO Auto-generated method stub
        try {
            mDragHelper.processTouchEvent(event);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return true;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        // TODO Auto-generated method stub
        super.onLayout(changed, left, top, right, bottom);
        // 摆放位置
        layoutContent(false);
    }

    private void layoutContent(boolean isOpen) {
        // TODO Auto-generated method stub
        // 摆放钱View
        Rect frontRect = computeFrontViewRect(isOpen);
        mFrontView.layout(frontRect.left, frontRect.top, frontRect.right,
                frontRect.bottom);
        // 摆放后View
        Rect backRect = computeBackViewViaFront(frontRect);
        mBackView.layout(backRect.left, backRect.top, backRect.right,
                backRect.bottom);

        // 调整顺序，把mFrontView前置
        bringChildToFront(mFrontView);
    }

    private Rect computeBackViewViaFront(Rect frontRect) {
        // TODO Auto-generated method stub
        int left = frontRect.right;
        return new Rect(left, 0, left + mRange, 0 + mHeight);
    }

    private Rect computeFrontViewRect(boolean isOpen) {
        // TODO Auto-generated method stub
        int left = 0;
        if (isOpen) {
            left = -mRange;
        }
        return new Rect(left, 0, left + mWidth, 0 + mHeight);
    }

    @Override
    protected void onFinishInflate() {
        // TODO Auto-generated method stub
        super.onFinishInflate();
        mBackView = getChildAt(0);
        mFrontView = getChildAt(1);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        // TODO Auto-generated method stub
        super.onSizeChanged(w, h, oldw, oldh);
        mHeight = mFrontView.getMeasuredHeight();
        mWidth = mFrontView.getMeasuredWidth();

        mRange = mBackView.getMeasuredWidth();
    }

}

package com.demo.sb.adapter;

import java.util.ArrayList;

import com.demo.sb.adapter.SwipeLayout.OnSwipeLayoutListener;
import com.demo.sb.utils.DensityUtil;
import com.demo.suibian.R;

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ParallacAdapter extends BaseAdapter {

    private Context context;
    private int[] cost = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 };
    private String[] nameStrings = { "宋江", "卢俊义", "吴用", "公孙胜", "关胜", "林冲",
            "秦明", "呼延灼", "花荣", "柴进", "李应", "鲁智深", "索超", "戴宗" };
    private ArrayList<SwipeLayout> opendItems;

    public ParallacAdapter(Context context) {
        super();
        this.context = context;

        opendItems = new ArrayList<SwipeLayout>();
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return nameStrings.length;
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return nameStrings[arg0];
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public View getView(final int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        ViewHolder holder;
        if (arg1 == null) {
            holder = new ViewHolder();
            arg1 = View.inflate(context, R.layout.item_parallac_list, null);
            holder.tv_del = (TextView) arg1.findViewById(R.id.tv_item_pardel);
            holder.tv_name = (TextView) arg1
                    .findViewById(R.id.item_parallax_name);
            holder.tv_fight = (TextView) arg1
                    .findViewById(R.id.item_parallax_fight);
            holder.tv_call = (TextView) arg1.findViewById(R.id.tv_item_parcall);
            arg1.setTag(holder);
        } else {
            holder = (ViewHolder) arg1.getTag();
        }

        SwipeLayout sLayout = (SwipeLayout) arg1;
        sLayout.setSwipeLayoutListener(new OnSwipeLayoutListener() {

            @Override
            public void onStartOpen(SwipeLayout mSwipeLayout) {
                // TODO Auto-generated method stub
                // 要去开启时，先遍历所有已打开的条目，逐个关闭
                for (SwipeLayout layout : opendItems) {
                    layout.close();
                }
                opendItems.clear();
            }

            @Override
            public void onStartClose(SwipeLayout mSwipeLayout) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onOpen(SwipeLayout mSwipeLayout) {
                // TODO Auto-generated method stub
                opendItems.add(mSwipeLayout);
            }

            @Override
            public void onDraging(SwipeLayout mSwipeLayout) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onClose(SwipeLayout mSwipeLayout) {
                // TODO Auto-generated method stub
                opendItems.remove(mSwipeLayout);
            }
        });
        holder.tv_name.setText("名字为 ：" + nameStrings[arg0]);
        holder.tv_fight.setText("战斗力： " + cost[arg0]);
        holder.tv_del.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                // TODO Auto-generated method stub
                DensityUtil.showToast(context, "第" + arg0 + "个     为"
                        + nameStrings[arg0]);
            }
        });
        holder.tv_call.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                // TODO Auto-generated method stub
                AlertDialog.Builder builder = new AlertDialog.Builder(context);
                builder.setTitle("标题!!!");
                builder.setCancelable(false);
                builder.setMessage("设置警告，是否确定删除，删除是不可逆的奥");
                builder.setPositiveButton("确定",
                        new DialogInterface.OnClickListener() {

                            @Override
                            public void onClick(DialogInterface perent, int arg1) {
                                // TODO Auto-generated method stub
                                DensityUtil.showToast(context,
                                        nameStrings[arg0]);
                            }
                        });
                builder.setNegativeButton("取消",
                        new DialogInterface.OnClickListener() {

                            @Override
                            public void onClick(DialogInterface arg0, int arg1) {
                                // TODO Auto-generated method stub

                            }
                        });
                builder.create().show();
            }
        });
        return arg1;
    }

    static class ViewHolder {
        TextView tv_del;
        TextView tv_name;
        TextView tv_fight;
        TextView tv_call;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<com.demo.sb.adapter.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sl"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#4000" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv_item_parcall"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#666"
            android:gravity="center"
            android:text="call"
            android:textColor="#fff" />

        <TextView
            android:id="@+id/tv_item_pardel"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#f00"
            android:gravity="center"
            android:text="Delete"
            android:textColor="#fff" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#4fff"
        android:padding="5dp" >

        <ImageView
            android:id="@+id/item_view"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:contentDescription="@null"
            android:scaleType="fitXY"
            android:src="@drawable/a" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="10dp" >

            <TextView
                android:id="@+id/item_parallax_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#f00"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/item_parallax_fight"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="10dp"
                android:text=""
                android:textColor="#5000"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

</com.demo.sb.adapter.SwipeLayout>