ImageView如何对齐底部，填充它的宽度和高度，并保持它的纵横比? [英] How to align ImageView to the bottom, fill its width and height, and keep its aspect ratio?

问题描述

ImageView 有各种 XML 属性来缩放其内容，以及允许放置视图和设置其大小的各种布局视图.

There are various XML attributes for ImageView to scale its content , and various layout views that allow to place views and set their sizes.

但是，我不知道如何在某些情况下很好地缩放 imageView.

However, I can't figure out how to scale an imageView nicely on some cases.

一个例子是将 ImageView 放在底部(例如 frameLayout)，尽可能地缩放它的宽度，并且仍然保持纵横比(不裁剪).

An example of it is to put the ImageView on the bottom (of a frameLayout, for example) , scale its width as much as possible, and still keep the aspect ratio (without cropping).

我发现没有一种组合有效，包括各种 ScaleType 值、adjustViewBounds、gravity ......

None of the combinations I've found worked, including various ScaleType values, adjustViewBounds, gravity ,...

ImageView 似乎遗漏了一些重要的 ScaleType 值.

It seems as if ImageView misses some important ScaleType values.

到目前为止，唯一对我有用的解决方案是将 imageView 设置为底部(使用设置为底部和中心水平的重力)，并使用类似于此的代码:

So far, the only solution that worked for me, is to set the imageView to the bottom (using the gravity set to bottom and center-horizontal), and use code, similar to this:

final ImageView logoBackgroundImageView = ...;
final LayoutParams layoutParams = logoBackgroundImageView.getLayoutParams();
final Options bitmapOptions = ImageService.getBitmapOptions(getResources(), R.drawable.splash_logo);
final int screenWidth = getResources().getDisplayMetrics().widthPixels;
layoutParams.height = bitmapOptions.outHeight * screenWidth / bitmapOptions.outWidth;
logoBackgroundImageView.setLayoutParams(layoutParams);

这通常可以工作，并且不需要太多更改即可使其在不全屏时工作，但我想知道是否有更简单的方法.

This usually works , and doesn't need much changes to make it work for when it's not in full screen, but I wonder if there is a simpler way.

如果高度变得太大，它可能不起作用，因此您可能需要更改它，以便在发生这种情况时将宽度设置为更小以使所有内容都适合容器.

It might not work in case the height gets to be too large, so you might want to change it so that if that's happening, you set the width to be smaller to allow everything fit the container.

是否有解决与 ImageView 相关的各种问题的解决方案或库?

Is there a solution or a library that fixes the various issues related to the ImageView ?

这是我正在尝试做的示例图像，这一次，在一个垂直的 LinearLayout 中，它在中间的 ImageView 之间，在其他 2 个视图之间:

here's a sample image of what I'm trying to do, this time, within a vertical LinearLayout that bounds the ImageView in the middle, between 2 other views:

如您所见，在部分(或全部?)预览中，中间图像向右对齐，而不是停留在中间(水平).

As you can see, on some (or all?) of the previews, the middle image is aligned to the right instead of staying on the middle (horizontal).

我希望它占据它获得的所有空间并缩放(保持纵横比)，同时与它所拥有的空间的底部对齐.

I want it to take all the space it got and scale (keeping aspect ratio), and yet be aligned to the bottom of the space that it has.

这是我尝试过的一种组合的示例 XML:

here's a sample XML of one combination I've tried :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FF339AE2">

    <View
        android:layout_width="match_parent"
        android:id="@+id/topView"
        android:layout_alignParentTop="true"
        android:layout_height="100dp"
        android:background="#FF00ff00"
        />


    <FrameLayout
        android:layout_below="@+id/topView"
        android:layout_width="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/bottomView"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:background="#FFffff00"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@android:drawable/sym_def_app_icon"
            android:scaleType="fitEnd"
            android:layout_height="match_parent"
            />
    </FrameLayout>

    <View
        android:background="#FFff0000"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/bottomView"
        android:layout_width="match_parent"
        android:layout_height="100dp"/>

</RelativeLayout>

再次注意，我尝试了多种组合，但都没有奏效，因此如果您建议在 XML 中进行更改，请先尝试一下.另请注意，以上是 POC(为了便于阅读).

Again, note that I've tried multiple combinations, but none of them worked, so if you suggest something to change in the XML, please try it out first. Also note that the above is a POC (to make it easy to read).

顺便说一句，我建议的解决方法适用于某些(或大多数?)情况，但不是全部.您只需旋转设备即可注意到它.也许有办法修复它，或者从 ImageView 扩展以提供额外的情况.

BTW, the workaround I've suggested works on some (or most?) cases, but not all. You can notice it by just rotating your device. Maybe there is a way to fix it, or extend from ImageView to provide the extra case.

推荐答案

你需要三个属性的组合:

You need a combination of three attributes:

android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"

需要 adjustViewBounds 属性，因为默认情况下 ImageView 会测量自身以匹配可绘制对象的原始尺寸，而不考虑根据缩放类型执行的任何缩放.

The adjustViewBounds attribute is needed because ImageView measures itself to match the original dimensions of the drawable by default, without regard to any scaling performed according to the scale type.

这篇关于ImageView如何对齐底部，填充它的宽度和高度，并保持它的纵横比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！