Android ImageView设置图片自适应的方法汇总

最新推荐文章于 2024-08-15 17:42:26 发布

怀庆同学

最新推荐文章于 2024-08-15 17:42:26 发布

阅读量1.2w

点赞数 7

分类专栏：图片处理和Bitmap和Glide Android Drawable

原文链接：https://blog.csdn.net/lonewolf521125/article/details/42525827

版权

Android 同时被 3 个专栏收录

119 篇文章 1 订阅

订阅专栏

图片处理和Bitmap和Glide

5 篇文章 0 订阅

订阅专栏

Drawable

3 篇文章 0 订阅

订阅专栏

1.ImageView 通过xml

网络上下载下来的图片自适应： android:adjustViewBounds="true" //保持比例（其详细解释在下面）

<ImageView
    android:id="@+id/dynamic_item_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:layout_marginTop="5dip"
    android:adjustViewBounds="true"
    android:background="@drawable/imageview_background" />

另外，imageview_background.xml是给图片加一个边框

<?xmlversion="1.0" encoding="utf-8"?>
<shape   xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <stroke android:width="2.0dip"
            android:color="#99D9D9D9" /> 
    <cornersandroid:radius="2.0dip" /> 
    <paddingandroid:left="5.0dip" 
        android:top="5.0dip" 
        android:right="5.0dip"
        android:bottom="5.0dip" />
</shape>

ImageView属性说明：

1、类概述：显示任意图像，例如图标。ImageView类可以加载各种来源的图片（如资源或图片库），需要计算图像的尺寸，比便它可以在其他布局中使用，并提供例如缩放和着色（渲染）各种显示选项

2、XML属性

属性名称

描述

android:adjustViewBounds

是否保持宽高比。需要与maxWidth、MaxHeight一起使用，否则单独使用没有效果。

android:cropToPadding

是否截取指定区域用空白代替。单独设置无效果，需要与scrollY一起使用，效果如下，实现代码见代码部分：

android:maxHeight

设置View的最大高度，单独使用无效，需要与setAdjustViewBounds一起使用。如果想设置图片固定大小，又想保持图片宽高比，需要如下设置：

1）设置setAdjustViewBounds为true；

2）设置maxWidth、MaxHeight；

3）设置设置layout_width和layout_height为wrap_content。

android:maxWidth

设置View的最大宽度。同上。

android:scaleType

设置图片的填充方式。

matrix	0	用矩阵来绘图
fitXY	1	拉伸图片（不按比例）以填充View的宽高	layout_height:30px layout_width:120px
fitStart	2	按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的左边
fitCenter	3	按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的中间
fitEnd	4	按比例拉伸图片，拉伸后图片的高度为View的高度，且显示在View的右边
center	5	按原图大小显示图片，但图片宽高大于View的宽高时，截图图片中间部分显示	layout_height:60px layout_width:80px padding:10px
centerCrop	6	按比例放大原图直至等于某边View的宽高显示。
centerInside	7	当原图宽高或等于View的宽高时，按原图大小居中显示；反之将原图缩放至View的宽高居中显示。说明：centerInside表示按比例缩放图片，使得图片长 (宽)的小于等于视图的相应维度

android:src

设置View的drawable(如图片，也可以是颜色，但是需要指定View的大小)

android:tint

将图片渲染成指定的颜色。见下图：

左边为原图，右边为设置后的效果，见后面代码。

注意：控制的图片为资源而不是背景，即android:src="@drawable/logo"，而非android:background="@drawable/logo"

我就犯了这个低级错误，导致错怪人家scaleType不起作用。程序中动态加载图片也类似，如：应该imgView.setImageResource(R.drawable.* ); 而非imgView.setBackgroundResource(R.drawable.*);

2.设置ImageView的属性：

//宽度填满屏幕
android:layout_width=”match_parent”
android:scaleType=”fitXY” //单独设置图片时，慎用吧fitXY，容易图片变形（记得推荐位的图片变形啦）
android:layout_height=”wrap_content”
//保持比例，一定要设置
android:adjustViewBounds=”true” //记得要配合上面的fitXY，一起使用。

3.重写View的onMeasure方法

ImageView宽度填满屏幕，高度自适应

首先试一下默认的ImageView的效果，布局文件如下activity_main_2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <ImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/test"
        android:background="#FF0"/>
 
</LinearLayout>

MainActivity2.java

public final class MainActivity2 extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity_2);
 
        final ImageView imageView = (ImageView)findViewById(R.id.image);
        ViewTreeObserver vto2 = imageView.getViewTreeObserver();
        vto2.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                imageView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                Log.e("TestMeasure","w=" + imageView.getWidth() + "  h=" +         
                imageView.getHeight());
            }
        });
    }
}

test.jpg（正方形998*998）

可以看到，布局文件设置ImageView充满了屏幕，高度自适应，那运行后是我们需要的效果吗？

结果令人失望，虽然ImageView的宽度充满了屏幕，但是图片并没有填满屏幕，这是为什么呢？

原因分析 ---》回头看看ActivityMain2.java中的打印我们看到了ImageView的宽高信息：

TestMeasure﹕ w=1080 h=998

ImageView的高度是和图片的高度一样的998px。ImageView的宽度和屏幕宽度一样，1080px。

由于ImageView默认的scaleType是fitCenter，将图片按比例扩大（或缩放）到视图的宽（或高）然后居中显示，所以图片宽度没有充满屏幕的原因就是，ImageView的高度不够，它限制了图片的放大倍数。
那如何才能将ImageView的高度放大，使得图片宽度刚好充满屏幕呢？答案肯定在onMeasure方法中,自定义View。

public class ResizableImageView extends ImageView {
 
    public ResizableImageView(Context context) {
        super(context);
    }
 
    public ResizableImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        Drawable d = getDrawable();
 
        if(d!=null){
            // ceil not round - avoid thin vertical gaps along the left/right edges
            int width = MeasureSpec.getSize(widthMeasureSpec);
            //高度根据使得图片的宽度充满屏幕计算而得
            int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
            setMeasuredDimension(width, height);
        }else{
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
 
}

使用自定义的控件显示图片

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <org.sample.ResizableImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/test"
        android:background="#FF0"/>
 
</LinearLayout>

效果图

图片处理的相关知识参考：https://blog.csdn.net/jason_996/category_5801405.html?spm=1001.2014.3001.5482
————————————————
版权声明：本文为CSDN博主「easion_zms」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/easion_zms/article/details/50263409