如何将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，重力，...

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限制在中间的ImageView中，在其他两个视图之间:

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屋！