Scaling an image to max available width, keeping aspect ratio and avoiding ImageView extra space

问题

I have this simple layout XML, and a green_square.png file which is 30X30 pixels

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:background="@color/red"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        android:src="@drawable/green_square"/>

</LinearLayout>

What I'm trying to achieve is scaling the image to fill the parent width, keeping it's aspect ratio with no extra space of the ImageView.

I've added a red background to the ImageView just for reference of the extra space I want to avoid.

Here is my goal

回答1:

<ImageView
        android:id="@+id/game"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_game" 
        />

this works for me. Full width of parent and center crop to keep aspect ratio

回答2:

It's so simple. Just make the width fill_parent and height wrap_content. Here is the I figured it out.

<ImageView
    android:id="@+id/game"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    android:src="@drawable/ic_game" 
    />

回答3:

In my view, this ImageView extra layout is a bug. I had the same thing happen. As a result, text that I wanted to follow the green_square followed the extra layout. So what I did was specify the text relative to the bottom of the screen. That way, the text would go over the extra layout. I admit, it wasn't the best solution, but it looks much better than having a huge space between the green_square and the text.

回答4:

There lots of great answers here which actually works. I just what to share the way I do this now with a more modern XML syntax, the constraint view. Trust me constraint view rooks!

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#394BAB"
    tools:context="com.appdomain.app.apppro.ActivityName">

    <ImageView
        android:id="@+id/nice_img"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:src="@drawable/green_square"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

of course the tools:context="com.collectsavings.collect.collectpro.LoginAndRegisterPrompt" and android:src="@drawable/green_square" Should all match your app activity context and drawabl resources respectively.

回答5:

Use scale type "fitCenter" or "fitxy"

回答6:

Try this,

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/red"
    android:scaleType="centerCrop"
    android:src="@drawable/green_square" />

</LinearLayout>

来源：https://stackoverflow.com/questions/8710556/scaling-an-image-to-max-available-width-keeping-aspect-ratio-and-avoiding-image

标签

android

layout

scale

fill-parent