详解Android 裸眼3D效果View控件
更新时间:2021年8月16日 16:00 点击:1730
描述:这是一个裸眼3D效果的控件View。
Tips:本项目代码部分逻辑参考于其他文章(自如的3D裸眼实现),众人拾柴火焰高,希望大家能多多补充。
项目代码:https://gitee.com/jiugeishere/uidesign
控件效果如下:
实现功能:
- 实现三层图片叠加效果(裸眼3D效果)
- 可设置每层图片移动速率
- 可设置每层图片移动的限制度数
- 可直接设置图片或引入图片
设计核心:
主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果。
核心代码:
SensorLayout 用以监听传感器
import android.content.Context; import android.content.res.TypedArray; import android.hardware.Sensor; import android.hardware.SensorEvent; import android.hardware.SensorEventListener; import android.hardware.SensorManager; import android.util.AttributeSet; import android.widget.FrameLayout; import android.widget.Scroller; import androidx.annotation.IntDef; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import com.ui.design.R; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; /** * 传感器监听 * author tangxianfeng * created 2021.8.15 **/ public class SensorLayout extends FrameLayout implements SensorEventListener { private final SensorManager mSensorManager; private float[] mAccelerateValues; private float[] mMagneticValues; private final Scroller mScroller; private double mDegreeYMin = -50;//最小偏移度数 Y private double mDegreeYMax = 50;//最大偏移度数 Y private double mDegreeXMin = -50;//最小偏移度数 X private double mDegreeXMax = 50;//最大偏移度数 X private static final double MOVE_DISTANCE_X = 50;//X轴移动偏移量 实际偏移为MOVE_DISTANCE_X*acclerateratio private static final double MOVE_DISTANCE_Y = 50;//Y轴移动偏移量 实际偏移为MOVE_DISTANCE_Y*acclerateratio private float acclerateratio = 1;//偏移加速的倍率 可以通过设置此倍率改变偏移速度 private final float[] values = new float[3];//包含 x,y,z的偏移量 private final float[] Sensororientation = new float[9];//旋转矩阵 public SensorLayout(@NonNull Context context) { this(context, null); } public SensorLayout(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public SensorLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mScroller = new Scroller(context); if (attrs != null) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SensorLayoutStyle); acclerateratio = typedArray.getFloat(R.styleable.SensorLayoutStyle_AccelerateRatio, 1); } mSensorManager = (SensorManager) getContext().getSystemService(Context.SENSOR_SERVICE); if (mSensorManager != null) { Sensor accelerateSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_ACCELEROMETER); // 地磁场传感器 Sensor magneticSensor = mSensorManager.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD); mSensorManager.registerListener(this, accelerateSensor, SensorManager.SENSOR_DELAY_GAME); mSensorManager.registerListener(this, magneticSensor, SensorManager.SENSOR_DELAY_GAME); } } @Override public void onSensorChanged(SensorEvent event) { if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) { mAccelerateValues = event.values; } if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) { mMagneticValues = event.values; } if (mMagneticValues != null && mAccelerateValues != null) SensorManager.getRotationMatrix(Sensororientation, null, mAccelerateValues, mMagneticValues); SensorManager.getOrientation(Sensororientation, values); // x轴的偏转角度 double degreeX = (float) Math.toDegrees(values[1]); // y轴的偏转角度 double degreeY = (float) Math.toDegrees(values[2]); int scrollX = mScroller.getFinalX(); int scrollY = mScroller.getFinalY(); if (degreeY <= 0 && degreeY > mDegreeYMin) { scrollX = (int) (degreeY / Math.abs(mDegreeYMin) * MOVE_DISTANCE_X * acclerateratio); } else if (degreeY > 0 && degreeY < mDegreeYMax) { scrollX = (int) (degreeY / Math.abs(mDegreeYMax) * MOVE_DISTANCE_X * acclerateratio); } if (degreeX <= 0 && degreeX > mDegreeXMin) { scrollY = (int) (degreeX / Math.abs(mDegreeXMin) * MOVE_DISTANCE_Y * acclerateratio); } else if (degreeX > 0 && degreeX < mDegreeXMax) { scrollY = (int) (degreeX / Math.abs(mDegreeXMax) * MOVE_DISTANCE_Y * acclerateratio); } smoothScroll(scrollX, scrollY); } @Override public void onAccuracyChanged(Sensor sensor, int accuracy) { } //移动 public void smoothScroll(int destX, int destY) { int scrollY = getScrollY(); int delta = destY - scrollY; mScroller.startScroll(destX, scrollY, 0, delta, 200); invalidate(); } @Override public void computeScroll() { if (mScroller.computeScrollOffset()) { scrollTo(mScroller.getCurrX(), mScroller.getCurrY()); postInvalidate(); } } //解绑监听 public void unregister() { mSensorManager.unregisterListener(this); } public void setDegree(double degreeYMin,double degreeYMax,double degreeXMin,double degreeXMax) { mDegreeYMin = degreeYMin; mDegreeYMax=degreeYMax; degreeXMax=degreeYMax; degreeXMin=degreeXMin; } public void setAcclerateratio(float acclerateratio) { this.acclerateratio = acclerateratio; } @IntDef({DIRECTION_LEFT, DIRECTION_RIGHT}) @Retention(RetentionPolicy.SOURCE) @Target(ElementType.PARAMETER) public @interface ADirection { } public static final int DIRECTION_LEFT = 1; public static final int DIRECTION_RIGHT = -1; }
Sensor3DView 三层视图封装
import android.content.Context; import android.content.res.TypedArray; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.LinearLayout; import androidx.annotation.Nullable; import com.bumptech.glide.Glide; import com.ui.design.R; /** * author tangxianfeng * created 2021.8.15 **/ public class Sensor3DView extends LinearLayout { private SensorLayout sensorforeground;//最上层传感器View private SensorLayout sensorbackground;//最底层传感器View private SensorLayout sensormid;//中间层传感器View private ImageView foregroundimg;//最上层图片 private ImageView backgroundimg;//底层图片 private ImageView midimg;//中间层图片 private Context mContext; public Sensor3DView(Context context) { super(context); this.mContext = context; } public Sensor3DView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); View inflate = LayoutInflater.from(getContext()).inflate(R.layout.sensor3d_item, this); this.mContext = context; initView(inflate); if (attrs != null) { TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Sensor3DViewStyle); float forgroundacclerateratio = typedArray.getFloat(R.styleable.Sensor3DViewStyle_foregroundAccelerateRatio, 1); float backgroundacclerateratio = typedArray.getFloat(R.styleable.Sensor3DViewStyle_backgroundAccelerateRatio, 1); float midacclerateratio = typedArray.getFloat(R.styleable.Sensor3DViewStyle_midAccelerateRatio, 1); setAllImg(typedArray.getResourceId(R.styleable.Sensor3DViewStyle_backgrounddrawable,1),typedArray.getResourceId(R.styleable.Sensor3DViewStyle_middrawable,1),typedArray.getResourceId(R.styleable.Sensor3DViewStyle_foregrounddrawable,1)); setAllratio(backgroundacclerateratio, midacclerateratio, forgroundacclerateratio); } } private void initView(View inflate) { sensorforeground = inflate.findViewById(R.id.sensorforeground); sensorbackground = inflate.findViewById(R.id.sensorbackground); sensormid = inflate.findViewById(R.id.sensormid); midimg = inflate.findViewById(R.id.midimg); backgroundimg = inflate.findViewById(R.id.backgroundimg); foregroundimg = inflate.findViewById(R.id.foregroundimg); } //加载三张图片 public void setAllImg(Object backgroundurl, Object midurl, Object foregroundurl) { Glide.with(mContext).load(backgroundurl).into(backgroundimg); Glide.with(mContext).load(midurl).into(midimg); Glide.with(mContext).load(foregroundurl).into(foregroundimg); } //设置移动速度 public void setAllratio(float backgroundratio, float midratio, float foregroundratio) { sensorbackground.setAcclerateratio(backgroundratio); sensormid.setAcclerateratio(midratio); sensorforeground.setAcclerateratio(foregroundratio); } //设置限制角度 public void setDegree(float MinX,float MinY,float MaxX,float MaxY,View3DLayer layer){ if (MinX>=MaxX||MinY>=MaxY){ return; } switch (layer){ case all: setDegree(MinY,MaxY,MinX,MaxX,sensorforeground); setDegree(MinY,MaxY,MinX,MaxX,sensormid); setDegree(MinY,MaxY,MinX,MaxX,sensorbackground); break; case mid: setDegree(MinY,MaxY,MinX,MaxX,sensormid); break; case background: setDegree(MinY,MaxY,MinX,MaxX,sensorbackground); break; case foreground: setDegree(MinY,MaxY,MinX,MaxX,sensorforeground); break; } } //sensorLayout 设置限制角度 private void setDegree(float MinY,float MaxY,float MinX,float MaxX,SensorLayout sensorLayout){ sensorLayout.setDegree(MinY,MaxY,MinX,MaxX); } @Override public void destroyDrawingCache() { super.destroyDrawingCache(); sensorbackground.unregister(); sensormid.unregister(); sensorforeground.unregister(); } public enum View3DLayer{ foreground, background, mid, all } }
styles.xml
<!--3D裸眼效果--> <declare-styleable name="SensorLayoutStyle"> <attr name="AccelerateRatio" format="float" /> </declare-styleable> <!--3D裸眼效果集合View--> <declare-styleable name="Sensor3DViewStyle"> <attr name="foregroundAccelerateRatio" format="float" /> <attr name="backgroundAccelerateRatio" format="float" /> <attr name="midAccelerateRatio" format="float" /> <attr name="foregrounddrawable" format="reference" /> <attr name="backgrounddrawable" format="reference" /> <attr name="middrawable" format="reference" /> </declare-styleable>
使用示例:
直接引用到layout文件中便可,或者可通过代码设置其他属性。
<com.ui.design.view.sensor3D.view.Sensor3DView android:id="@+id/sensor3Dview" android:layout_width="match_parent" android:layout_height="200dp" android:layout_centerInParent="true" app:foregrounddrawable="@drawable/forground3d" app:backgrounddrawable="@drawable/background3d" app:middrawable="@drawable/mid3d" app:foregroundAccelerateRatio="4.0" app:backgroundAccelerateRatio="-2.0" app:midAccelerateRatio="1.0"/>
项目代码仓库 UIDesign 开源项目
到此这篇关于详解Android 裸眼3D效果View控件的文章就介绍到这了,更多相关Android 裸眼3D效果内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法,希望这篇文章能够帮助到各位朋友,有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了,有没有发现我们一个页面控件多了会反复研究写findViewById呢,下面我们一起来看它的简化方法。 Android中Fin...2016-09-20- 如果我们的项目需要做来电及短信的功能,那么我们就得在Android模拟器开发这些功能,本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。 在Android模拟...2016-09-20
- 夜神android模拟器如何设置代理呢?对于这个问题其实操作起来是非常的简单,下面小编来为各位详细介绍夜神android模拟器设置代理的方法,希望例子能够帮助到各位。 app...2016-09-20
- 为了增强android应用的用户体验,我们可以在一些Button按钮上自定义动态的设置一些样式,比如交互时改变字体、颜色、背景图等。 今天来看一个通过重写Button来动态实...2016-09-20
- 如果我们要在Android应用APP中加载html5页面,我们可以使用WebView,本文我们分享两个WebView加载html5页面实例应用。 实例一:WebView加载html5实现炫酷引导页面大多...2016-09-20
- 深入理解Android中View和ViewGroup从组成架构上看,似乎ViewGroup在View之上,View需要继承ViewGroup,但实际上不是这样的。View是基类,ViewGroup是它的子类。本教程我们深...2016-09-20
- 下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子,这个文章写得非常的不错下面给各位共享一下吧。 因为业务需要,以下代码均以Youtube网站在线视...2016-10-02
- java开发的Android应用,性能一直是一个大问题,,或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
- TextView默认是横着显示了,今天我们一起来看看Android设置TextView竖着显示如何来实现吧,今天我们就一起来看看操作细节,具体的如下所示。 在开发Android程序的时候,...2016-10-02
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法,希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20- 下面我们来看一篇关于Android 开发之布局细节对比:RTL模式 ,希望这篇文章对各位同学会带来帮助,具体的细节如下介绍。 前言 讲真,好久没写博客了,2016都过了一半了,赶紧...2016-10-02
- 这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤,帮助大家更好的理解和学习使用Android,感兴趣的朋友可以了解下...2021-03-15
- 首先如果要在程序中使用sdcard进行存储,我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
- 下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法,希望碰到此类问题的同学可进入参考一下哦。 在我安装、配置好PhoneGap项目的所有依赖...2016-09-20
用Intel HAXM给Android模拟器Emulator加速
Android 模拟器 Emulator 速度真心不给力,, 现在我们来介绍使用 Intel HAXM 技术为 Android 模拟器加速,使模拟器运行度与真机比肩。 周末试玩了一下在Eclipse中使...2016-09-20- 在安卓开发时我碰到一个问题就是需要实现全屏,但又需要我们来判断出用户是使用了全屏或非全屏了,下面我分别找了两段代码,大家可参考。 先来看一个android屏幕全屏实...2016-09-20
Android开发中布局中的onClick简单完成多控件时的监听的利与弊
本文章来为各位介绍一篇关于Android开发中布局中的onClick简单完成多控件时的监听的利与弊的例子,希望这个例子能够帮助到各位朋友. 首先在一个控件加上这么一句:and...2016-09-20Ubuntu 系统下安装Android开发环境 Android Studio 1.0 步骤
Android Studio 是一个Android开发环境,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的 Android 开发工具用于开发和调试,可以在Linux,Mac OS X,Window...2016-09-20- 这篇文章主要为大家详细介绍了Android实现简单用户注册案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-05-26