你好,游客 登录 注册 搜索
背景:
阅读新闻

ImageView ScaleType 的扩展之Top Crop 的实现

[日期:2012-07-11] 来源:Linux社区  作者:zjmdp [字体: ]

ImageView中ScaleType属性可用来设置image的填充方式,主要通过以下两种途径:1、XML文件中设置Android:scaleType属性。2、代码中使用函数setScaleType(ScaleType scaleType)来设定。目前内置的填充方式有如下8种:

CENTER /center  按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示

CENTER_CROP / centerCrop  按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽)

CENTER_INSIDE / centerInside 将图片的内容完整居中显示,通过按比例缩小或原来的size使得图片长/宽等于或小于View的长/宽

FIT_CENTER / fitCenter  把图片按比例扩大/缩小到View的宽度,居中显示

FIT_END / fitEnd   把图片按比例扩大/缩小到View的宽度,显示在View的下部分位置

FIT_START / fitStart  把图片按比例扩大/缩小到View的宽度,显示在View的上部分位置

FIT_XY / fitXY  把图片不按比例 扩大/缩小到View的大小显示

MATRIX / matrix 用矩阵来绘制首先要选择设定图片填充方式的时机,不管如何,我们在必须在draw之前设定填充方式,因此我们可以考虑在layout的时候,通过查看layout源码,注意到setFrame函数,setFrame主要是设定view的尺寸和位置,并返回view是否changed,因此可在setFrame中设定填充方式,layout代码片段如下:

  1. public void layout(int l, int t, int r, int b) {
  2. int oldL = mLeft;  
  3. int oldT = mTop;  
  4. int oldB = mBottom;  
  5. int oldR = mRight;  
  6. boolean changed = setFrame(l, t, r, b);  
  7. if (changed || (mPrivateFlags & LAYOUT_REQUIRED) == LAYOUT_REQUIRED) {  
  8. if (ViewDebug.TRACE_HIERARCHY) {  
  9.     ViewDebug.trace(this, ViewDebug.HierarchyTraceType.ON_LAYOUT);  
  10. }  
  11. onLayout(changed, l, t, r, b);  

然而对于人像为主的图片来说,默认的几种方式都无法很好的满足需求,因为人像的头部往往被切割了,我们可以忍受人像下半部分被切割,但是无法忍受头部被切割,因此我们考虑第9种填充方式:TOP_CROP,TOP_CROP按如下方式填充图片:按比例扩大图片的size,仅仅横向居中,使得图片长(宽)等于或大于View的长(宽)。对于CENTER_CROP,其不仅横向居中,而且垂直也居中。
具体实现方式:重载ImageView,并重写setFrame方法来对ImageView中的drawable进行变换,代码如下:  

  1. public class TopCropImageView extends ImageView {  
  2.   
  3.     public TopCropImageView(Context context, AttributeSet attrs) {  
  4.             super(context, attrs);  
  5.             setScaleType(ScaleType.MATRIX);  
  6.     }  
  7.      
  8.     public TopCropImageView(Context context, AttributeSet attrs, int defStyle) {  
  9.         super(context, attrs, defStyle);  
  10.         setScaleType(ScaleType.MATRIX);  
  11.     }  
  12.   
  13.     public TopCropImageView(Context context) {  
  14.         super(context);  
  15.         setScaleType(ScaleType.MATRIX);  
  16.     }  
  17.      
  18.     @Override  
  19.     protected boolean setFrame(int l, int t, int r, int b)  
  20.     {  
  21.         if (getDrawable() == null) {  
  22.             return super.setFrame(l, t, r, b);  
  23.         }  
  24.         Matrix matrix = getImageMatrix();  
  25.         float scaleWidth = getWidth()/(float)getDrawable().getIntrinsicWidth();  
  26.         float scaleHeight = getHeight()/(float)getDrawable().getIntrinsicHeight();  
  27.         float scaleFactor = (scaleWidth > scaleHeight) ? scaleWidth : scaleHeight;  
  28.         matrix.setScale(scaleFactor, scaleFactor, 0, 0);  
  29.         if (scaleFactor == scaleHeight) {  
  30.             float tanslateX = ((getDrawable().getIntrinsicWidth() * scaleFactor) - getWidth()) / 2;  
  31.             matrix.postTranslate(-tanslateX, 0);  
  32.         }  
  33.         setImageMatrix(matrix);  
  34.         return super.setFrame(l, t, r, b);  
  35.     }  
  36. }  

代码中首先计算ImageView尺寸和Drawable尺寸的比值,用变量scaleWidth和scaleHeight保存,并用scaleFactor取两者较大值,因为我们要满足图片长(宽)等于或大于View的长(宽),然后调用matri.setScale进行图片的缩放操作,接下来的if (scaleFactor == scaleHeight) 的含义是Drawable放大后的width大于ImageView的width,这意味着我们需要进行水平居中平移,if分支中的代码即实现了平移操作,最后通过setImageMatrix(matrix)将matrix应用到image中来实现TOP_CROP的填充方式。下面两张图显示了CENTER_CROP和TOP_CROP的不同效果:

linux
相关资讯       Android编程 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款