zoukankan      html  css  js  c++  java
  • 【Android】android镜像翻转

    Android镜像翻转指的是将屏幕进行水平的翻转,达到所有内容显示都会反向的效果,就像是在镜子中看到的界面一样。这种应用的使用场景相对比较受限,主要用在一些需要使用Android手机界面进行镜面投影的地方,比如说车载手机hud导航之类的。

    镜像翻转的效果如下:

        

    镜像水平翻转前后效果

    在没办法对硬件进行直接翻转的时候,只能从代码进行着手。最先想到的方法是一种比较弱的实现方案,就是对界面进行截图,然后对截图进行翻转,再让其替换掉原先的界面,这种方法是可行的,但是会出现很严重的内存问题,因为图片很耗内存,而且不利于动态界面的实现,比如控件会变动位置,控件内容会变化的情况。这就需要其他更靠谱的方案。

    下面提供三种解决方案,能够解决一部分镜像翻转问题。

    1.翻转动画

    第一种方法是使用Android翻转动画进行实现。

    该方法需要重写动画,实现翻转,并将该动画添加到布局中,之后只要将动画的时长设置到0就能忽略掉动画过程,从而直接获取到动画的最终效果。需要重写Animate类,用 android.graphics.Camera和 android.graphics.Matrix可以比较容易地实现翻转效果,代码实现如下:

     
    1.  1 /** 
       2  * Created by obo on 15/11/26. 
       3  */  
       4   
       5 import android.graphics.Camera;  
       6 import android.graphics.Matrix;  
       7 import android.view.animation.Animation;  
       8 import android.view.animation.Transformation;  
       9   
      10 public class Rotate3dAnimation extends Animation {  
      11   
      12     // 中心点  
      13     private final float mCenterX;  
      14     private final float mCenterY;  
      15     // 3D变换处理camera(不是摄像头)  
      16     private Camera mCamera = new Camera();  
      17   
      18     /** 
      19      * @param centerX 翻转中心x坐标 
      20      * @param centerY 翻转中心y坐标 
      21      */  
      22     public Rotate3dAnimation(float centerX,  
      23                              float centerY) {  
      24         mCenterX = centerX;  
      25         mCenterY = centerY;  
      26     }  
      27   
      28     @Override  
      29     protected void applyTransformation(float interpolatedTime, Transformation t) {  
      30         // 生成中间角度  
      31         final Camera camera = mCamera;  
      32         final Matrix matrix = t.getMatrix();  
      33         camera.save();  
      34         camera.rotateY(180);  
      35         // 取得变换后的矩阵  
      36         camera.getMatrix(matrix);  
      37   
      38         camera.restore();  
      39         matrix.preTranslate(-mCenterX, -mCenterY);  
      40         matrix.postTranslate(mCenterX, mCenterY);  
      41     }  
      42 }  

    调用的方法如下:

    View layoutView = findViewById(R.id.reverse_layout);  
    Animation animation = new Rotate3dAnimation(layoutView.getWidth() / 2, layoutView.getHeight() / 2);  
    animation.setFillAfter(true);  
    layoutView.startAnimation(animation);  


    这里的reverse_layout是一个RelativeLayout的布局,调用了该段代码之后能将Layout和layout所承载的内容都进行翻转。思路是将layoutView从中心点进行180度的水平翻转,需要设置setFillAfter为true来保持翻转后的最终状态。这里需要注意的是,这段代码不能直接放在onCreate里面调用,因为在onCreate的时候,layout的大小还没有被计算出来,如果想在onCreate里面使用可以这样:

     
    1.  1 final View layoutView = findViewById(R.id.reverse_layout);  
       2   
       3 ViewTreeObserver vto = layoutView.getViewTreeObserver();  
       4 vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {  
       5     @Override  
       6     public void onGlobalLayout() {  
       7   
       8         Animation animation = new Rotate3dAnimation(layoutView.getMeasuredWidth() / 2, layoutView.getMeasuredHeight() / 2);  
       9         animation.setFillAfter(true);  
      10         layoutView.startAnimation(animation);  
      11     }     
      12 });  

    可以为layoutView加一个布局的监听,监听到layoutView布局加载了之后,就能正常获取layoutView的大小了,也就能正常输出效果了。

    2.重写控件

    对控件进行重写是另外一个实现的思路。假设承载界面的Layout是RelativeLayout,则可以对整个RelativeLayout进行重写,重写的代码可以如下:

     
     1 import android.content.Context;  
     2 import android.graphics.Canvas;  
     3 import android.util.AttributeSet;  
     4 import android.widget.RelativeLayout;  
     5   
     6 /** 
     7  * Created by obo on 15/12/4. 
     8  */  
     9 public class ReverseLayout extends RelativeLayout {  
    10   
    11     public boolean isReverse = true;  
    12   
    13     public ReverseLayout(Context context, AttributeSet attrs) {  
    14         super(context, attrs);  
    15     }  
    16   
    17     @Override  
    18     public void dispatchDraw(Canvas canvas) {  
    19   
    20         if (isReverse)  
    21             canvas.scale(-1, 1, getWidth() / 2, getHeight() / 2);  
    22   
    23         super.dispatchDraw(canvas);  
    24     }  
    25 }  

    之后,在布局xml中将最外层的RelativeLayout替换成ReverseLayout就能对界面进行翻转。这样的翻转能够将Layout里面所有的控件都进行翻转,如果需要翻转的仅仅只是一个TextView的话,则可以单单对一个TextView进行重写,这个时候,就不需要重写dispatchDraw方法,而应该重写onDraw方法,如下:

     
    1. import android.content.Context;  
      import android.graphics.Canvas;  
      import android.util.AttributeSet;  
      import android.widget.TextView;  
        
      /** 
       * Created by obo on 15/12/6. 
       */  
      public class ReverseTextView extends TextView {  
          public ReverseTextView(Context context, AttributeSet attrs) {  
              super(context, attrs);  
          }  
        
          @Override  
          public void onDraw(Canvas canvas) {  
              canvas.scale(-1, 1, getWidth() / 2, getHeight() / 2);  
              super.onDraw(canvas);  
          }  
      }  

    onDraw和dispatchDraw的区别是onDraw只对当前的View有效,而不会影响其所包含的SubView,而dispatchDraw则会将翻转效果传递到所有的SubView。

    3.SurfaceView翻转

    以上两种方法能实现大多数View的翻转,但是都对SurfaceView没有效果,因为SurfaceView是通过双缓冲机制进行绘制的,不会经过onDraw或是dispatchDraw方法,也就不能对我们所进行的操作进行响应了,对于自定义的SurfaceView来说,可以对在lockCanvas中获取的Canvas对象进行翻转处理。

    下面给出SurfaceView翻转实现的代码:

     
    1. import android.content.Context;  
      import android.graphics.Canvas;  
      import android.graphics.Color;  
      import android.graphics.Paint;  
      import android.util.AttributeSet;  
      import android.view.SurfaceHolder;  
      import android.view.SurfaceView;  
        
      /** 
       * Created by obo on 15/12/6. 
       */  
      public class TestSurfaceView extends SurfaceView implements SurfaceHolder.Callback{  
        
          SurfaceHolder surfaceHolder ;  
        
          public TestSurfaceView(Context context, AttributeSet attrs) {  
              super(context, attrs);  
              surfaceHolder = this.getHolder();  
              surfaceHolder.addCallback(this);  
          }  
        
          @Override  
          public void surfaceCreated(SurfaceHolder holder) {  
        
              Canvas canvas = surfaceHolder.lockCanvas();  
        
              //绘制之前先对画布进行翻转  
              canvas.scale(-1,1, getWidth()/2,getHeight()/2);  
        
              //开始自己的内容的绘制  
              Paint paint = new Paint();  
              canvas.drawColor(Color.WHITE);  
              paint.setColor(Color.BLACK);  
              paint.setTextSize(50);  
              canvas.drawText("这是对SurfaceView的翻转",50,250,paint);  
              surfaceHolder.unlockCanvasAndPost(canvas);  
          }  
        
          @Override  
          public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}  
        
          @Override  
          public void surfaceDestroyed(SurfaceHolder holder) {}  
        
      }  

    采用该方法之后,对SurfaceView也能进行翻转了,效果如下:


    实际上,该方法是借助了第二种方法的思路,直接对canvas进行预先的处理从而达到我们所需要的效果的,所以也可以作为第二种方法的扩展。

    4.手势翻转

    需要注意的是,以上这几种方法仅仅是实现了显示的翻转,手势操作的位置并没有发生翻转。所以使用以上翻转方式的话需要结合手势翻转的实现,其实现思路是重写外层的viewgroup的onInterceptTouchEvent方法,对下发的MotionEvent进行一次翻转操作,使得childView接收到的手势都是反过来的。实现代码如下 :

     

    5.更优雅的方案

    对于普通view(非SurfaceView),还有一个更加优雅的实现方案,而且不需要重写onInterceptTouchEvent方法,只需要调用父布局的setScaleY或者setScaleX方法即可。

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. // 获取需要翻转的父布局  
    2. layoutScale = findViewById(R.id.layout_scale);  
    3. // 翻转  
    4. layoutScale.setScaleY(-1);  

    6.总结

    package com.obo.reverseview.views.touchreverse;  
      
    import android.content.Context;  
    import android.util.AttributeSet;  
    import android.view.MotionEvent;  
    import android.widget.RelativeLayout;  
      
    /** 
     * Created by obo on 16/5/4. 
     * Email:obo1993@gmail.com 
     * Git:https://github.com/OboBear 
     * Blog:http://blog.csdn.net/leilba 
     */  
    public class TouchReverseLayout extends RelativeLayout {  
      
        public TouchReverseLayout(Context context, AttributeSet attrs) {  
            super(context, attrs);  
        }  
      
        @Override  
        public boolean onInterceptTouchEvent(MotionEvent ev) {  
      
            ev.setLocation(this.getWidth() - ev.getX(),ev.getY());  
      
            return super.onInterceptTouchEvent(ev);  
        }  
    }  

    采用动画和重写控件的方案都能实现界面翻转的效果,而且性能方面都十分不错。

    但是这两种方法都会存在以下一些问题:

    1.仅仅翻转显示内容,不会翻转点击的坐标位置。也就是说,如果布局内最左边存在着一个按钮,则翻转后,按钮将会显示在界面最右边,但是想要点击按钮的话,还是在界面原先按钮所在的最左边进行点击才会得到响应。这里可以采取在父布局中对坐标进行重新定位的方法。

    2. 无法翻转已经封装好了的SurfaceView。比如说,当前要将某第三方地图界面进行水平镜像翻转,发现用第一种和第二种方法都无效,查看了部分源码之后发现其实质是用SurfaceView进行实现的,但是SurfaceView是作为该地图的一个subView存在的,所以不能直接获取到该subView,也不能到该SubView的绘制层获取canvas了,这个时候第三种方法也无法进行施展,这里需要采用动态代理的方式来解决,可见Android动态代理为SurfaceHolder添加Hook

    代码例子发布在github:

    AndroidReverseView

  • 相关阅读:
    monogobd 查询语句
    node express 使用中间件multer实现文件上传
    express+monogodb+前台react JSX模板引擎相关配置(非webapck)服务端渲染
    uniapp项目实战 新闻类app
    react+express项目创建JSX模板方式
    express+monogodb实现增删改查
    uniapp 云函数批量导出功能实现及api方法封装
    uniapp自定义顶部搜索框兼容微信小程序
    MySQL-OnlineDDL在线DDL
    子查询优化
  • 原文地址:https://www.cnblogs.com/Sharley/p/5964456.html
Copyright © 2011-2022 走看看