android动画效果实现-页面上移效果

在平常android的UI开发中,常常会碰到需要自己实现一些简单的动画,APP有了这些动画效果可以应用变的更好看,那么简单说下一个简单动画的效果实现。

假如,现在有个需求是要实现一个用户登录注册页面,那么现在就有2个页面,一个是登录页面A页面,一个是注册页面B页面,在A页面上面有个注册按钮,通过点击这个注册按钮,把A页面慢慢收起来,向上移动,显示注册页面。

需求就是这样的,具体在代码逻辑实现上面可以用到安卓的FrameLayout控件,里面有两个页面,一个A页面,一个B页面。我们继承FrameLayout对象,在里面实现对触摸事件的监听来控制里面A页面向上或者向下移动。

首先我贴出布局的代码


<span style="font-family:KaiTi_GB2312;font-size:18px;"><com.example.test.PullUpToView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/xia"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff00ff"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            android:textSize="40sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/shang"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff0000"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"
            android:textSize="40sp" />
    </LinearLayout>

</com.example.test.PullUpToView></span>

这个布局里面有个A页面,有个B页面,PullUpToView是继承FramenLayout写的布局。在里面动态控制A页面的移动操作。代码具体如下:

<span style="font-family:KaiTi_GB2312;font-size:18px;">package com.example.test;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

public class PullUpToView extends FrameLayout {

	private static final String TAG = "PullUpToView";

	private static final int DISTANCE = 30;

	private static final long DURATION = 10L;

	private boolean isFinished = false;

	private boolean isSlidePanel = true;

	private int mHeight;

	private int startY, offsetY;

	private OnSlideUpListener mOnSlideUpListener;

	private LinearLayout upLayout;

	public PullUpToView(Context context) {
		this(context, null);
	}

	public PullUpToView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mHeight = context.getResources().getDisplayMetrics().heightPixels / 2-150;
		Log.d(TAG, "height:" + mHeight);
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent event) {
		if (!isSlidePanel) {
			return super.onInterceptTouchEvent(event);
		}
		int y = (int) event.getY();
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			Log.d(TAG, "开始拦截touch事件,按下");
			startY = offsetY = (int) y;
			Log.d(TAG, "onInterceptTouchEvent >> ACTION_DOWN:" + y);
			break;
		}
		return true;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {

		int y = (int) event.getY();
		Log.d(TAG, "真正touch事件:" + y);
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			Log.d(TAG, "真正touch事件,按下");
			break;
		case MotionEvent.ACTION_MOVE:
			Log.d(TAG, "真正touch事件,移动");
			int delY = Math.abs(startY - y);
			if (startY > y) {
				upLayout.offsetTopAndBottom(-delY);
			} else {
				if (upLayout.getTop() > -delY) {
					upLayout.offsetTopAndBottom(0);
				} else {
					upLayout.offsetTopAndBottom(delY);
				}
			}
			startY = y;
			break;
		case MotionEvent.ACTION_UP:
			Log.d(TAG, "真正touch事件,按上");
		case MotionEvent.ACTION_CANCEL:
			Log.d(TAG, "真正touch事件,取消");
			if(offsetY>y){
				if (Math.abs(offsetY - y) >= mHeight) {
					upLayout.postDelayed(new UpdateTask(true), DURATION);
				} else {
					upLayout.postDelayed(new UpdateTask(false), DURATION);
				}
			}else{
				if (Math.abs(offsetY - y) >= mHeight) {
					upLayout.postDelayed(new UpdateTask(false), DURATION);
				} else {
					upLayout.postDelayed(new UpdateTask(true), DURATION);
				}
			}
			break;
		}
		return true;
	}

	public void setSlidePanel(boolean enabled) {
		this.isSlidePanel = enabled;
	}

	public void setOnSlideUpListener(OnSlideUpListener onSlideUpListener) {
		this.mOnSlideUpListener = onSlideUpListener;
	}

	
	public void updateInvalide() {
		isFinished = false;
		upLayout.requestLayout();
	}


	public boolean isFinished() {
		return isFinished;
	}

	@Override
	public void onFinishInflate() {
		upLayout = (LinearLayout) findViewById(R.id.shang);

	}

	private class UpdateTask implements Runnable {
		private boolean changed;

		public UpdateTask(boolean changed) {
			this.changed = changed;
		}

		@Override
		public void run() {
			if (changed) {
				int bottom = upLayout.getBottom();
				if (bottom <= DISTANCE) {
					isFinished = true;
					upLayout.offsetTopAndBottom(-bottom);
					if (mOnSlideUpListener != null) {
						mOnSlideUpListener.onSlideUp();
					}
				} else {
					upLayout.offsetTopAndBottom(-DISTANCE);
					upLayout.postDelayed(this, DURATION);
				}
				Log.d(TAG, "向上移动 >> " + upLayout.getBottom());
			} else {
				int top = upLayout.getTop();
				if (top >= -DISTANCE) {
					isFinished = false;
					upLayout.offsetTopAndBottom(-top);
				} else {
					upLayout.offsetTopAndBottom(DISTANCE);
					upLayout.postDelayed(this, DURATION);
				}
				Log.d(TAG, "向下移动>> " + upLayout.getTop());
			}
		}
	}

	public interface OnSlideUpListener {

		void onSlideUp();
	}
}
</span>
通过上面的定义,然后就可以通过在屏幕滑动手指,简单的控制A页面的显示和隐藏。

如有转载,请附上内容来源,谢谢!



猜你喜欢

转载自blog.csdn.net/lonely_fireworks/article/details/30485529