Création et utilisation d'images 9-patch sur Android

la plupart des exemples parlent de créer une image 9-patch, mais les détails de la mise en œuvre sont généralement laissés à un niveau élevé.

Nick's post above - avec le bon 9-patch tutorial qui fournit un fichier de téléchargement de projet de travail , sauvé la journée.

Voici les principaux détails d'implémentation qui ont fonctionné pour moi (une fois que vous avez une image de 9 patches prête à démarrer) :

1. de Référence de la dessinés avec le nom, mais ne comprennent pas .9.png (l'auto-complétion dans eclipse va prendre soin de cela)

2. assurez-vous que vous n'avez qu'une image sous le dossier principal /à dessiner (pas une version pour chaque dossier dpi)

3. l'image doit être spécifiée en utilisant :background, pas :src (cela m'a collé pendant un certain temps)

   android:background="@drawable/splash_logo"

4. assurez-vous que l'image et la mise en page qui la contient utilisent:

   android:layout_width="fill_parent"

android:layout_height="fill_parent"

Comment puis-je créer une image 9-patch? Est-il un outil? Puis-je le créer à partir D'Androidsdsdk ou de code?

lorsque vous recherchez un moteur de recherche important pour android 9-patch tool , le tout premier succès est pour la page de documentation développeur Android sur le draw9patch outil .

