web-dev-qa-db-fra.com

Android - Échelle du bouton d'image

J'essaie d'adapter une image à l'intérieur d'un ImageButton pour le test, mais la façon dont le ImageButton se comporte n'est pas comme prévu.

au départ, j'ai fait une image 988x89 pixels PNG et je l'ai placée à l'intérieur d'un ImageButton, qui est dans un 7 pouces 1024x6 pixels écran émulé. Le ImageButtonis 988dp x 89dp, je sais que le dp n'est pas le même que les pixels, mais pour cette résolution, je m'attendais à ce que l'image se redimensionne raisonnablement pour occuper la plupart des ImageButton. J'ai également changé pour px au lieu de dp pour les tests et cela n'a fait aucune différence.

Mais à la place, le ImageButton a rendu l'image à l'intérieur TRÈS petite (les lignes bleues sont les limites du ImageButton et la ligne verte est une indication d'alignement central).

Test Image 1

donc question # 1: Pourquoi le ImageButton fait-il une image aussi grande que celle-ci si petite, alors qu'elle pourrait remplir la majeure partie de l'écran, même avec la taille ImageButton étant très large ?

Donc, pour surmonter cela, j'ai sélectionné adjustViewBounds ce qui n'a fait aucune différence, ce qui amène la question n ° 2: Pourquoi? Le réglage de la vue n'est-il pas censé le faire?

Jusqu'à présent, le code est:

<ImageButton
        Android:layout_width="988dp"
        Android:layout_height="89dp"
        Android:id="@+id/ibTest"
        Android:src="@drawable/image_top_test"
        Android:layout_centerHorizontal="true"
        Android:adjustViewBounds="true"
        Android:cropToPadding="false"
        Android:layout_below="@+id/hlTopBar"
        Android:background="#00000000" />

Alors plus tard, j'ai changé scaleType en fitCenter et l'image est devenue:

Test Image 2

Ce qui est bizarre pour moi aussi, car le ImageButton a le même rapport d'aspect que l'image, donc je m'attendrais à ce qu'il tienne à 100%, mais il ne convient pas (il y a un écart dans la largeur des deux côtés de l'image).

Alors plus tard, j'ai changé scaleType en fitXY et j'ai obtenu mon résultat final:

enter image description here

Ce qui semble être l'image attendue après tout (comparer l'image de fitXY à l'image de fitCenter dans Photoshop montre que l'image fitCenter est légèrement ovale, mais elle peut ' t être affiché ici, ce qui est attendu car la largeur ne correspond pas à l'image comme le fait la hauteur).

Donc ma question générale est (# 3): Quelle est la bonne façon d'ajuster une image dans Android, et de s'attendre à ce qu'elle ait sa taille normale à l'écran, et pourquoi la mise à l'échelle est-elle si désordonnée et je le fais mal?

Je sais qu'il y a des problèmes de tailles d'écran et de dp et etc., mais la mise à l'échelle ne se comporte pas de manière contrôlée, fitCenter rend l'image ovale et fitXY dépend trop de moi pour définir la bon rapport d'image sur XY, donc je me demande si je fais quelque chose de mal et comment c'est censé être la bonne façon.

Code XML final:

<ImageButton
        Android:layout_width="988dp"
        Android:layout_height="89dp"
        Android:id="@+id/ibTest"
        Android:src="@drawable/image_top_test"
        Android:layout_centerHorizontal="true"
        Android:adjustViewBounds="true"
        Android:cropToPadding="false"
        Android:layout_below="@+id/hlTopBar"
        Android:background="#00000000"
        Android:scaleType="fitXY" />
androidimageuser-interface
22
mFeinstein

C'est un bon essai, vous essayez d'aller plus loin dans les implémentations Android.

Rép # 3:

Au début, fournir une taille exacte comme hauteur et largeur n'est pas une bonne pratique dans Android. Si vous souhaitez savoir pourquoi, la raison serait simplement qu'il essaiera de compresser/agrandir l'image à la taille spécifiée par vous dans les paramètres de hauteur et de largeur. Toujours wrap_content est le paramètre préféré pour que le système d'exploitation s'ajuste automatiquement en fonction de la taille de l'écran. Par conséquent, vous devez le modifier comme suit:

<ImageButton
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:id="@+id/ibTest"
    Android:src="@drawable/image_top_test"
    Android:layout_centerHorizontal="true"
    Android:adjustViewBounds="true"
    Android:cropToPadding="false"
    Android:layout_below="@+id/hlTopBar"
    Android:background="#00000000"
    Android:scaleType="fitXY" />

Rép # 1:

Pourquoi l'ImageButton rend-il une image aussi grande que celle-ci si petite, alors qu'elle pourrait remplir la majeure partie de l'écran, même si la taille de l'ImageButton est très large?

La réponse est similaire à celle mentionnée ci-dessus. La taille de votre image sera bien inférieure à celle du système d'exploitation Android calculé en fonction de la taille mentionnée, en tenant compte de la résolution de l'appareil. Utilisez le http://coh.io/adpi/ (ou http://density.brdrck.me/ ) site pour le rendre simple à calculer. Toujours prendre le mdpi comme standard ou base. Supposons que la taille de votre image soit 988X89 en mdpi, il sera:

enter image description here Maintenant, c'est comme si vous essayez d'afficher une image de 988px X 89px sur un écran xhdpi où le Android Os a calculé la taille de l'image comme 1976px X 178px, ce qui est beaucoup plus grand que votre donnée) taille d'image de 988 pixels X 89 pixels. C'est pourquoi vous obtenez une petite image avec la plupart des zones blanches.

Comment le corriger? Parcourez les spécifications Android pour prendre en charge des écrans de densités différentes. Cela vous oblige à concevoir des images spécifiquement pour hdpi, mdpi, xhdpi et placez-les dans les dossiers appropriés de:

 MyProject/
     res/
       drawable-xhdpi/
           awesomeimage.png
       drawable-hdpi/
           awesomeimage.png
       drawable-mdpi/
           awesomeimage.png
       drawable-ldpi/
           awesomeimage.png

Ref: http://developer.Android.com/training/multiscreen/screendensities.html pour plus de détails

30
Kailas

Sur l'activité Creat..vous pouvez obtenir la résolution de l'écran ... et redimensionner l'image en fonction de la largeur et de la hauteur de l'écran..et définir l'image .. De cette façon, votre ratio sera le même sur tous les types d'appareils ..

pour redimensionner les images ..: 1. Obtenez la largeur et la hauteur de l'écran 2. redimensionnez l'image selon la résolution de l'écran 3. définissez l'image sur la vue

1
Wasim Ahmed