Android自定义控件之角度传感器实现3d景深效果

先看下效果。


图片发自简书App
1.自定义控件

先建一个自定义控件并需要实现SensorEventListener接口，这部分就不啰嗦了，直接看代码：

package net.codepig.customviewdemo.view;

import android.content.Context;
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import net.codepig.customviewdemo.R;

import java.util.List;

/**
 * 传感器控制景深效果
 */
public class SensorDepth3D extends LinearLayout implements SensorEventListener{
    private Context _context;
    private TextView txt1,txt2,txt3;

    private int mWidth;//容器的宽度
    private int mHeight;//容器的高度

    private float[] angle = new float[3];
    private SensorManager sm;
    private String content;
    private Sensor mSensor;

    public SensorDepth3D(Context context){
        super(context);
        this._context = context;
        init(context);
    }

    public SensorDepth3D(Context context, AttributeSet attrs) {
        super(context, attrs);
        this._context = context;
        init(context);
    }

    public SensorDepth3D(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this._context = context;
        init(context);
    }

    private void init(Context mContext){
        LayoutInflater.from(mContext).inflate(R.layout.sensor_depth_3d,this, true);
        txt1=findViewById(R.id.txt1);
        txt2=findViewById(R.id.txt2);
        txt3=findViewById(R.id.txt3);
    }

    //测量子View
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
    }

    //排列子View的位置
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childTop = 0;
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            if (child.getVisibility() != GONE) {
                child.layout(0, childTop,child.getMeasuredWidth(), childTop + child.getMeasuredHeight());
                childTop = childTop + child.getMeasuredHeight();
            }
        }
    }

    @Override
    public void onSensorChanged(SensorEvent event) {
    }

    @Override
    public void onAccuracyChanged(Sensor sensor, int accuracy) {
        // 精度改变
    }
    
    /**
     * 解除监听
     */
    public void unregisterListener(){
        sm.unregisterListener(this);
    }
}

控件布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:id="@+id/txt1"
        android:text="00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/txt2"
        android:text="00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/txt3"
        android:text="00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

mainActivity里使用控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:MaskImage="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <net.codepig.customviewdemo.view.SensorDepth3D
        android:id="@+id/sensorDepth3d"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>
2.添加传感器及监听

这里通过SensorManager.getDefaultSensor方法来调用传感器。
与旋转相关的传感器有好几个，比如Sensor.TYPE_GYROSCOPE是陀螺仪，适合监听自身实时运动；TYPE_ORIENTATION是方向。（然而已经从api 16开始被弃用）；TYPE_ROTATION_VECTOR是旋转矢量，但是数值比较不直观。
我们这里用到加速度传感器TYPE_ACCELEROMETER和磁场传感器TYPE_MAGNETIC_FIELD来计算角度。

private float[] accelerometerValues = new float[3];
private float[] magneticValues = new float[3];

 /**
     * 根据传入的类型初始化传感器
     * @param ctx
     * @param type
     */
    private void initSensor(Context ctx) {
        sm = (SensorManager) ctx.getSystemService(Context.SENSOR_SERVICE);
        gSensor = sm.getDefaultSensor(Sensor.TYPE_ACCELEROMETER);//加速度传感器
        mSensor = sm.getDefaultSensor(Sensor.TYPE_MAGNETIC_FIELD);//磁场传感器
        registerListener();
    }

    public void registerListener(){
        sm.registerListener(this, gSensor, SensorManager.SENSOR_DELAY_NORMAL);//注册传感器，第一个参数为监听器，第二个是传感器类型，第三个是刷新速度
        sm.registerListener(this, mSensor, SensorManager.SENSOR_DELAY_NORMAL);
    }

    @Override
    public void onSensorChanged(SensorEvent event) {
        if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
            accelerometerValues = event.values.clone();
        } else if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {
            magneticValues = event.values.clone();
        }

        //获取地磁与加速度传感器组合的旋转矩阵
        float[] R = new float[9];
        float[] values = new float[3];
        SensorManager.getRotationMatrix(R, null, accelerometerValues,magneticValues);
        SensorManager.getOrientation(R, values);

        //values[0]->Z轴、values[1]->X轴、values[2]->Y轴
        //使用前请进行转换，因为获取到的值是弧度，示例如下
        txt1.setText("angleZ:"+Math.toDegrees(values[0]));
        txt2.setText("angleX:"+Math.toDegrees(values[1]));
        txt3.setText("angleY:"+Math.toDegrees(values[2]));
    }

记得结束的时候要解除监听

/**
     * 解除监听
     */
    public void unregisterListener(){
        sm.unregisterListener(this);
    }

摇摆一下手机，可以看到旋转的角度了。

3.根据角度移动不同层次上的图片

