Maintenant, la bonne chose est bien sûr que vous n'avez pas à utiliser cette largeur et
hauteur par défaut, vous pouvez définir les vôtres. Vous pouvez donc donner un style à cette image et
je vais le faire, ici je vais ajouter une propriété d'image dans la feuille de style et lui donner une largeur de disons 80% de la
vue parent, donc 80% de cette vue d'écran, donc 80% de la largeur de l'écran par conséquent et peut-être une
hauteur de 300
pixels et maintenant nous pouvons attribuer ce style d'image ici à ce composant d'image en utilisant l'accessoire de style
là-bas et en pointant l'image de styles comme
ceci et si nous le faisons maintenant, nous voyons que c'est bien mieux et maintenant l'image s'adapte à l'écran et est redimensionnée en conséquence.
À présent, vous pouvez également contrôler la façon dont l'image
est redimensionnée si vous définissez une largeur et une hauteur qui ne correspondent pas au rapport
d'aspect de l'image d'origine, donc si votre rapport largeur / hauteur n'est pas le même que l'image fichier
et les chances sont que
vous avez un rapport d'aspect différent, eh bien, vous pouvez définir un mode de redimensionnement ici et c'est simplement une chaîne où vous
pouvez
choisir parmi différentes options et par exemple la couverture est une option où vous redimensionnerez l'image pour conserver
son rapport d'aspect et placez-le dans cette case ici. Pour contenir, c'est similaire mais pour contenir, il ne prendra pas nécessairement la totalité de
la boîte comme vous pouvez le
voir ici, ici il contient l'image et la rétrécit simplement afin qu'elle ne dépasse pas la largeur et la hauteur de la boîte
que nous lui réservons . Pour la couverture,
il conserve également le rapport d'aspect mais ne réduit pas nécessairement l'image pour tenir
dans cette boîte, au lieu de cela, il recadre l'image au-delà des limites de l'accès qu'elle dépasserait autrement.
Nous pouvons donc simplement jouer avec ces différents paramètres pour obtenir la configuration que vous souhaitez, la couverture
est la valeur par défaut, mais si vous souhaitez conserver l'image entière et que vous ne souhaitez pas la recadrer sur aucun axe, vous pouvez
définir cette valeur sur contenir et vous pouvez jouer avec les autres valeurs aussi.
J'irai avec la couverture qui est encore la valeur
par défaut, vous pouvez donc supprimer cet accessoire ici, mais pour montrer que vous pouvez le définir, je le laisse ici.
Maintenant, cela vous permet d'ajouter une image ici à l'écran et bien sûr, vous pouvez attribuer plus de styles, par
exemple, nous pourrions essayer de donner à ces coins arrondis en
ajoutant maintenant un rayon de bordure ici et en définissant cela comme disons 200, donc vraiment grand rayon de la bordure
pour rendre une image arrondie.
Maintenant, cela semble un peu étrange, une meilleure façon de régler cela est simplement d'envelopper l'image dans
une vue environnante comme celle-ci, puis d'attribuer les styles qui devraient ajouter des coins arrondis ou des ombres portées ou quelque chose
comme ça à cette vue environnante.
Donc là, vous pouvez vous référer à l'accessoire de conteneur d'image ou quelque chose comme ça et l'ajouter ici
dans votre feuille de style et maintenant sur ce conteneur d'image, vous pouvez configurer un rayon de bordure de disons 200, peut-être aussi
une largeur de bordure de 3 et une bordure couleur de noir
afin que nous
ayons également une bordure visuelle et
si nous le faisons et l'enregistrons, nous obtenons ce look étrange. La raison en est que nous n'avons pas défini de largeur et de
hauteur sur le conteneur et que nous devons donc le faire et utiliser la largeur et la hauteur
que nous définissions sur l'image, la définir sur le conteneur à la place et sur l'image, nous
pouvons maintenant utilisez simplement une largeur de 100% et une hauteur de 100% parce que l'image est à l'intérieur de ce conteneur, donc
un 100% ici et ici signifie qu'il faut la largeur et la hauteur
que nous mettons en
place sur le conteneur mais maintenant le conteneur aussi a ces valeurs pour que le conteneur soit dimensionné de manière appropriée.
Maintenant, ce que vous pouvez voir est quelque chose d'étrange, l'image chevauche le conteneur.
Nous voyons les coins arrondis,
nous voyons le cercle ici en arrière-plan, ici avec ces coins ou bords noirs ici, mais l'image
n'est pas rognée pour ainsi dire et cela peut être réalisé
en ajoutant
une autre propriété sur le conteneur qui contient l'image et c'est la
propriété de débordement avec la valeur de caché.
Cela signifie que tout enfant à l'intérieur du conteneur qui sortirait du conteneur,
qui dépasserait les limites de ce conteneur est en fait coupé, est coupé
de sorte que maintenant nous comprenons bien l'image dans ce conteneur avec l'arrondi coins que nous sommes
arrivés ici.
Maintenant, ce que nous pouvons également ajouter, c'est un peu de marge sur l'axe vertical, peut-être de
30 pour avoir un certain espacement autour de l'image en haut et en bas et
avec cela, cela ne semble pas trop mal, je dirais.
Maintenant, vous remarquerez que cela ne ressemble pas à un cercle parfait ici sur Android.
La raison en est que notre rayon de bordure n'est pas calculé parfaitement, le rayon de bordure doit
être la moitié de votre largeur et hauteur et le problème
est que la largeur et la hauteur ne sont
pas égales, nous devons donc réellement rendre un carré ici, puis ajouter un rayon de la frontière pour obtenir un cercle parfait.
Donc, la solution pourrait être que nous définissions la largeur de 300 ici sur le conteneur d'image et que nous ayons donc la même largeur
que
la hauteur et utilisons maintenant un rayon de bordure moitié de celui qui est 150 et
maintenant nous obtiendrons un cercle parfait sur les deux dispositifs.
Cela signifie également que sur de très petits appareils, notre image ici, notre cercle pourrait ne pas tenir sur l'écran si
les appareils ont un écran inférieur à 300 pixels en ce qui concerne sa largeur, mais nous découvrirons les outils, comment savoir
quelle largeur d'appareil notre appareil a et comment nous pouvons ajuster les styles à cela dans le module suivant.
Pour l'instant, allons-y avec la valeur codée en dur ici qui semble bonne sur ces écrans ici et nous couvrirons à
nouveau les outils qui nous aideront avec d'autres écrans d'appareils plus tard.
Donc, voici comment vous pouvez ajouter une image et comment vous pouvez la styliser, comment la faire arrondir comme vous le faites ici, ce qui
bien sûr n'a pas à faire mais qui a l'air bien dans ce cas
ici, je pense, comment vous pouvez faire ceci si vous avez l'image sous forme de fichier ici.
Maintenant, que se passe-t-il si l'image provient du Web?