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

时间:2024-01-08 08:09:32

天下文章大家抄,以下所有内容,有来自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