Image déroulante en affichage liste pour plusieurs résolutions

Question

Cette question est peut-être hors sujet mais je cherche vraiment une réponse.

J'utilise la liste, il a l'image et le texte (40% image et 60% du texte). L'image est en cours de chargement depuis le serveur. J'utilise Universal Image chargement lib pour cache. Nous envoyons des résolutions d'image de 200 * 200 pour toutes les résolutions. Dans certains appareils, il semble peu étirer, Y at-il un moyen que nous pouvons ajouter la hauteur de la largeur de l'image selon la résolution.

Je veux simplement télécharger l'image selon la résolution de l'appareil. mais comment vais-je calculer la largeur de l'image et la hauteur pour différentes résolutions pour s'adapter à 40% de l'élément de la liste?

Edit: xml layout Ajouté (Liste de mise en page de l'article)

<RelativeLayout 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_weight="0.4" 
    android:orientation="vertical" > 

    <ImageView 
     android:id="@+id/recommendationlist_image" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignParentTop="true" 
     android:contentDescription="@string/app_name" 
     android:scaleType="fitXY" 
     android:src="@drawable/imgnt_placeholder" /> 
</RelativeLayout> 

<RelativeLayout 
    android:layout_width="0dp" 
    android:layout_height="fill_parent" 
    android:layout_weight="0.6" 
    android:padding="10dp" > 

    <TextView 
     android:id="@+id/recommendationlist_eventname" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:gravity="start|center_vertical" 
     android:maxLines="2" 
     android:minLines="1" 
     android:textColor="#86bc25" 
     android:textSize="18sp" 
     android:textStyle="bold" /> 

    <TextView 
     android:id="@+id/recommendationlist_venuename" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignLeft="@id/recommendationlist_eventname" 
     android:layout_alignStart="@id/recommendationlist_eventname" 
     android:layout_below="@id/recommendationlist_eventname" 
     android:textColor="#444444" 
     android:textSize="12sp" /> 

    <TextView 
     android:id="@+id/recommendationlist_date" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignLeft="@id/recommendationlist_venuename" 
     android:layout_alignParentBottom="true" 
     android:layout_alignStart="@id/recommendationlist_venuename" 
     android:textColor="#444444" 
     android:textSize="14sp" 
     android:textStyle="bold|italic" /> 
</RelativeLayout> 

Merci Vous

Answer 1

Vous pouvez également utiliser picasso: https://github.com/square/picasso

OU

Glide: https://github.com/bumptech/glide

Pour une image meilleure résolution et la qualité

Answer 2

ImageView est juste le conteneur de l'image. Pour adapter l'image dans le conteneur 200x200, l'image doit être 200x200.

Lorsque des demandes d'applications d'image (200x200), ImageView peut évoluer vers le haut ou vers le bas de l'image. https://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType Mais l'image source d'origine est de 200 x 200.

Si vous souhaitez modifier l'image source par chaque résolution différente, vous pouvez placer les images differenct sur le serveur comme http://localhost/images/hdpi/sample_200x200.jpg .

Modifier

Si vous ne voulez pas l'image à étirer à 100dp ou si vous voulez afficher la taille de l'image d'origine, il est impossible.because vous déclarez 40% de sa vue parent.

<RelativeLayout 
    android:layout_width="0dp" 
    android:layout_height="100dp" 
    android:layout_weight="0.4"> 
    <ImageView 
     android:id="@+id/recommendationlist_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:scaleType="fitXY" 
     android:src="@drawable/imgnt_placeholder" /> 
</RelativeLayout> 
<RelativeLayout 
    android:layout_width="0dp" 
    android:layout_height="match_parent" 
    android:layout_weight="0.6" 
    android:padding="10dp"> 
...... 

Answer 3

Votre image sera toujours tendue/rétrécie ou autrement, ne laissez simplement un espace vide si le rapport d'aspect de l'image ne correspond pas à le rapport d'aspect de votre point de vue liste (par exemple. Votre appareil si elle est ensemble pour correspondre/remplissage parent)

il n'y a pas trop de moyens pour l'éviter sauf si vous téléchargez le rapport d'aspect exact de votre appareil prend en charge. Vous pouvez utiliser scaleType pour contrôler le comportement dans le cas où le rapport d'aspect sont différentes (en utilisant par exemple centerCrop) qui a ses limites ou calculer le rapport largeur/hauteur de l'affichage de la liste objet selon cette solution:

Calculating the height of each row of a ListView

puis en téléchargeant la bonne image à partir de votre serveur si elle prend en charge plusieurs résolutions/ratios d'aspect.L'utilisation de différentes bibliothèques d'images ne résoudra pas le problème (contrairement à ce que vous indique l'autre réponse). le problème ici est que vous montrez une image avec une résolution fixe et un rapport d'aspect fixe dans un conteneur qui a un rapport d'aspect différent et supporte une résolution différente (conduisant à des images étirées et/ou à la pixilation).

Si votre serveur peut fournir le rapport d'aspect correct (calculé en utilisant le lien I lié), vous pouvez utiliser le ImageScaleType.EXACTLY (ou même ImageScaleType.EXACTLY_STRETCHED) sur UIL pour le charger selon votre résolution. Cela devrait éviter le problème avec l'image recherchée tendue sur différents appareils. Si votre serveur ne prend pas en charge différentes résolutions, centerCrop est votre meilleur choix. Il va centrer l'image dans la vue de l'image et va rogner tout ce qui ne rentre pas à l'intérieur ce qui sera mieux que d'étirer l'image (en utilisant fitXY) que vous utilisez.

Answer 4

Cela ressemble à un problème conflictuel. Vous ne pouvez pas maintenir la largeur du conteneur fixe (dans votre cas 40% de la largeur de l'écran) tout en le faisant correspondre avec le format de l'image. A côté de vos images source sont tous 200 x 200. Comment pouvez-vous savoir si 40% de la largeur de l'écran x hauteur ImageView correspondra au même rapport? (même si le rééchelonnement n'est pas pris en compte)

Je pense que vous devriez changer le scaleType de fitXY à centerCrop (déjà suggéré par d'autres, mais assurez-vous que votre image est au moins aussi grande que la plus grande ImageView possible sur votre appareil cible).

La meilleure solution consiste à créer différentes dispositions pour différentes résolutions d'écran. De cette façon, vous pouvez définir non seulement ImageView mais toute autre chose pour un écran donné. Par exemple, vous pouvez mettre toutes les dispositions pour les appareils avec écran largeur supérieur ou égal à 600dp (comme la plupart des tablettes) dans:

res/layout/layout-w600dp 

Answer 5

Essayez cette mise en page:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_weight="0.4" 
    android:orientation="vertical" > 

<FrameLayout 
    android:id="@+id/fm_imageview1" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_alignParentCenter="true" 
    > 

    <ImageView 
    android:id="@+id/recommendationlist_image" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:adjustViewBounds="true" 
    android:layout_gravity="center" 
    android:gravity="center" 
    android:contentDescription="@string/app_name" 
    android:src="@drawable/imgnt_placeholder" /> 

    </FrameLayout> 
</RelativeLayout> 

<RelativeLayout 
    ... ... 
    > 

    //no change 

</RelativeLayout> 

Hope this aide!

Answer 6

Il suffit d'utiliser

android:scaleType="centerCrop" 
 
android:background="@drawable/img_placeholder"

cela va recadrer l'image en fonction de la taille de imageview, si le imageview sera un carré alors il n'y aura pas de culture. De même, conservez différents "img_placeholder" dans les dossiers drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi en conséquence.