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

原创 2015年12月11日 14:59:39

在CSS中轻松设置width=100%就可以使得图片宽度充满屏幕,高度自适应,那么在Android里面怎样才能实现这种效果呢?


  • 使用默认的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
那如何才能将ImageView的高度放大,使得图片宽度刚好充满屏幕呢?答案肯定在onMeasure方法中。

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>



Android 设置ImageView宽度固定,其高度按比例缩放适应

Android设置ImageView宽度固定,其高度按比例缩放适应。。。
  • zuiwuyuan
  • zuiwuyuan
  • 2015年10月20日 23:20
  • 12126

android ImageView 宽度设定,高度自适应

ImageView 宽高设置。
  • chenqian_deyouxiang
  • chenqian_deyouxiang
  • 2015年07月11日 12:14
  • 31353

Android在ImageView控件中图片怎样铺满整个控件

我想让ImageView控件中的图片铺满整个控件,我设置了如下属性:
  • wei_zhi
  • wei_zhi
  • 2015年12月27日 17:36
  • 4830

Android ImageView 图片拉伸,填满控件

最近要做个软件的启动界面,要展示客户公司的企业形象,用一张图片放在ImageView中实现,但是发现图片并没有填满,而是在上下边上留出了一点空白: 这样不行,那怎样才能让图片铺满控件呢,网上找的的...
  • zhouyingge1104
  • zhouyingge1104
  • 2016年01月18日 10:31
  • 12459

动态的获取和设置ImageView的宽度和高度

package com.pic; import android.app.Activity; import android.os.Bundle; import android.util.Log; im...
  • heng615975867
  • heng615975867
  • 2013年07月17日 17:56
  • 40856

Android实现图片宽度100%ImageView宽度且高度按比例自动伸缩

在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实...
  • zsjangel
  • zsjangel
  • 2014年02月13日 23:51
  • 12467

imageview获取宽高

在开发中,可以通过getDrawable().getBounds().height()与getDrawable().getIntrinsicHeight()两种方法来获得图片资源的真实宽高    Im...
  • qq_26296197
  • qq_26296197
  • 2017年02月18日 09:46
  • 1192

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

ImageView宽度填满屏幕,高度自适应
  • axi295309066
  • axi295309066
  • 2017年04月17日 12:48
  • 1740

Android ImageView 正确使用姿势

原文地址:http://dev.qq.com/topic/5832602d7196970d65901d76 导语 本文主要介绍了 ImageView 的相关重要方法,从源码角度剖析...
  • p522947409
  • p522947409
  • 2016年11月23日 21:09
  • 1033

Android基础入门教程——2.3.4 ImageView(图像视图)

Android基础入门教程——2.3.4 ImageView(图像视图) 本节引言: 1.src属性和background属性的区别: 1)写代码验证区别: 2)解决blackground拉伸导致图片...
  • zpj779878443
  • zpj779878443
  • 2015年07月23日 09:18
  • 11099
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ImageView宽度填满屏幕,高度自适应
举报原因:
原因补充:

(最多只允许输入30个字)