矩阵, 矩阵 , Android基础控件之ImageView

2022-12-04 13:51:12

天下文章大家抄，以下所有内容，有来自copy，有来自查询，亦有自己的总结(目的是总结出自己的东西)，所以说原创，不合适，说是转载也不恰当，所以我称之为笔记，可惜没有此分类选项，姑且不要脸一点，选择为原创，希望各位看官冷静勿喷，能接受的赞一个，不能接受的速喷赶紧走......(转载请注明出处，没功劳也有苦劳...)

这篇介绍的是Android常用控件之ImageView,常用来显示图片内容。

先上例图，分别为不同高宽下的默认图片显示方式。

矩阵, 矩阵 , Android基础控件之ImageView

可以看到，在放大后图片是以自适应填充方式显示，但有时候我们也许不需要填充，

这时就需要通过设置属性android:scaleType来进行调整，此属性有一系列枚举值，有不同效果，

ImageView高宽比图本身小时此效果貌似无效，只有ImageView高宽比图本身大时才看得出效果。

以下列举不同值的效果:

android:scaleType="matrix" 矩阵方式显示,默认从ImageView原点(左上角定点)以正常的宽高比显示图片。矩阵变换相关部分下半部分再介绍。

如下图:

矩阵, 矩阵 , Android基础控件之ImageView

android:scaleType="center" 以图片原大小居中显示在ImageView中，当ImageView宽高大于图片宽高时效果与center_inside相同

android:scaleType="centerInside" 图片居中显示在ImageView中，按比例缩小到合适(最大[宽/高]=ImageView[宽/高])大小显示，

android:scaleType="centerCrop" 图片居中显示在ImageView中，按比例放大到合适(最小[宽/高]=ImageView[宽/高])大小显示

矩阵, 矩阵 , Android基础控件之ImageView

android:scaleType="fitCenter" 以固定宽高比按(最小宽/高)居中填充ImageView。

android:scaleType="fitStart"  以固定宽高比按(最小宽/高)从顶部(可理解为左上角)填充ImageView。

android:scaleType="fitEnd"  以固定宽高比按(最小宽/高)从底部(可理解为右下角)填充ImageView。

android:scaleType="fitXY"  以不定宽高比按(最大宽/最大高)居中填充ImageView。

如图:

矩阵, 矩阵 , Android基础控件之ImageView

----------------------------------------------

下面说说矩阵变换matrix，ImageView显示图片时我们看到的画面是二维平面，有些时候我们需要调整显示角度或者放大缩小图形，

复杂的可以通过自定义View重新onDraw方法来绘制，简单的则可以通过设置matrix来完成。

矩阵，在数学上就是一个纵横排列的二维数组，其中包含了m*n个数据。例如2*3的矩阵     {[5,7,6]  [6,4,1]}

在ImageView中，我们需要用到的矩阵并不复杂，只需要用一个3阶方阵来对matrix进行赋值。

在使用matrix前，需要在ImageView的布局文件这将android:scaleType="matrix"属性设置，如果不设置，

也可以在代码中使用前加上 imageView.setScaleType(ScaleType.MATRIX);这一句。

例子代码

  1. Matrix matrix=new Matrix();
  2. float cosValue=(float) Math.cos(-Math.PI/6);
  3. float sinValue=(float) Math.sin(-Math.PI/6);
  4. float offsetX=50;
  5. float offsetY=50;
  6. float scale=2;
  7. float value[]=new float[]{
  8. cosValue, -sinValue,  offsetX,
  9. sinValue,  cosValue,  offsetY,
  10. 0,         0,       scale
  11. };
  12. matrix.setValues(value);
  13. imageView.setScaleType(ScaleType.MATRIX);
  14. imageView.setImageMatrix(matrix);

这段代码的含义是将图片逆时针旋转30度，再xy方向上平移25个像素，旋转中心和平移点都是0,0点，并将图片缩小为原来的1/2。
可以看到，float数组赋值时，我刻意排列成3阶矩阵显示，这样便于理解。

顺便上个例图:

矩阵, 矩阵 , Android基础控件之ImageView

第一排参数，sin和cos表示Y方向上旋转角度的正弦和余弦值，offsetX表示延X轴方向的偏移量，此偏移量也受放大缩小比例影响。

第二排参数，sin和cos表示X方向上旋转角度的正弦和余弦值，offsetX表示延Y轴方向的偏移量，此偏移量也受放大缩小比例影响。

第三排参数，前两个就是表示旋转角度和平移的中心点，这里指定的点是0,0，scale是缩放比例参数，图片缩放为1/scale大小。

在选择旋转角度上注意，这里的角度以X轴方向为起点，顺时针为正角度，逆时针为负角度。

数学高能可直接自己设定相应参数，通过矩阵乘法。建立属于自己的矩阵变换来实现图片变换。

上面例子只是简单讲述原理。

对于高等数学不熟悉的，也可以通过Matrix自带的API来完成以上功能。

Matrix的操作方式，包括translate(平移)，rotate(旋转)，scale(缩放)，skew(倾斜)四种，每种变换在API中都有

