?近在商店下载了zaker ,闲暇时拿来看看新闻!发现每次打??进入主界面时有个界面,需要你把它?上滑到一
定距离才能进入到主界??每次进入软件时它的背景?不一样,在往上拨的时候你会看见主界面,好似向上推的门?样!
打开它你就可以看到?面的世界。与窗帘有点不同的是在你没有拉开足?距?时,它会俏皮的关?己不让你看到外面的美???/span>
说这么?想像起来挺模糊的,那让我?看实际效果图,我现在打开zaker?张图 如下?示?/span>
左边?张是不做任何操作时的效果,右边一张是界面跟着手往上滑的效果,在滑的时候你会发现即将进入的界面,当你没有滑到一定的距?松开手后窗帘会慢慢关?在合?时?有?动的效果。非常??/span>
正?你看到的图片内?,今天是国庆节,在这里?大?节日?!所以你每?打开的时候图片可能不?样?这?果看起来有点像android里面讲的TranslateAnimation动画,我觉得用Animation动画应?很难实现出这种效?当然有用animation实现zaker这?效果的大牛可以与我们分享?。QQ里也有这么个功能的界??过QQ的是展示?张图片两到三秒后再进入主界面?/span>
下面?始实现这种效?推动?果??/span>
根据效果我实现出??,方便与?要用的筒靴使用?代码中有注?/span>
- package com.manymore13.scrollerdemo;
- import android.annotation.SuppressLint;
- 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.AccelerateInterpolator;
- import android.view.animation.BounceInterpolator;
- import android.view.animation.Interpolator;
- import android.widget.FrameLayout;
- import android.widget.ImageView;
- import android.widget.RelativeLayout;
- import android.widget.Scroller;
- public class PullDoorView extends RelativeLayout {
- private Context mContext;
- private Scroller mScroller;
- private int mScreenWidth = 0;
- private int mScreenHeigh = 0;
- private int mLastDownY = 0;
- private int mCurryY;
- private int mDelY;
- private boolean mCloseFlag = 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();
- }
- @SuppressLint("NewApi")
- private void setupView() {
- // 这个Interpolator你可以??的 我这里选择的是有弹跳效果的Interpolator
- Interpolator polator = new BounceInterpolator();
- mScroller = new Scroller(mContext, polator);
- // 获取屏幕分辨?/span>
- 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.bg1); // 默?背景
- addView(mImgView);
- }
- // 设置推动门背?/span>
- public void setBgImage(int id) {
- mImgView.setImageResource(id);
- }
- // 设置推动门背?/span>
- 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:
- mLastDownY = (int) event.getY();
- System.err.println("ACTION_DOWN=" + mLastDownY);
- return true;
- case MotionEvent.ACTION_MOVE:
- mCurryY = (int) event.getY();
- System.err.println("ACTION_MOVE=" + mCurryY);
- mDelY = mCurryY - mLastDownY;
- // ?上滑有效
- if (mDelY < 0) {
- scrollTo(0, -mDelY);
- }
- System.err.println("------------- " + mDelY);
- break;
- case MotionEvent.ACTION_UP:
- mCurryY = (int) event.getY();
- mDelY = mCurryY - mLastDownY;
- if (mDelY < 0) {
- if (Math.abs(mDelY) > mScreenHeigh / 2) {
- // 向上滑动超过半个屏幕高的时? 开?上消失动?/span>
- startBounceAnim(this.getScrollY(), mScreenHeigh, 450);
- mCloseFlag = true;
- } else {
- // 向上滑动?过半?幕高的时候 开?下弹动动?/span>
- 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 (mCloseFlag) {
- this.setVisibility(View.GONE);
- }
- }
- }
- }
View?scrollTo函数,使View具有滚动效果,就像ListView?样,它的内??以滑动的,ViewGroup继承View,所?elativelayout?做到滑动效果,另外向下弹动效果是用到Scroller类,而在构?Scroller类时加入BounceInterpolator,你也可以加入别的插值器。其实Scroller???助View滑动的一?,帮助View存储滑动数据的类,当view滑动时,你可以从scroller?出滑动数?而真实滑动运动效果其实是利用scrollTo?达到?地,View结合scroller以及scroller就可以实现这种推动门的效果??/span>
运?Demo程序 查看效果
上面的图片是模拟器上运?的截图,看起来有点卡。其实在真机上测试的很流畅?zaker的效果基?这个样子?/span>
如果你想使用这个类的话,想实现这种效果的话,那么请满足下??件??/span>
1. PullDoorView match_parent占据全屏 像下面这样整??ViewGroup?用Framelayout
2.PullDoorView 必须要放在界面的?上面 使其?获取touch事件
- <com.manymore13.scrollerdemo.PullDoorView
- android:id="@+id/myImage"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#ddd" >
- <Button
- android:id="@+id/btn_above"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:text="?? />
- <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.manymore13.scrollerdemo.PullDoorView>
因为PullDoorView?个RelativeLayout,所以你?发挥?的想象在里面添加任何View或?ViewGroup,上?ML?添加了一个button和一个textView,我想这两个View你可以再上面的动态图片中应?看到了?另外PullDoorView?根据?要更换背??/span>
你可?PullDoorView.setBgImage(图片)
好了就写这么多,仿zaker用手向上推动的效果的实现到?为??/span>
点击源码下载