首页 > 系统 > Android > 正文

Android实现IOS相机滑动控件

2019-12-12 05:50:09
字体:
来源:转载
供稿:网友

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

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

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

MainaActivity.java: 

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

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

package com.example.androidcustomnview;import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.util.Log;import android.view.GestureDetector;import android.view.GestureDetector.OnGestureListener;import android.view.View;import android.view.View.OnTouchListener;import android.view.MotionEvent;import android.view.TextureView;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.AnimationSet;import android.view.animation.TranslateAnimation;import android.widget.FrameLayout;import android.widget.LinearLayout;import android.widget.RelativeLayout;import android.widget.TextView;public class MainActivity extends Activity implements OnTouchListener{ private static final String TAG = "MainActivity.TAG"; CustomViewL mCustomViewL; String[] name = new String[] {"延时摄影","慢动作","视频","拍照","正方形","全景"}; GestureDetector mGestureDetector; RelativeLayout rootView; @Override protected void onCreate(Bundle savedInstanceState) {  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 = new GestureDetector(this, new myGestureDetectorLis()); 48  }  class myGestureDetectorLis implements GestureDetector.OnGestureListener {    private static final int degreeLimit = 30;  private static final int distanceLimit = 15;    private boolean isScroll = false;  @Override  public boolean onDown(MotionEvent e) {   // TODO Auto-generated method stub   Log.d(TAG, "myGestureDetectorLis onDown");   isScroll = false;   return true;  }  @Override  public void onShowPress(MotionEvent e) {   // TODO Auto-generated method stub     }  @Override  public boolean onSingleTapUp(MotionEvent e) {   // TODO Auto-generated method stub   return false;  }    @Override  public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,    float distanceY) {   // TODO Auto-generated method stub   if (isScroll) return false;   double degree = Math.atan(Math.abs(e2.getY() - e1.getY()) / Math.abs(e2.getX() - e1.getX())) * 180 /Math.PI;   float delta = e2.getX() - e1.getX();   if (delta > distanceLimit && degree < degreeLimit) {    Log.d(TAG, "向右滑");    isScroll = true;    mCustomViewL.scrollRight();   } else if (delta < -distanceLimit && degree < degreeLimit) {    Log.d(TAG, "向左滑");    isScroll = true;    mCustomViewL.scrollLeft();   }   return false;  }    @Override  public void onLongPress(MotionEvent e) {   // TODO Auto-generated method stub     }  @Override  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,    float velocityY) {   // TODO Auto-generated method stub   return false;  }   } @Override public boolean onTouch(View v, MotionEvent event) {  // TODO Auto-generated method stub  return mGestureDetector.onTouchEvent(event); }}

CustomViewL.java:

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

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

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

package com.example.androidcustomnview;import android.content.Context;import android.graphics.Camera;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Shader;import android.os.Handler;import android.os.Message;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View;import android.view.WindowManager;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.TranslateAnimation;import android.widget.LinearLayout;import android.widget.TextView;public class CustomViewL extends LinearLayout { private static final String TAG = "CustomViewL.TAG"; private Matrix mMatrix; Camera mCamera; private int mCurrentItem = 2;  private int screenWidth; private Paint mPaint; public static final float ItemScale = 0.1f; public CustomViewL(Context context) {  super(context);  // TODO Auto-generated constructor stub  initView(context); }  public CustomViewL(Context context, AttributeSet attrs, int defStyleAttr,   int defStyleRes) {  super(context, attrs, defStyleAttr, defStyleRes);  initView(context); } public CustomViewL(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  initView(context); } public CustomViewL(Context context, AttributeSet attrs) {  super(context, attrs);  initView(context); }  private void initView(Context context) {  screenWidth = ((WindowManager)getContext().getSystemService(Context.WINDOW_SERVICE))    .getDefaultDisplay().getWidth(); }  @Override protected void onLayout(boolean changed, int l, int t, int r, int b) {  Log.d(TAG, "onLayout ");  super.onLayout(changed, l , t, r, b);  View v = getChildAt(mCurrentItem);  int delta = getWidth() / 2 - v.getLeft() - v.getWidth()/2;     for (int i = 0; i < getChildCount(); i++) {   View v1 = getChildAt(i);   if (i == mCurrentItem) {    v1.layout(v1.getLeft() + delta, v1.getTop(),      v1.getRight() + delta, v1.getBottom());    continue;   }   float mScale = Math.abs(i - mCurrentItem) * ItemScale;   int move = (int)(v1.getWidth() * mScale / 2);   if (i < mCurrentItem) {    for (int j = i + 1; j < mCurrentItem; j++) {     View v2 = getChildAt(j);     move += (int) (v2.getWidth() * Math.abs(j - mCurrentItem) * ItemScale);    }   } else {    for (int j = i - 1; j > mCurrentItem; j--) {     View v2 = 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; } @Override protected void dispatchDraw(Canvas canvas) {  int count = getChildCount();  for (int i = 0; i < count; i++) {   updateChildItem(canvas,i);  } }  public void updateChildItem(Canvas canvas,int item) {//  Log.d(TAG, "updateChildItem");  View v = getChildAt(item);    float desi = 1- Math.abs(item - mCurrentItem) * ItemScale;  ((TextView)v).setScaleX(desi);  drawChild(canvas, v, getDrawingTime());  updateTextColor();   }  private void updateTextColor() {  for (int i =0 ; i < getChildCount(); i++) {   if (i == mCurrentItem) {    ((TextView)getChildAt(i)).setTextColor(Color.YELLOW);   } else {    ((TextView)getChildAt(i)).setTextColor(Color.WHITE);   }  } }   boolean scroolToRight = false;  public void scrollRight() {  if (mRequstLayout) return;  if (mCurrentItem > 0) {   if (mAnimationRunning) {    if (AnimationRunningCount < 1) {     currentItemCopy = mCurrentItem - 1;     AnimationRunningCount++;     scroolToRight = true;    }    return;   }   mCurrentItem--;   startTraAnimation(mCurrentItem,mCurrentItem + 1);   updateTextColor();  } }  private int currentItemCopy; public void scrollLeft() {  if (mRequstLayout) return;  if (mCurrentItem < getChildCount() - 1) {   if (mAnimationRunning) {    if (AnimationRunningCount < 1) {     currentItemCopy = mCurrentItem + 1;     AnimationRunningCount++;     scroolToRight = false;    }    return;   }   mCurrentItem++;   startTraAnimation(mCurrentItem,mCurrentItem-1);   updateTextColor();  }  }  public void addIndicator(String[] name) {  for (int i=0; i< name.length; i++) {   TextView mTextView = new TextView(getContext());   mTextView.setText(name[i]);   mTextView.setTextColor(Color.WHITE);   mTextView.setLines(1);   LinearLayout.LayoutParams ll = new LinearLayout.LayoutParams(     LinearLayout.LayoutParams.WRAP_CONTENT,      LinearLayout.LayoutParams.WRAP_CONTENT);   ll.setMargins(20, 0, 20, 0);   addView(mTextView,ll);  } }  class myAnimationListener implements android.view.animation.Animation.AnimationListener {  @Override  public void onAnimationStart(Animation animation) {   Log.d(TAG, "onAnimationStart ");   mAnimationRunning = true;  }  @Override  public void onAnimationEnd(Animation animation) {   // TODO Auto-generated method stub   Log.d(TAG, "onAnimationEnd ");   for (int i= 0; i < getChildCount(); i++) {    getChildAt(i).clearAnimation();   }   mRequstLayout = true;   requestLayout();   mAnimationRunning = false;   if (AnimationRunningCount > 0) {    CustomViewL.this.post(new Runnable() {     @Override     public void run() {      // TODO Auto-generated method stub      AnimationRunningCount--;      mCurrentItem = currentItemCopy;      int lastItem = scroolToRight ? currentItemCopy + 1 : currentItemCopy - 1;      startTraAnimation(currentItemCopy,lastItem);      updateTextColor();     }    });   }  }  @Override  public void onAnimationRepeat(Animation animation) {  }   }  private int AnimitionDurationTime = 300; private int AnimationRunningCount = 0; private boolean mAnimationRunning = false; private boolean mRequstLayout = false; public void startTraAnimation(int item,int last) {  Log.d(TAG, "startTraAnimation item = " + item);  View v = getChildAt(item);  final int width = v.getWidth();  final int childCount = getChildCount();  int traslate = getWidth()/2 - v.getLeft() - width/2;    int currentItemWidthScale = (int) (width * ItemScale);  for (int i = 0; i < childCount; i++) {   int delta = currentItemWidthScale / 2;      Log.d(TAG, " i = " + i + " delta before = " + delta);    if (i < item) {    delta = -delta;    for (int j = i; j < item; j++) {     int a;     if (i == j) {      a = (int)(getChildAt(j).getWidth() * ItemScale / 2);     } else {      a = (int)(getChildAt(j).getWidth() * ItemScale);     }     delta = item < last ? delta - a : delta + a;    }   } else if (i > item){    for (int j = item + 1; j <= i; j++) {     int a;     if (j == i) {      a = (int)(getChildAt(j).getWidth() * ItemScale / 2);     } else {      a = (int)(getChildAt(j).getWidth() * ItemScale);     }     delta = item < last ? delta - a : delta + a;    }   } else {    delta = 0;   }   Log.d(TAG, "delta = " + delta);   delta += traslate;   TranslateAnimation translateAni = new TranslateAnimation(0, delta, 0, 0);   translateAni.setDuration(AnimitionDurationTime);   translateAni.setFillAfter(true);   if (i == item) translateAni.setAnimationListener(new myAnimationListener());   mAnimationRunning = true;   getChildAt(i).startAnimation(translateAni);  } }}

最后说一下布局文件,两边本来是要做一个阴影效果的,为了简便,复习了下PS,就在上面盖了张图片,显得两边有阴影。  

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.androidcustomnview.MainActivity" > <RelativeLayout  android:id="@+id/ViewRoot"  android:gravity="center"   android:layout_width="match_parent"  android:layout_height="match_parent">  <com.example.androidcustomnview.CustomViewL   android:orientation="horizontal"   android:background="@android:color/background_dark"   android:id="@+id/mCustomView"   android:layout_width="match_parent"   android:layout_height="wrap_content"   >     </com.example.androidcustomnview.CustomViewL>  <ImageView    android:layout_width="wrap_content"   android:layout_height="wrap_content"   android:layout_alignLeft="@id/mCustomView"   android:layout_alignTop="@id/mCustomView"   android:layout_alignRight="@id/mCustomView"   android:layout_alignBottom="@id/mCustomView"   android:background="@drawable/test"/>   </RelativeLayout></RelativeLayout>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表