本文由manymore13原创,转载请标明出处http://blog.csdn.net/manymore13/article/details/12219687
最近在商店下载了zaker ,闲暇时拿来看看新闻!发现每次打开软件进入主界面时有个界面,需要你把它往上滑到一
定距离才能进入到主界面。每次进入软件时它的背景可能不一样,在往上拨的时候你会看见主界面,好似向上推的门一样!
打开它你就可以看到外面的世界。与窗帘有点不同的是在你没有拉开足够距离时,它会俏皮的关闭自己不让你看到外面的美景。
说这么多想像起来挺模糊的,那让我们看看实际效果图,我现在打开zaker截两张图 如下所示
左边一张是不做任何操作时的效果,右边一张是界面跟着手往上滑的效果,在滑的时候你会发现即将进入的界面,当你没有滑到一定的距离松开手后窗帘会慢慢关闭,在合闭的时候有个弹动的效果。非常棒!
正如你看到的图片内容,今天是国庆节,在这里祝大家节日快乐!所以你每次打开的时候图片可能不一样。这个效果看起来有点像android里面讲的TranslateAnimation动画,我觉得用Animation动画应该很难实现出这种效果(当然有用animation实现zaker这种效果的大牛可以与我们分享下)。QQ里也有这么个功能的界面,只不过QQ的是展示一张图片两到三秒后再进入主界面。
下面开始实现这种效果 推动们效果。
根据效果我实现出一个类,方便与需要用的筒靴使用。代码中有注释
-
packagecom.manymore13.scrollerdemo;
-
-
importandroid.annotation.SuppressLint;
-
importandroid.content.Context;
-
importandroid.graphics.Color;
-
importandroid.graphics.drawable.Drawable;
-
importandroid.util.AttributeSet;
-
importandroid.util.DisplayMetrics;
-
importandroid.util.Log;
-
importandroid.view.MotionEvent;
-
importandroid.view.View;
-
importandroid.view.WindowManager;
-
importandroid.view.animation.AccelerateInterpolator;
-
importandroid.view.animation.BounceInterpolator;
-
importandroid.view.animation.Interpolator;
-
importandroid.widget.FrameLayout;
-
importandroid.widget.ImageView;
-
importandroid.widget.RelativeLayout;
-
importandroid.widget.Scroller;
-
-
publicclassPullDoorViewextendsRelativeLayout{
-
-
privateContextmContext;
-
-
privateScrollermScroller;
-
-
privateintmScreenWidth=0;
-
-
privateintmScreenHeigh=0;
-
-
privateintmLastDownY=0;
-
-
privateintmCurryY;
-
-
privateintmDelY;
-
-
privatebooleanmCloseFlag=false;
-
-
privateImageViewmImgView;
-
-
publicPullDoorView(Contextcontext){
-
super(context);
-
mContext=context;
-
setupView();
-
}
-
-
publicPullDoorView(Contextcontext,AttributeSetattrs){
-
super(context,attrs);
-
mContext=context;
-
setupView();
-
}
-
-
@SuppressLint("NewApi")
-
privatevoidsetupView(){
-
-
-
Interpolatorpolator=newBounceInterpolator();
-
mScroller=newScroller(mContext,polator);
-
-
-
WindowManagerwm=(WindowManager)(mContext
-
.getSystemService(Context.WINDOW_SERVICE));
-
DisplayMetricsdm=newDisplayMetrics();
-
wm.getDefaultDisplay().getMetrics(dm);
-
mScreenHeigh=dm.heightPixels;
-
mScreenWidth=dm.widthPixels;
-
-
-
this.setBackgroundColor(Color.argb(0,0,0,0));
-
mImgView=newImageView(mContext);
-
mImgView.setLayoutParams(newLayoutParams(LayoutParams.MATCH_PARENT,
-
LayoutParams.MATCH_PARENT));
-
mImgView.setScaleType(ImageView.ScaleType.FIT_XY);
-
mImgView.setImageResource(R.drawable.bg1);
-
addView(mImgView);
-
}
-
-
-
publicvoidsetBgImage(intid){
-
mImgView.setImageResource(id);
-
}
-
-
-
publicvoidsetBgImage(Drawabledrawable){
-
mImgView.setImageDrawable(drawable);
-
}
-
-
-
publicvoidstartBounceAnim(intstartY,intdy,intduration){
-
mScroller.startScroll(0,startY,0,dy,duration);
-
invalidate();
-
}
-
-
@Override
-
publicbooleanonTouchEvent(MotionEventevent){
-
intaction=event.getAction();
-
switch(action){
-
caseMotionEvent.ACTION_DOWN:
-
mLastDownY=(int)event.getY();
-
System.err.println("ACTION_DOWN="+mLastDownY);
-
returntrue;
-
caseMotionEvent.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;
-
caseMotionEvent.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;
-
}
-
returnsuper.onTouchEvent(event);
-
}
-
-
@Override
-
publicvoidcomputeScroll(){
-
-
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用手向上推动的效果的实现到此为止。
点击源码下载
zhuanzihttp://blog.csdn.net/manymore13/article/details/12219687
分享到:
相关推荐
主要介绍了Android仿zaker用手向上推动的特效,结合完整实例形式分析了Android滑动切换效果的实现步骤与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
仿zaker效果demo不使用用gridview.zip
仿zaker menu的弹出效果 实现大拇指轻触按钮即可实现popupwindow的弹出;
android仿zaker效果demo,效果比zaker复杂,竖向拖动,每屏还有其他自定义view。
android拖拽 拖动 效果 仿zake 自动移位 优化性能版本
Android源码——仿zaker效果demo(不使用用gridview).zip
Android源码——仿zaker效果demo(不使用用gridview).rar
安卓Android源码——仿zaker效果demo(不使用用gridview).zip
Android源码——仿zaker效果demo(不使用用gridview).7z
封装仿Zaker首页的 拖动排序效果类,继承scrollview,接口仿tableview
Android仿zaker效果demo不使用用gridview.zip
Android 仿zaker效果demo(不使用用gridview).rar
android仿zaker效果demo(不使用用gridview).rar
仿ZAKER界面的源代码程序,滑动界面,仿ZAKER界面的源代码程序,滑动界面,仿ZAKER界面的源代码程序,滑动界面。
android安卓仿zaker界面源码wp风格 源码 用来学习的
Android 仿zaker效果的拖拽排序可以动态设置列数,动态增加或者减少item,当一页填满自动增加到下一页,当页数大于1,可以左右翻页。
仿zaker用手向上推动的效果(推动门效果) 详细说明请见 http://blog.csdn.net/manymore13/article/details/12219687