主页上拉特效

• 首页
• 博客
• 学院
• 下载
• GitChat
• TinyMind
• 论坛
• 问答
• 商城
• VIP
• 活动
• 招聘
• ITeye
• CSTO

• 写博客
• 发Chat
• 

manymore13 的个人专栏

纸上得来终觉浅，绝知此事要躬行!

RSS订阅

原

Android特效开发（仿zaker用手向上推动的效果(推动门效果)）

置顶 2013年10月01日 17:50:13

阅读数：20537

       本文由manymore13原创，转载请标明出处 http://blog.csdn.net/manymore13/article/details/12219687

     最近在商店下载了zaker ，闲暇时拿来看看新闻！发现每次打开软件进入主界面时有个界面，需要你把它往上滑到一

定距离才能进入到主界面。每次进入软件时它的背景可能不一样，在往上拨的时候你会看见主界面，好似向上推的门一样！

打开它你就可以看到外面的世界。与窗帘有点不同的是在你没有拉开足够距离时，它会俏皮的关闭自己不让你看到外面的美景。

      说这么多想像起来挺模糊的，那让我们看看实际效果图，我现在打开zaker截两张图 如下所示 

              

     左边一张是不做任何操作时的效果，右边一张是界面跟着手往上滑的效果，在滑的时候你会发现即将进入的界面，当你没有滑到一定的距离松开手后窗帘会慢慢关闭，在合闭的时候有个弹动的效果。非常棒！

正如你看到的图片内容，今天是国庆节，在这里祝大家节日快乐！所以你每次打开的时候图片可能不一样。这个效果看起来有点像android里面讲的TranslateAnimation动画，我觉得用Animation动画应该很难实现出这种效果(当然有用animation实现zaker这种效果的大牛可以与我们分享下)。QQ里也有这么个功能的界面，只不过QQ的是展示一张图片两到三秒后再进入主界面。

    下面开始实现这种效果 推动们效果。

    根据效果我实现出一个类，方便与需要用的筒靴使用。代码中有注释

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);

        // 获取屏幕分辨率
        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);
    }

    // 设置推动门背景
    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:
            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) {

                    // 向上滑动超过半个屏幕高的时候 开启向上消失动画
                    startBounceAnim(this.getScrollY(), mScreenHeigh, 450);
                    mCloseFlag = 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 (mCloseFlag) {
                this.setVisibility(View.GONE);
            }
        }
    }

}

View中的scrollTo函数，使View具有滚动效果，就像ListView一样，它的内容是可以滑动的，ViewGroup继承View，所以Relativelayout可以做到滑动效果，另外向下弹动效果是用到Scroller类，而在构造Scroller类时加入BounceInterpolator，你也可以加入别的插值器。其实Scroller只是一个辅助View滑动的一个类，帮助View存储滑动数据的类，当view滑动时，你可以从scroller中取出滑动数据，而真实滑动运动效果其实是利用scrollTo瞬间达到目的地，View结合scroller以及scroller就可以实现这种推动门的效果。

运行Demo程序 查看效果

上面的图片是模拟器上运行的截图，看起来有点卡。其实在真机上测试的很流畅。zaker的效果基本是这个样子。

如果你想使用这个类的话，想实现这种效果的话，那么请满足下面两个条件。

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，上面XML中我添加了一个button和一个textView，我想这两个View你可以再上面的动态图片中应该看到了。另外PullDoorView可以根据需要更换背景图片

 你可以 PullDoorView.setBgImage(图片)

好了就写这么多，仿zaker用手向上推动的效果的实现到此为止。

点击源码下载

个人分类：  〖Android技术分享〗

所属专栏：  Android技术知识点

• 
  Yang_PR 2016-06-08 11:14:27 #22楼

  刚刚好要用到.谢谢大神

• 
  Crawlinger 2015-08-29 11:44:39 #21楼

  没那么多分啊

  查看回复(1)

• 
  fb0122 2015-07-17 00:26:46 #20楼

  好用！ 学习学习

• 
  woshizhangqin 2015-07-01 09:16:46 #19楼

  不错支持,已收藏...................

• 
  aNotFound404 2015-05-08 19:26:34 #18楼

  不错，mark一下！！！

查看 28 条热评

Android 上推+推动门效果

在Android 项目中：              类似这样上推进入首页的推动门效果很常见，这样的效果是怎样实现的呢。 思路 首先要支持移动，向上移动超过屏幕的一半就就关闭显示主界面，没...

 u011916937

2016-01-04 17:49:18

阅读数：1683

推动门效果

仿zaker用手向上推动的效果(推动门效果) 详细说明请见 http://blog.csdn.net/manymore13/article/details/1...

下载

2018年05月07日 00:00

您有一张免费的北京车展门票等待领取美好购车节 · 顶新

Android 那些事 – 欢迎页特效 （上推–推动门效果）

Android 那些事 – 欢迎页特效 （上推–推动门效果）项目中开发欢迎页，本来是想做一个带有上推门效果的，后来设计说不要了，用了上下滑动的ViewPager，反正demo写出来了，顺便总结下。...

 xueerfei008

2015-06-18 21:20:34

阅读数：1854

向上推动门效果

package com.manymore13.scrollerdemo; import android.annotation.SuppressLint; import android.content...

 u012619033

2014-02-21 09:44:29

阅读数：428

Android特效开发(仿zaker用手向上推动的效果(推动门效果))

http://blog.csdn.net/manymore13/article/details/12219687

 jaycee110905

2015-09-17 22:12:31

阅读数：900

Android 上推+推动门效果代码

Android 上推+推动门效果 代码可运行Android studio 博客地址:http://blog.csdn.net/u011916937...

下载

2018年05月07日 00:00