这里要用到一点中学三角函数知识。
这里简便起见就不用图片了，整三个不同颜色的圆表示一下。
先在布局空间里整三个圆形ball0,ball1,ball2：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/txt1"
        android:text="00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/txt2"
        android:text="00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/txt3"
        android:text="00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <RelativeLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <View
            android:id="@+id/ball0"
            android:background="@drawable/ball_front"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <View
            android:id="@+id/ball1"
            android:background="@drawable/ball_middle"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
        <View
            android:id="@+id/ball2"
            android:background="@drawable/ball_behide"
            android:layout_width="100dp"
            android:layout_height="100dp"/>
    </RelativeLayout>
</LinearLayout>

在初始化里根据想要的深度设置一下大小的缩放

private View ball0,ball1,ball2;
private double[] angle = new double[3];
private int zScale=0.8f;//纵向缩放比例，值越大则场景越深
private float dScale=50;//基础偏移量
//中心点坐标
private int x0=0;
private int y0=0;

    private void init(Context mContext){
        txt1=findViewById(R.id.txt1);
        txt2=findViewById(R.id.txt2);
        txt3=findViewById(R.id.txt3);
        ball0=findViewById(R.id.ball0);
        ball1=findViewById(R.id.ball1);
        ball2=findViewById(R.id.ball2);
        ball1.setScaleX(zScale);
        ball1.setScaleY(zScale);
        ball2.setScaleX(zScale*zScale);
        ball2.setScaleY(zScale*zScale);
        initSensor(_context);
    }

在onMeasure里设置一下中心点：

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        x0=mWidth/2-ball0.getMeasuredWidth()/2;
        y0=mHeight/2-ball0.getMeasuredHeight()/2;
        Log.d("LOGCAT","screenSize:"+curWidth+"_"+mHeight+"_"+ball0.getMeasuredWidth());
    }

然后根据角度的变化设置圆形相对中心的偏移量：
注意这里的三角函数需要使用弧度值

    @Override
    public void onSensorChanged(SensorEvent event) {
        if (event.sensor.getType() == Sensor.TYPE_ACCELEROMETER) {
            accelerometerValues = event.values.clone();
        } else if (event.sensor.getType() == Sensor.TYPE_MAGNETIC_FIELD) {
            magneticValues = event.values.clone();
        }

        //获取地磁与加速度传感器组合的旋转矩阵
        float[] R = new float[9];
        float[] values = new float[3];
        SensorManager.getRotationMatrix(R, null, accelerometerValues,magneticValues);
        SensorManager.getOrientation(R, values);

        //values[0]->Z轴、values[1]->X轴、values[2]->Y轴
        angle[0]=values[0];
        angle[1]=values[1];
        angle[2]=values[2];
        //弧度转换为角度
        txt1.setText("angleZ:"+(int) Math.toDegrees(angle[0]));
        txt2.setText("angleX:"+(int) Math.toDegrees(angle[1]));
        txt3.setText("angleY:"+(int) Math.toDegrees(values[2]));

        //计算位置偏移量
        double dX=dScale*Math.sin(values[2]);
        double dY=dScale*Math.sin(values[1]);
//        Log.d("LOGCAT","d:"+dX+dY);
//        这里加上了屏幕中心点的位置
        ball0.setX(x0);
        ball0.setY(y0);
        ball1.setX((float) (x0-dX));
        ball1.setY((float) (y0+dY));
        ball2.setX((float) (x0-dX*2));
        ball2.setY((float) (y0+dY*2));
    }

运行一下，转动手机就可以看到模拟的景深立体效果了。

4.设置基准面。

目前这个效果还有一个问题，就是基准面是根据实际的地理方向定的。所以对于拿起来的时候手机可能是任何方向的实际情况来说，效果不是太好。所以这里再加个校准基准平面的功能。
这里用按钮来操作，按下按钮的时候以当前手机所在平面为基准。
按钮的代码就不多说了，总之就是按下按钮记录当前角度：

resetBtn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //记录基准角度
                angle0[0]=angle[0];
                angle0[1]=angle[1];
                angle0[2]=angle[2];
            }
        });

然后在刚才的偏移量计算里加入角度的修正：

//计算偏移量
        double dX=dScale*Math.sin(values[2]-angle0[2]);
//        Log.d("LOGCAT","angleY"+(values[1]-angle0[1]));
        double dY=dScale*Math.sin(values[1]-angle0[1]);
//        Log.d("LOGCAT","d:"+dX+dY);
//        这里加上了屏幕中心点的位置
        ball0.setX(x0);
        ball0.setY(y0);
        ball1.setX((float) (x0-dX));
        ball1.setY((float) (y0+dY));
        ball2.setX((float) (x0-dX*2));
        ball2.setY((float) (y0+dY*2));
5.题外话。

由于这里偏移量用的是绝对数值，所以不同的机型表现可能会不一样。
另外，那个角度的值，其中一个是0到180度范围变化，一个是0到90度变化，不知道为什么要这样。也许还是用陀螺仪的角速度来计算的更靠谱？

相关github项目地址：
https://github.com/codeqian/customViewDemo/blob/master/app/src/main/java/net/codepig/customviewdemo/view/SensorDepth3D.java

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,542评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,596评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,021评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,682评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,792评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,985评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,107评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,845评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,299评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,441评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,072评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2赞 350