Android 上推+推动门效果

在Android 项目中：

            

类似这样上推进入首页的推动门效果很常见，这样的效果是怎样实现的呢。

思路

首先要支持移动，向上移动超过屏幕的一半就就关闭显示主界面，没有一半的话移动到初始位置。那么我们肯定要自定义一个RelativeLayout在主界面的最上层来放这个图片，因为要获取touch时间，支持滚动。

代码如下：

package com.test.animation.view;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.BounceInterpolator;
import android.view.animation.Interpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Scroller;

import com.test.animation.R;

/**
 * Created by fuweiwei on 2015/12/31.
 */
public class PullDoorView extends RelativeLayout {
    private Context mContext;
    //滑动管理器
    private Scroller mScroller;

    private int mScreenWidth = 0;

    private int mScreenHeigh = 0;
    //第一次按下距离
    private int mFristDownY = 0;

    private int mCurryY;
    //偏移量
    private int mScrollY;
    //是否滑动完成
    private boolean mFinishFlag = false;

    private ImageView mImgView;

    public PullDoorView(Context context) {
        super(context);
        mContext = context;
        setupView();
    }

    public PullDoorView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        setupView();
    }
    public void showImgAnimation(){
        mScroller.startScroll(0,0,0,0,1000);
        invalidate();
        this.setVisibility(View.VISIBLE);
        mFinishFlag =false;

    }
    private void setupView() {
        // 这个Interpolator你可以设置别的 我这里选择的是有弹跳效果的Interpolator
        Interpolator polator = new BounceInterpolator();
        mScroller = new Scroller(mContext, polator);
        // 获取屏幕分辨率
        WindowManager wm = (WindowManager) (mContext.getSystemService(Context.WINDOW_SERVICE));
        DisplayMetrics dm = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(dm);
        mScreenHeigh = dm.heightPixels;
        mScreenWidth = dm.widthPixels;

        // 这里你一定要设置成透明背景,不然会影响你看到底层布局
        this.setBackgroundColor(Color.argb(0, 0, 0, 0));
        mImgView = new ImageView(mContext);
        mImgView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT));
        mImgView.setScaleType(ImageView.ScaleType.FIT_XY);// 填充整个屏幕
        mImgView.setImageResource(R.drawable.icon_2); // 默认背景
        addView(mImgView);
    }

    // 设置推动门背景
    public void setBgImage(int id) {
        mImgView.setImageResource(id);
    }

    // 设置推动门背景
    public void setBgImage(Drawable drawable) {
        mImgView.setImageDrawable(drawable);
    }

    // 推动门的动画
    public void startBounceAnim(int startY, int dy, int duration) {
        mScroller.startScroll(0, startY, 0, dy, duration);
        invalidate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mFristDownY = (int) event.getY();
                System.err.println("ACTION_DOWN=" + mFristDownY);
                return true;
            case MotionEvent.ACTION_MOVE:
                mCurryY = (int) event.getY();
                System.err.println("ACTION_MOVE=" + mCurryY);
                mScrollY = mCurryY - mFristDownY;
                // 只准上滑有效
                if (mScrollY < 0) {
                    scrollTo(0, -mScrollY);
                }
                System.err.println("------------- ACTION_MOVE " + mScrollY);

                break;
            case MotionEvent.ACTION_UP:
                mCurryY = (int) event.getY();
                mScrollY = mCurryY - mFristDownY;
                System.err.println("------------- ACTION_UP " + mScrollY);
                if (mScrollY < 0) {
                    if (Math.abs(mScrollY) > mScreenHeigh / 2) {

                        // 向上滑动超过半个屏幕高的时候 开启向上消失动画
                        startBounceAnim(this.getScrollY(), mScreenHeigh-this.getScrollY(), 500);
                        mFinishFlag = true;

                    } else {
                        // 向上滑动未超过半个屏幕高的时候 开启向下弹动动画
                        startBounceAnim(this.getScrollY(), -this.getScrollY(), 1000);

                    }
                }

                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void computeScroll() {

        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            Log.i("scroller", "getCurrX()= " + mScroller.getCurrX()
                    + "     getCurrY()=" + mScroller.getCurrY()
                    + "  getFinalY() =  " + mScroller.getFinalY());
            // 更新界面
            postInvalidate();
        } else {
            if (mFinishFlag) {
                this.setVisibility(View.GONE);
            }
        }
    }

}

首先我们自定义一个RelativeLayout ，给它设置图片内容，因为RelativeLayout也是继承View的、所以我们复写ontouchEvent(),computeScroll()。

ontouchEvent()：我们在这个方法中捕捉手势，在移动的手势中，当偏移量小于0时，表示是上移，执行 scrollTo()方法滚动。在抬起手势时，判断偏移量是否大于屏幕高度的一半，大于的话我们直接上滚动关闭，小于的话滚动到初始位置。

computeScroll()：在mScroll.startScroll()方法设置滚动初始化后，执行invalidate()刷新视图后执行computeScroll()。 这里有人会毕竟迷惑、为什么不直接用scrollTo()方法呢，

直接用也是可以的、只不过scrollTo()是瞬间滚动，比较生硬、用户体验不好，而android提供的Scroll类是实现平滑的滚动。具体请参考这位大神写的博客：http://blog.csdn.net/xiaanming/article/details/17483273

上面就是我们自定义的RelativeLayout，仔细看看自定义控件并没有我们想象的那么难。

下面是界面代码和布局：

package com.test.animation;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import com.test.animation.view.PullDoorView;

public class MainActivity extends AppCompatActivity {
    private Button mBut;
    private PullDoorView mView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mBut = (Button) findViewById(R.id.but);
        mView = (PullDoorView) findViewById(R.id.myImage);
        mBut.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mView.showImgAnimation();
            }
        });

    }
}

xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/icon_1"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/but"
        android:layout_width="wrap_content"
        android:text="显示"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content" />
    <com.test.animation.view.PullDoorView
        android:id="@+id/myImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ddd" >
        <TextView
            android:id="@+id/tv_hint"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="10dp"
            android:text="上滑可以进入首页"
            android:textColor="#ffffffff"
            android:textSize="18sp" />
    </com.test.animation.view.PullDoorView>
</RelativeLayout>

源码下载