Android實現(xiàn)IOS相機滑動控件
更新時間：2020年08月20日 10:15:33 作者：夢想，就在不遠方
這篇文章主要為大家詳細介紹了Android實現(xiàn)IOS相機滑動控件的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
IOS相比于Android，動畫效果是一方面優(yōu)勢，IOS相機切換時滑動的動畫很不錯，看著是有一個3D的效果，而且變化感覺很自然。Android也可以通過Graphics下面的Camera可以實現(xiàn)3D效果，開始嘗試著用這個做了一下，效果不理想，滑動之后各組文字之間的距離就變了，從立體空間來說這是合邏輯的，但是看著很別捏。IOS相機的滑動效果文字之間的間隔在滑動的時候是不變的。
后面通過調整TextView X方向的scale使文字看著緊湊一點，然后通過計算的距離的方式，在滑動的時候保持各組文字之間的間隔一致，最后實現(xiàn)的效果還是和IOS的有一定的差距。先上個效果圖的。
下面逐步來說下怎么實現(xiàn)：
MainaActivity.java:
往自定義的控件加了6個TextView，對應各個模式。
這里面還實現(xiàn)了一個手勢監(jiān)聽，來識別滑動事件。對動畫做了一些限制，角度小于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一下各個子控件的位置，是文字的顯示區(qū)域和點擊區(qū)域是一樣的，這樣給各個子控件設置的onClick事件才有效。
dispatchDraw方法是重繪各個子控件，更具各個子控件到中心控件的位置的距離，設置了各個TextView X方向的scale,為了就是看著要有一個立體的效果。
滑動之后，開始一個動畫，動畫結束之后重新requestLayout一下，重新計算下各個控件的位置。這個可以連續(xù)滑動的，如果這次動畫在執(zhí)行，會保存一下，等動畫完了之后會接著跑下一個動畫。各個子控件滑動距離的計算有興趣的可以自己研究下，這里就不贅述了，其實也是數(shù)學知識。
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>
整個來說其實也不復雜，有好些數(shù)學計算，幾何問題，效果也沒達到iphone的效果，如果有大神有想法，可以指導下。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Android 列表選擇框 Spinner詳解及實例的相關資料,需要的朋友可以參考下2017-06-06
Android ViewPager實現(xiàn)頁面左右切換效果
這篇文章主要為大家詳細介紹了Android ViewPager實現(xiàn)頁面左右切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本篇文章主要介紹了Android應用接入微信分享的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-07-07
本文主要介紹了Android設置Edittext獲取焦點并彈出軟鍵盤的實現(xiàn)代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
最近一段時間在研究android方面的知識，利用listview實現(xiàn)點贊功能，下面小編通過本文給大家介紹下基本思路，需要的朋友可以參考下2016-11-11
Android項目實戰(zhàn)之仿網(wǎng)易新聞的頁面（RecyclerView ）
這篇文章主要介紹了Android項目實戰(zhàn)之仿網(wǎng)易新聞的頁面，ViewPager作為RecyclerView的Header，感興趣的小伙伴們可以參考一下2016-01-01
Kotlin StateFlow單數(shù)據(jù)更新熱流設計與使用介紹
StateFlow當值發(fā)生變化，就會將值發(fā)送出去，下流就可以接收到新值。在某些場景下，StateFlow比LiveData更適用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
這篇文章主要為大家詳細介紹了Flutter進階之實現(xiàn)動畫效果的第十篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
登錄頁面在 App 開發(fā)中非常常見，本篇借登錄頁面的開發(fā)介紹了文本框 TextField組件的使用，同時使用文本框的裝飾屬性實現(xiàn)了個性化文本框設置。2021-06-06
這篇文章主要為大家詳細介紹了Handler實現(xiàn)倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04