欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android仿zaker用手向上推动的特效开发【推动门效果】(附demo源码下载)

程序员文章站 2024-03-03 21:13:28
本文实例讲述了android仿zaker用手向上推动的特效开发。分享给大家供大家参考,具体如下: 最近在商店下载了zaker ,闲暇时拿来看看新闻!发现每次打开软件进入主...

本文实例讲述了android仿zaker用手向上推动的特效开发。分享给大家供大家参考,具体如下:

最近在商店下载了zaker ,闲暇时拿来看看新闻!发现每次打开软件进入主界面时有个界面,需要你把它往上滑到一定距离才能进入到主界面。每次进入软件时它的背景可能不一样,在往上拨的时候你会看见主界面,好似向上推的门一样!打开它你就可以看到外面的世界。与窗帘有点不同的是在你没有拉开足够距离时,它会俏皮的关闭自己不让你看到外面的美景。

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

Android仿zaker用手向上推动的特效开发【推动门效果】(附demo源码下载) Android仿zaker用手向上推动的特效开发【推动门效果】(附demo源码下载)

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

正如你看到的图片内容,今天是国庆节,在这里祝大家节日快乐!所以你每次打开的时候图片可能不一样。这个效果看起来有点像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程序 查看效果

Android仿zaker用手向上推动的特效开发【推动门效果】(附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控件用法总结》、《android视图view技巧总结》、《android文件操作技巧汇总》、《android操作sqlite数据库技巧总结》、《android操作json格式数据技巧总结》、《android数据库操作技巧总结》、《android编程之activity操作技巧总结》、《android编程开发之sd卡操作方法汇总》、《android开发入门与进阶教程》及《android资源操作技巧汇总

希望本文所述对大家android程序设计有所帮助。