空间背景图的简单的视差效果

因为不会制作动态效果图,请参考QQ空间

自定义ListView(ParallaxListView )

public class ParallaxListView extends ListView {

    public ParallaxListView(Context context) {
        super(context);
    }

    public ParallaxListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ParallaxListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    // 当滑动到顶部或者底部的时候，如果继续拉动ListView ，则会调用此方法
    // deltaY:滑动超出范围的时候，y轴的瞬间偏移量
    // scrollY：isTouchEvent为false的时候才有值，代表ListView超出的范围
    // isTouchEvent：true：代表是手指将ListView拖出范围之外 false：通过惯性，超出范围
    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX,
            int scrollY, int scrollRangeX, int scrollRangeY,
            int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
        System.out.println("overScrollBy...deltaY=" + deltaY + ",scrollY="
                + scrollY + ",isTouchEvent=" + isTouchEvent);

        if (isTouchEvent && deltaY < 0) {
            // 做什么处理？--将imageView变高
            android.view.ViewGroup.LayoutParams layoutParams = ivHead
                    .getLayoutParams();
            // 对图片的高度进行限制
            layoutParams.height += Math.abs(deltaY) / 2;
            if (layoutParams.height > mPicHeight) {
                layoutParams.height = mPicHeight;
            }
            ivHead.setLayoutParams(layoutParams);
        }

        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
                scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY,
                isTouchEvent);
    }

    private ImageView ivHead;
    private int mPicHeight;
    private int mOriginHeight;

    public void setHeaderImage(ImageView ivHead) {
        this.ivHead = ivHead;
        mPicHeight = ivHead.getDrawable().getIntrinsicHeight();// 得到图片的真实高度
        mOriginHeight = ivHead.getHeight();

        System.out.println("mOriginHeight=" + mOriginHeight);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        if (action == MotionEvent.ACTION_UP) {
            // 进行回弹操作
            android.view.ViewGroup.LayoutParams layoutParams = ivHead
                    .getLayoutParams();
            int currrentHeight = layoutParams.height;
            ValueAnimator animator = ValueAnimator.ofInt(currrentHeight,mOriginHeight);
            animator.setDuration(1000);
            animator.addUpdateListener(new AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int height = (Integer) animation.getAnimatedValue();
                    android.view.ViewGroup.LayoutParams layoutParams = ivHead
                            .getLayoutParams();
                    layoutParams.height = height;
                    ivHead.setLayoutParams(layoutParams);
                }
            });
            animator.setInterpolator(new OvershootInterpolator(4));
            animator.start();
        }
        return super.onTouchEvent(ev);
    }

}

使用示例

-1.布局
activity布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ParallaxListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </ParallaxListView>

</LinearLayout>

头布局

<?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/ivhead"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/parallax_img" /><-- 自己找一张图片 -->

</LinearLayout>

-2.代码

public class ParallaxListViewActivity extends Activity{
    public static final String[] LETTERS = new String[] { "A", "B", "C", "D",
            "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q",
            "R", "S", "T", "U", "V", "W", "X", "Y", "Z" };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_parallax);

        final ParallaxListView lv = (ParallaxListView) findViewById(R.id.lv);

        View headerView = View.inflate(this, R.layout.header, null);

        final ImageView ivHead = (ImageView) headerView.findViewById(R.id.ivhead);
        lv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {
                lv.setHeaderImage(ivHead);
                //一旦得到想要的值之后，需要把Listener给释放出来，以节省资源
                lv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        });

        lv.addHeaderView(headerView);

        lv.setAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, LETTERS));
    }   
}