在北京，错过了低价买房，别再错过在职读研！尚德教育 · 顶新

Android特效开发（仿zaker用手向上推动的效果(推动门效果)）

本文由manymore13原创，转载请标明出处 http://blog.csdn.net/manymore13/article/details/12219687      最近在商店下载了zaker...

 jason0539

2013-11-17 16:58:07

阅读数：3647

仿类似于Zaker 推动门的2个例子

仿类似于Zaker 推动门的2个例子,压缩文件里有2个源码Demo。有兴趣的安装看看 根据自己需要再去修改。综合评分:5 收藏(1)评论(1)举报 所需: 3...

下载

2018年05月04日 00:00

android推拉门效果(Scroller)

下面就使用Scroller来给大家展示一下推拉门的效果 思路： 1.自定义一个类PushPullDoorView，继承RelativeLayout、 2.初始化Scroller对象，并且...

 forwardyzk

2015-01-05 13:25:09

阅读数：1025

推动门效果

2013年10月05日 2.27MB 下载

Android 仿zaker用手向上推动的效果(推动门效果

http://blog.csdn.net/manymore13/article/details/12219687

 jdsjlzx

2013-10-29 15:52:51

阅读数：1613

viewpager+gridview运用学习 小实例

2014年04月21日 397KB 下载

jquery 推动效果

MyHtml.html .slide { position: relative; height: 200; backgrou...

 u014596302

2017-03-07 00:46:56

阅读数：252

仿zaker最新版本引导界面的视图联动效果

简介在jcodecraeer网站看到一篇文章是如何实现如何实现两个ViewPager的联动的文章 http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/...

 u010032372

2015-09-05 12:16:44

阅读数：1254

iOS物理仿真动画

物理仿真行为（Dynamic Behavior） 执行怎样的物理仿真效果？怎样的动画效果？ UIDynamic提供了以下几种物理仿真行为： UIGravity...

 zengjin915430

2016-11-18 16:32:40

阅读数：449

Android 上推+推动门效果代码

2016年01月04日 6.78MB 下载

仿类似于Zaker 推动门的2个例子

2014年03月05日 4.83MB 下载

android —— 简易仿ZAKER手机阅读APP

一、引言       我手机上自带了一个ZAKER的新闻阅读APP，用起来感觉它的界面很简洁，特别是阅读的界面与众不同，很有新意。于是就 自己模仿着做了一遍大体的框架和模块，也添加了一点自己的布局进去...

 woshimalingyi

2016-02-05 17:13:15

阅读数：1093

Android倒计时效果

借用聚美优品的广告词来开始今天的文章之旅： 从未年轻过的人，一定无法体会这个世界 的偏见。我们被世俗拆散，也要为爱情勇 往直前；我们被房价羞辱，也要让简陋的 现实变的温暖；我们被权威漠视，也...

 ccg_201216323

2016-12-19 17:45:17

阅读数：2949

推动架及夹具装配图CAD图

2013年12月08日 203KB 下载

个人资料

manymore13

关注

原创

58

粉丝

273

喜欢

375

评论

219

等级：

访问：

55万+

积分：

5178

排名：

6881

勋章：

最新文章

• Xshell通过ssh连接Android终端模拟器Termux
• Git命令工具使用(gitHub实战)
• 【React-native系列开发笔记一】
• 自定义ViewGroup打造微信朋友圈之九宫图效果
• 获取apk签名指纹的md5值 防止重新被打包

博主专栏

• 

  Android技术知识点

  阅读量： 198784 17 篇

快速链接

Google Developers
Android 源码查看  欢迎光临！

归档

• 2017年12月1篇
• 2016年6月2篇
• 2016年3月1篇
• 2016年2月1篇
• 2014年7月1篇
• 2014年2月1篇
• 2013年11月1篇
• 2013年10月4篇
• 2013年8月1篇
• 2013年7月1篇
• 2013年6月1篇
• 2013年5月2篇
• 2013年4月3篇
• 2013年3月4篇
• 2013年2月3篇
• 2013年1月4篇
• 2012年11月1篇
• 2012年10月4篇
• 2012年8月1篇
• 2012年7月2篇
• 2012年4月1篇
• 2012年3月3篇
• 2011年12月7篇
• 2011年11月6篇
• 2011年10月4篇
• 2011年9月6篇
• 2011年7月5篇
• 2011年6月2篇
• 2011年4月1篇
• 2010年12月1篇

展开

热门文章

• 使用自定义透明Dialog样式的Activity

  阅读量：56555

• java 生成xml格式文件

  阅读量：46032

• PHP+Mysql 实现留言板

  阅读量：33204

• HttpClient初步使用方法

  阅读量：26745

• Eclipse 的一些调试技巧

  阅读量：26187

最新评论

• HttpClient初步使用方法

  YoonaDa：非常感谢

• 四则混合运算器 计算器 （Andr...

  qq_26014653：代码

• java 生成xml格式文件

  qq823117743：[reply]wangfengtong[/reply] 他的类就叫Java2XML，你自己的类自己...

• PHP+Mysql 实现留言板

  adouzai416148489：超漂亮留言下载：http://www.sucaihuo.com/search?keyword=留言...

• 【React-native系列开发...

  sinat_29289673：为什么我真机上摇一摇不出菜单，，，，窗口权限也打开了

联系我们

请扫描二维码联系客服

[email protected]

400-660-0108

QQ客服 客服论坛

关于招聘广告服务  百度

©1999-2018 CSDN版权所有

京ICP证09002463号

经营性网站备案信息

网络110报警服务

中国互联网举报中心

北京互联网违法和不良信息举报中心

• 28

• 
  收藏
• 
  评论
• 
  微信
• 
  微博
• 
  QQ

关闭