如何在屏幕上拉伸三个图像以保持纵横比？

Posted 2023-04-13

【中文标题】如何在屏幕上拉伸三个图像以保持纵横比？

【英文标题】：How to stretch three images across the screen preserving aspect ratio?

【发布时间】：2011-06-08 07:34:40

【问题描述】：

我需要在屏幕顶部并排（无间隙）显示三个相同尺寸的图像 (200 X 100)。它们应该占据屏幕的整个宽度并保持纵横比。 是否可以仅使用布局 xml 文件来完成，或者我需要使用 java 代码？ 解决方案应该独立于解决方案......任何人都可以为这个（或类似）问题发布解决方案或链接吗？谢谢！

【问题讨论】：

我目前正在尝试解决同样的问题！还没有找到解决方案:(。我们自己写的 ImageView 可以自动调整它的高度吗？但是使用原始的 ImageView 会更好。

这是一个简单的魔法公式，可以在某些情况下解决问题：***.com/a/23777047/294884

【参考方案1】：

搞定了！但正如我上面所说，您需要创建自己的类。但它很小。我在这篇博文中这个 Bob Lee 的回答的帮助下创建了它：android: How to stretch an image to the screen width while maintaining aspect ratio?

package com.yourpackage.widgets;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AspectRatioImageView extends ImageView 

    public AspectRatioImageView(Context context) 
        super(context);
    

    public AspectRatioImageView(Context context, AttributeSet attrs) 
        super(context, attrs);
    

    public AspectRatioImageView(Context context, AttributeSet attrs, int defStyle) 
        super(context, attrs, defStyle);
    

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
        setMeasuredDimension(width, height);
    

现在在 XML 中使用它：

<com.yourpackage.widgets.AspectRatioImageView 
    android:id="@+id/image"
    android:src="@drawable/yourdrawable" 
    android:layout_ 
    android:layout_
    android:layout_alignParentTop="true" 
    android:layout_centerHorizontal="true" 
    android:adjustViewBounds="true" />

玩得开心！

======================================

通过使用 android:adjustViewBounds="true" 找到了另一种仅在 XML 中执行相同操作的方法。举个例子：

<LinearLayout
    android:layout_
    android:layout_ >

    <ImageView
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/image1" />

    <ImageView
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/image2" />


    <ImageView
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/image2" />

</LinearLayout>

【讨论】：

不错！干得好，写得好！

当您的可绘制对象为空时（例如，您正在从 Internet 上下载内容）请注意。否则，就像一个魅力。

在某些情况下又遇到了 2 个问题 - getIntrinsicWidth() 返回 0（除以 0），因此您想检查一下。另外，一旦我检查 getDrawable() 是否为空，如果是因为我忘记返回 super.onMeasure，Android 就会崩溃。

感谢您提供的信息。我想知道它什么时候会返回 0。你能告诉我更多吗？文档说：“返回底层可绘制对象的内在宽度。如果它没有内在宽度，则返回 -1，例如纯色。”我猜在 -1 的情况下，我们将不得不给出一个“默认高度”。一切都取决于试图解决的确切问题。在我的情况下，照片总是有宽度和高度。 null 问题是有道理的，但我没有解决它，因为在我的代码中我从未遇到过这个问题。

我设法解决了修改这个example的滚动问题

【参考方案2】：

考虑到可能出现的问题，只需进行小幅升级：null Drawable 或 0 宽度。

package com.yourpackage.yourapp;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AspectRatioImageView extends ImageView 

public AspectRatioImageView(Context context)

    super(context);


public AspectRatioImageView(Context context, AttributeSet attrs)

    super(context, attrs);


public AspectRatioImageView(Context context, AttributeSet attrs,
        int defStyle)

    super(context, attrs, defStyle);


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

    Drawable drawable = getDrawable();
    if (drawable != null)
    
        int width =  MeasureSpec.getSize(widthMeasureSpec);
        int diw = drawable.getIntrinsicWidth();
        if (diw > 0)
        
            int height = width * drawable.getIntrinsicHeight() / diw;
            setMeasuredDimension(width, height);
        
        else
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    
    else
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

【讨论】：

谢谢！从网上下载图像时效果更好:)

不适用于图像加载器！当我尝试从互联网下载图像时。

【参考方案3】：

Jake Wharton 改进了 AspectRatioImageView 类，可以通过 xml 设置dominantMeasurement 和 aspectRatio。您可以在下面的链接中找到它。

https://gist.github.com/JakeWharton/2856179

【参考方案4】：

我不知道 XML 布局和 android API，但数学很简单；找到屏幕的宽度并除以三。这是每个图像的宽度。现在将宽度乘以原始图像的高宽比。这是每张图片的高度。

int imageWidth = screenWidth / 3;
float ratio = originalImage.Height / (float)originalImage.Width;
int imageHeight = (int)(imageWidth * ratio);

【讨论】：

当然可以在代码中。但是只在 XML 中做呢？