Mise à l'échelle d'une image à la largeur maximale disponible, en conservant le rapport d'aspect et en évitant l'espace supplémentaire de l'ImageView

Question

J'ai cette simple mise en page XML, et un fichier green_square.png de 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>

Ce que j'essaie de faire, c'est de mettre l'image à l'échelle pour qu'elle remplisse la largeur du parent, en conservant son rapport d'aspect, sans espace supplémentaire dans l'ImageView.

J'ai ajouté un arrière-plan rouge à l'ImageView pour indiquer l'espace supplémentaire que je veux éviter.

Voici mon objectif

Answer 1

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

cela fonctionne pour moi. Pleine largeur du parent et recadrage central pour conserver le rapport hauteur/largeur.

Answer 2

C'est si simple. Il suffit de définir la largeur fill_parent et la hauteur wrap_content. Voici ce que j'ai trouvé.

<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" 
    />

Answer 3

À mon avis, cette ImageView La mise en page supplémentaire est un bug. La même chose s'est produite. En conséquence, le texte que je voulais faire suivre de l'icône green_square a suivi la mise en page supplémentaire. J'ai donc spécifié le texte par rapport au bas de l'écran. De cette façon, le texte passait au-dessus de la mise en page supplémentaire. Je l'admets, ce n'était pas la meilleure solution, mais c'est beaucoup mieux que d'avoir un énorme espace entre le texte et la mise en page. green_square et le texte.

Answer 4

Il y a beaucoup de bonnes réponses ici qui fonctionnent réellement. Je souhaite simplement partager la façon dont je procède maintenant avec une syntaxe XML plus moderne, la vue des contraintes. Croyez-moi, la vue des contraintes fonctionne !

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

bien sûr le tools:context="com.collectsavings.collect.collectpro.LoginAndRegisterPrompt" et Android:src="@drawable/green_square" devraient tous correspondre respectivement au contexte d'activité de votre application et aux ressources drawabl.

Answer 5

Utilisez le type d'échelle "fitCenter" ou "fitxy".