Android 上推+推动门效果

来源：互联网发布：花吃了那女孩知乎编辑：程序博客网时间：2024/04/28 01:02

在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>

源码下载

1 0