配色: 字号:
Android实现IOS相机滑动控件
2016-12-07 | 阅:  转:  |  分享 
  
Android实现IOS相机滑动控件



这篇文章主要为大家详细介绍了Android实现IOS相机滑动控件的相关资料,感兴趣的小伙伴们可以参考一下



IOS相比于Android,动画效果是一方面优势,IOS相机切换时滑动的动画很不错,看着是有一个3D的效果,而且变化感觉很自然。Android也可以通过Graphics下面的Camera可以实现3D效果,开始尝试着用这个做了一下,效果不理想,滑动之后各组文字之间的距离就变了,从立体空间来说这是合逻辑的,但是看着很别捏。IOS相机的滑动效果文字之间的间隔在滑动的时候是不变的。



后面通过调整TextViewX方向的scale使文字看着紧凑一点,然后通过计算的距离的方式,在滑动的时候保持各组文字之间的间隔一致,最后实现的效果还是和IOS的有一定的差距。先上个效果图的。



下面逐步来说下怎么实现:



MainaActivity.java:



往自定义的控件加了6个TextView,对应各个模式。





这里面还实现了一个手势监听,来识别滑动事件。对动画做了一些限制,角度小于30度,滑动距离大于15才能生效。



packagecom.example.androidcustomnview;importandroid.app.Activity;importandroid.graphics.Color;importandroid.os.Bundle;importandroid.util.Log;importandroid.view.GestureDetector;importandroid.view.GestureDetector.OnGestureListener;importandroid.view.View;importandroid.view.View.OnTouchListener;importandroid.view.MotionEvent;importandroid.view.TextureView;importandroid.view.ViewGroup;importandroid.view.animation.Animation;importandroid.view.animation.Animation.AnimationListener;importandroid.view.animation.AnimationSet;importandroid.view.animation.TranslateAnimation;importandroid.widget.FrameLayout;importandroid.widget.LinearLayout;importandroid.widget.RelativeLayout;importandroid.widget.TextView;publicclassMainActivityextendsActivityimplementsOnTouchListener{privatestaticfinalStringTAG="MainActivity.TAG";CustomViewLmCustomViewL;String[]name=newString[]{"延时摄影","慢动作","视频","拍照","正方形","全景"};GestureDetectormGestureDetector;RelativeLayoutrootView;@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mCustomViewL=(CustomViewL)findViewById(R.id.mCustomView);rootView=(RelativeLayout)findViewById(R.id.ViewRoot);rootView.setOnTouchListener(this);mCustomViewL.getParent();mCustomViewL.addIndicator(name);mGestureDetector=newGestureDetector(this,newmyGestureDetectorLis());48}classmyGestureDetectorLisimplementsGestureDetector.OnGestureListener{privatestaticfinalintdegreeLimit=30;privatestaticfinalintdistanceLimit=15;privatebooleanisScroll=false;@OverridepublicbooleanonDown(MotionEvente){//TODOAuto-generatedmethodstubLog.d(TAG,"myGestureDetectorLisonDown");isScroll=false;returntrue;}@OverridepublicvoidonShowPress(MotionEvente){//TODOAuto-generatedmethodstub}@OverridepublicbooleanonSingleTapUp(MotionEvente){//TODOAuto-generatedmethodstubreturnfalse;}@OverridepublicbooleanonScroll(MotionEvente1,MotionEvente2,floatdistanceX,floatdistanceY){//TODOAuto-generatedmethodstubif(isScroll)returnfalse;doubledegree=Math.atan(Math.abs(e2.www.hunanwang.netgetY()-e1.getY())/Math.abs(e2.getX()-e1.getX()))180/Math.PI;floatdelta=e2.getX()-e1.getX();if(delta>distanceLimit&°ree


CustomViewL.java:





自定义的控件,继承自LinearLayout。在onLayout里面,重新计算了下各个子控件的位置,因为各组文字的scale是不一样的,必须重新Layout一下各个子控件的位置,是文字的显示区域和点击区域是一样的,这样给各个子控件设置的onClick事件才有效。





dispatchDraw方法是重绘各个子控件,更具各个子控件到中心控件的位置的距离,设置了各个TextViewX方向的scale,为了就是看着要有一个立体的效果。





滑动之后,开始一个动画,动画结束之后重新requestLayout一下,重新计算下各个控件的位置。这个可以连续滑动的,如果这次动画在执行,会保存一下,等动画完了之后会接着跑下一个动画。各个子控件滑动距离的计算有兴趣的可以自己研究下,这里就不赘述了,其实也是数学知识。



packagecom.example.androidcustomnview;importandroid.content.Context;importandroid.graphics.Camera;importandroid.graphics.Canvas;importandroid.graphics.Color;importandroid.graphics.LinearGradient;importandroid.graphics.Matrix;importandroid.graphics.Paint;importandroid.graphics.Shader;importandroid.os.Handler;importandroid.os.Message;importandroid.util.AttributeSet;importandroid.util.Log;importandroid.view.MotionEvent;importandroid.view.View;importandroid.view.WindowManager;importandroid.view.animation.Animation;importandroid.view.animation.Animation.AnimationListener;importandroid.view.animation.TranslateAnimation;importandroid.widget.LinearLayout;importandroid.widget.TextView;publicclassCustomViewLextendsLinearLayout{privatestaticfinalStringTAG="CustomViewL.TAG";privateMatrixmMatrix;CameramCamera;privateintmCurrentItem=2;privateintscreenWidth;privatePaintmPaint;publicstaticfinalfloatItemScale=0.1f;publicCustomViewL(Contextcontext){super(context);//TODOAuto-generatedconstructorstubinitView(context);}publicCustomViewL(Contextcontext,AttributeSetattrs,intdefStyleAttr,intdefStyleRes){super(context,attrs,defStyleAttr,defStyleRes);initView(context);}publicCustomViewL(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);initView(context);}publicCustomViewL(Contextcontext,AttributeSetattrs){super(context,attrs);initView(context);}privatevoidinitView(Contextcontext){screenWidth=((WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getWidth();}@OverrideprotectedvoidonLayout(booleanchanged,intl,intt,intr,intb){Log.d(TAG,"onLayout");super.onLayout(changed,l,t,r,b);Viewv=getChildAt(mCurrentItem);intdelta=getWidth()/2-v.getLeft()-v.getWidth()/2;for(inti=0;imCurrentItem;j--){Viewv2=getChildAt(j);move+=(int)(v2.getWidth()Math.abs(j-mCurrentItem)ItemScale);}move=-move;}v1.layout(v1.getLeft()+delta+move,v1.getTop(),v1.getRight()+delta+move,v1.getBottom());}mRequstLayout=false;}@OverrideprotectedvoiddispatchDraw(Canvascanvas){intcount=getChildCount();for(inti=0;i0){if(mAnimationRunning){if(AnimationRunningCount<1){currentItemCopy=mCurrentItem-1;AnimationRunningCount++;scroolToRight=true;}return;}mCurrentItem--;startTraAnimation(mCurrentItem,mCurrentItem+1);updateTextColor();}}privateintcurrentItemCopy;publicvoidscrollLeft(){if(mRequstLayout)return;if(mCurrentItem0){CustomViewL.this.post(newRunnable(){@Overridepublicvoidrun(){//TODOAuto-generatedmethodstubAnimationRunningCount--;mCurrentItem=currentItemCopy;intlastItem=scroolToRight?currentItemCopy+1:currentItemCopy-1;startTraAnimation(currentItemCopy,lastItem);updateTextColor();}});}}@OverridepublicvoidonAnimationRepeat(Animationanimation){}}privateintAnimitionDurawww.visa158.comtionTime=300;privateintAnimationRunningCount=0;privatebooleanmAnimationRunning=false;privatebooleanmRequstLayout=false;publicvoidstartTraAnimation(intitem,intlast){Log.d(TAG,"startTraAnimationitem="+item);Viewv=getChildAt(item);finalintwidth=v.getWidth();finalintchildCount=getChildCount();inttraslate=getWidth()/2-v.getLeft()-width/2;intcurrentItemWidthScale=(int)(widthItemScale);for(inti=0;i



整个来说其实也不复杂,有好些数学计算,几何问题,效果也没达到iphone的效果,如果有大神有想法,可以指导下。





















献花(0)
+1
(本文系白狐一梦首藏)