Principaux Avantages de 9-patch plus régulière png? (est-il extensible dynamiquement/ automatiquement selon l'écran?)

la documentation du développeur Android contient d'autres pages qui décrivent les fichiers PNG à neuf correctifs . Cette documentation comprend des passages comme:

un graphique NinePatchDrawable est une image bitmap extensible, que Android redimensionnera automatiquement pour accommoder le contenu de la vue dans laquelle vous l'avez placé comme l'arrière-plan. Un exemple d'utilisation d'un NinePatch est l'arrière-plan utilisé par les boutons Android standard-les boutons doivent s'étirer pour accommoder des cordes de différentes longueurs.

avec l'image 9-patch vous pouvez choisir quelle partie de votre image peut être étirée. Il doit s'agir d'une image png et le nom doit se terminer par .9.png (quelque chose.9.png)

http://developer.android.com/tools/help/draw9patch.html

outil Simple pour toutes les densités:

http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html

1.Que sont les images de NinePatch?

NinePatch images sont des images PNG qui marquent les parties d'une image qui peut être étiré. Ils ont une extension comme image_name.9.png .

2.Où sont-ils stockés dans android project ?

res/drawable/image_name.9.png

3.Comment créer une image NinePatch pour votre application anndroid ?

Android SDK comprend un WYSIWIG draw9patch.jar outil à l'intérieur de votre SDK Android /tools dossier.

Principaux Avantages de 9-patch plus régulière png

en fait 9 Patch les images sont extensibles, reproductibles, réduites à leur plus petite taille.l'image ne s'étire pas et lâche des proportions différentes tailles d'écran. Un avantage supplémentaire et le plus grand est la mémoire.

même mémoire de petite taille peut être réutilisée pour différents dispositifs de taille d'écran . Des images de 9 patchs bien conçues sont moins sujettes aux erreurs et ont une grande réutilisabilité .

https://developer.android.com/studio/write/draw9patch.html

C'est un bon outil: Cliquez ici.

9 images Patch sont extensibles, reproductibles images réduites à leur plus petite taille. L'exemple le plus simple serait de prendre un div arrondi et de le découper en 9 carrés comme vous le feriez une planche de tic-tac-toe. Les quatre coins ne changeraient pas du tout de taille, mais seraient statiques tandis que les 5 autres pièces seraient étirées ou répétées pour permettre à l'image entière de se dimensionner de façon appropriée.

avec cette explication et l'avènement de CSS3, vous pourriez penser qu'il n'y a pas de raison d'utiliser 9 patch images, mais le nom "9 patch" est un terme erroné. Les images peuvent être découpé en plus petits morceaux.

9 Patch images contiennent un index dont la pièce est ce que par l'ajout d'un 1px frontière de l'image. Les couleurs dans la bordure déterminent si une pièce est statique (ne se balance pas), elle s'étire, ou elle se répète.

Google Diaporama: https://docs.google.com/present/view?id=dc7ghz8w_34f8338rcg

Voir Aussi Le développeur Android info sur 9-patch images: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

Step 1 , puisque vous n'êtes pas encore familier, préparez une image png xxxhdpi à jouer d'abord.

Step 2 , ce champ extensible désiré doit être aussi court que possible puisque 9-patch aucune chose de ce type "réduire", mais "étendre" l'image. J'utilise personnellement L'outil en ligne de commande ImageMagick pour le convertir, par exemple:

convert -trim 'my_image.png' png32:my_image_trim.png #trim transparent
rm lala*; convert my_image_trim.png -crop 310  +repage  +adjoin  png32:lala%02d.png #cut center
convert +append lala02.png lala05.png png32:out_right.png #append back side by side
convert -resize 144x144\! out_right.png png32:my_image.png #resize to the desired dpi

il y a un écueil lors de la conversion: je dois préfixer avec png32, ou depuis XML renvoyant toujours l'image Non-9-patch.

Étape 4 , les lignes noires de gauche et des deux premières lignes forment une zone rectangulaire extensible, tandis que les lignes noires de droite et des deux dernières lignes forment une zone rectangulaire textuelle.

vous n'avez pas à dessiner les points noirs/les lignes à partir de zéro vous-même pour un cas simple, 4 lignes noires existaient déjà derrière le haut, gauche, bas, droite sur cette image. "Zoom avant" à plus grand si vous ne pouvez pas faire glisser ces lignes.

la position initiale de 2 lignes noires, verticales et horizontales, toutes deux déclarent une zone extensible:

• la position initiale de la ligne verticale gauche se situe entre le coin supérieur gauche et le coin inférieur gauche
• la position initiale de la ligne horizontale supérieure se situe entre le haut à gauche et le haut à droite.

la position originale de 2 lignes noires, verticales et horizontales, toutes les deux déclarent une zone de texte:

• la position initiale de la ligne verticale droite est entre la partie supérieure droite au bas à droite.
• la position initiale de la ligne horizontale inférieure est entre le bas, de gauche à droite.

ci-dessus est la position initiale des lignes noires avant de commencer à glisser pour rétrécir la longueur, pour ajuster la position de départ et la position de fin de ces lignes.

les zones extensibles et les zones de texte peuvent être différents dépend de vos besoins.

vous devez vous souvenir de la position de la ligne en faisant glisser, puisque la ligne gauche peut faire glisser vers le côté droit, et la ligne droite peut faire glisser vers le côté gauche, et vous pouvez obtenir la perte de quelle ligne est extensible ligne et quelle ligne est la ligne de texte.

Placez le curseur de la ligne sera en mesure de voir les positions x,y en pixels.

il y a 2 cases à cocher importantes que vous devez cocher, c.-à-d. "montrer des rustines" et "montrer des rustines"." case.

Dans "Afficher les mauvais patchs, si vous dessinez la zone extensible, mais couvrant la ligne courbe au lieu d'une ligne droite, alors elle marquera la zone rouge pour vous avertir. Vous pouvez restreindre votre ligne pour rejeter cet avertissement rouge, ou juste l'ignorer. Gardez à l'esprit que, le voyant rouge peut trompeuses qui peuvent être causés par la ligne opposée, dans ce cas, vous devez préciser la ligne opposée à rejeter d'avertissement rouge.

Étape 5 , en xml, vous pouvez vous référer à cette image en tant que fond TextView comme ci-dessous, utilisez wrap_content pour la rendre extensible:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/your_9_patch_image_name_excluded_.9"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    <2nd TextView />
</LinearLayout>

quand vous jouez pour la première fois avec, ne garantit aucun rembourrage sur textview ou n'importe quelle mise en page de parent, ou bien vous pouvez vous demander pourquoi ne pas travailler comme prévu.

C'est tout, maintenant votre taille d'image va augmenter en fonction de votre zone extensible déclarée que le texte se développe. Alors que la zone de texte signifie que le texte ne permet que zone.

bouton background exemple:

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@drawable/your_9_patch_image_name_excluded_.9"
        android:layout_gravity="center"
        />