android 上推效果,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：

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

android:id="@+id/but"

android:layout_width="wrap_content"

android:text="显示"

android:layout_centerHorizontal="true"

android:layout_height="wrap_content" />

android:id="@+id/myImage"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ddd" >

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" />