在平常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页面的显示和隐藏。
如有转载,请附上内容来源,谢谢!