对应的set,post,pre三种操作方式，除了平移，其他都可指定中心点。

对于set方式，每次调用都会生成一个新的矩阵数组，比如将先将图片平移到72,72再旋转30度。

如果代码写成 matrix.setTranslate(72, 72);  matrix.setRotate(30);当调用imageView.setImageMatrix(matrix);时，只会显示旋转。

post方式是后乘，表示使用当前矩阵乘以参数给出矩阵，要实现上述例子，

代码应该为matrix.setTranslate(72, 72);  matrix.postRotate(30);

pre方式是前乘，表示使用参数给出的矩阵乘以当前矩阵，要实现上述例子，

代码应该为matrix.setTranslate(72, 72);  matrix.preRotate(30);

这里区分前乘后乘，是因为在矩阵乘法中，不满足乘法交换律也就是说A*B≠B*A,所以在变换流程控制上，要注意此问题。

在缩放方法中，是两个参数，分别对应x和y方向的缩放比例。

skew倾斜，也叫错切变换，用语言不好描述，直接上效果图大家看就懂了

矩阵, 矩阵 , Android基础控件之ImageView

对应方法分别为matrix.setSkew(0.5f, 0.5f);  matrix.setSkew(0, 0.5f);matrix.setSkew(0.5f, 0);

错切变换其实是特殊的线性变换，如x坐标不变，y坐标按比列平移，简单来说就是平移后面积不变，这里讲原理需要涉及到

数学矩阵和坐标变换，鄙人大学不才，身为数学课代表，也表示忘的差不多了，所以不敢随意指点啰嗦，使用效果自己慢慢体会。

说一说这个效果使用之处，在图片切换时，如翻书，或者滑动时的类似立体切换效果，倒影，也可以通过对称变换来实现轴对称图形。

这里再补充一个类，用来进行图形翻转，绕x轴或y轴转动特定角度,需要配合矩阵来使用，可实现类似win8磁贴点击效果

android.graphics.Camera camera;

camera有rotateX/Y旋转方法，也有translate(x,y,z)平移方法，当平移z坐标，等同于缩放，因为调整的是视野距离。

使用例举

  1. camera.save();
  2. camera.rotateY(15);//设置旋转角，角度正负方向遵循左手螺旋定则，拇指指向X/Y正方向，四指指向为正
  3. camera.getMatrix(matrix);
  4. camera.restore();
  5. matrix.preTranslate(0, -imageView1.getHeight()/2f);//平移原点至中心点
  6. matrix.postTranslate(0, imageView1.getHeight()/2f);//平移中心点回原点
  7. imageView.setScaleType(ScaleType.MATRIX);
  8. imageView.setImageMatrix(matrix);

平移中心点很重要，图形处理是按中心坐标进行点对称阵列，所以旋转中心要设定好。先pre至平移方向的负坐标，在post回平移方向的正坐标，这里和矩阵先后乘有关。

来看看仿win8效果图

矩阵, 矩阵 , Android基础控件之ImageView矩阵, 矩阵 , Android基础控件之ImageView

矩阵, 矩阵 , Android基础控件之ImageView矩阵, 矩阵 , Android基础控件之ImageView

以上均为点击效果实现，在onTouch监听事件中写入相应方法即可。

补充，关于ImageView背景设置，同理也适用于Button控件的背景设置，

常常会用到选择器模式设置背景，这样就可以根据不同状态切换显示的图片

android:background="@drawable/selector" 此属性可设置自己建立的选择器。

例如

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <item android:state_pressed="true" android:drawable="@drawable/widget_icon_fav"></item>
  4. <item android:state_pressed="false" android:drawable="@drawable/widget_icon_fav_3"></item>
  5. </selector>

这是一个简单的选择器示例，用于区分触摸View按下和抬起时不同的背景图。

对于ImageView来说，还有一种多级图片显示类型设置level-list,可用于有明显不同级别需要，对应不同图片来显示，如电量图标，信号图标

这些不是简单的两层切换，也不是由触摸或者是否获取焦点来控制

在自定义drawable中，建立如下文件image_list.xml

以下例子只写了3级，可以自己根据情况增加多级

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <level-list xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <item android:maxLevel="0" android:drawable="@drawable/widget_icon_fav" />
  4. <item android:maxLevel="1" android:drawable="@drawable/widget_icon_fav_4" />
  5. <item android:maxLevel="2" android:drawable="@drawable/widget_icon_fav_3" />
  6. </level-list>

android:maxLevel定义*别，也可单独使用android:minLevel来设置最低级别，或者两者结合起来定位级别区间

然后再需要显示的ImageVIew中使用android:src="@drawable/image_list" 方式来使用，如果用android:background=“”来填充，则设置级别时无效

在代码中需要变更显示的图片时，只需要对应的ImageView调用setImageLevel(int level)方法，就可以显示不同级别图片了

ImageView介绍暂时介绍到这，遇到相关问题再补充，也希望各位看官有高见者帮忙补充。

testend

上一篇：Spark2.0编译


下一篇：android 基础控件（EditView、SeekBar等）的属性及使用方法