Das Gute ist natürlich, dass Sie diese Standardbreite und -höhe nicht verwenden
müssen, sondern Ihre eigene festlegen können. Sie können diesem Bild also einen Stil geben, und
ich werde dies tun. Hier füge ich eine Bildeigenschaft in das Stylesheet ein und gebe diesem eine Breite von beispielsweise 80% der
übergeordneten Ansicht, also 80% dieser Bildschirmansicht 80% der Bildschirmbreite und möglicherweise eine Höhe von 300 Pixel. Jetzt
können wir diesen
Bildstil hier dieser Bildkomponente zuweisen, indem wir dort die Stilstütze verwenden und auf ein Stilbild wie
dieses zeigen. Wenn wir das jetzt tun,
sehen wir, dass dies der Fall ist viel besser und jetzt passt das Bild auf den Bildschirm und wird entsprechend angepasst.
Übrigens können Sie jetzt auch steuern, wie die Größe des
Bilds geändert wird, wenn Sie eine Breite und Höhe definieren, die nicht dem Seitenverhältnis des
Originalbilds entspricht. Wenn also Ihr Seitenverhältnis von Breite zu Höhe nicht mit dem Bild übereinstimmt Datei
und wahrscheinlich haben Sie ein
anderes Seitenverhältnis. Dann können Sie hier einen Größenänderungsmodus einstellen. Dies ist einfach eine Zeichenfolge, in der Sie aus verschiedenen Optionen auswählen
können.
Cover ist beispielsweise eine Option, bei der Sie die Größe des Bilds ändern, um die Größe beizubehalten Seitenverhältnis
und passen Sie es hier in diese Box. Für enthalten ist es ähnlich, aber für enthalten wird nicht unbedingt die gesamte
Box benötigt, wie Sie hier sehen
können. Hier enthält es das Bild und verkleinert es einfach, damit es die Breite und Höhe der Box, die wir dafür
reservieren, nicht überschreitet . Für die Abdeckung
wird auch das Seitenverhältnis beibehalten, das Bild muss jedoch nicht unbedingt verkleinert werden, damit es in dieses
Feld passt. Stattdessen wird das Bild nur über die Grenzen des Zugriffs hinaus zugeschnitten, den es sonst überschreiten würde.
Wir können also einfach mit diesen verschiedenen Einstellungen herumspielen, um das gewünschte Setup zu erhalten.
Cover ist die Standardeinstellung. Wenn Sie jedoch das gesamte Bild behalten und es auf keiner Achse zuschneiden möchten, können Sie dies
auf einstellen enthalten und Sie können auch mit den anderen Werten herumspielen.
Ich werde mit Deckung gehen, die wieder die Standardeinstellung
ist, also könnten Sie diese Requisite hier entfernen, aber um zu zeigen, dass Sie dies einstellen können, lasse ich es hier.
Auf diese Weise können Sie hier auf dem Bildschirm ein Bild hinzufügen und natürlich weitere Stile zuweisen.
Wir könnten beispielsweise versuchen, diese abgerundeten Ecken zuzuweisen, indem
wir hier auch einen Rahmenradius hinzufügen und diesen auf beispielsweise 200 einstellen, also sehr groß Randradius, um ein
abgerundetes Bild zu rendern.
Das sieht allerdings etwas seltsam aus. Eine bessere Möglichkeit, dies festzulegen, besteht darin, das
Bild einfach in eine Umgebungsansicht wie diese zu wickeln und dann die Stile zuzuweisen, die dieser Umgebungsansicht abgerundete Ecken
oder Schlagschatten oder ähnliches hinzufügen sollen.
Dort können Sie also auf die Bildcontainer-Requisite oder ähnliches verweisen und diese hier unten in Ihrem
Stylesheet hinzufügen. Jetzt können Sie in diesem Bildcontainer einen Randradius von beispielsweise 200, möglicherweise auch eine Randbreite von 3
und einen Rand festlegen Farbe Schwarz, damit wir auch einen
visuellen Rand
haben, und wenn wir das
tun und dies speichern, erhalten wir diesen seltsamen Blick. Der Grund dafür ist, dass wir keine Breite und Höhe für den
Container festgelegt haben. Daher sollten wir dies tun und tatsächlich die Breite und Höhe verwenden, die wir
für das Bild festgelegt haben. Stellen Sie sie stattdessen für den Container und für das Bild
ein Verwenden Sie jetzt einfach eine Breite von 100% und eine Höhe von 100%, da sich das Bild in diesem Container befindet.
Ein 100% hier und hier bedeutet also, dass es die Breite und
Höhe benötigt, die wir
für den Container einrichten, aber jetzt auch für den Container hat diese Werte, damit der Container die richtige Größe hat.
Was Sie jetzt sehen können, ist etwas Seltsames. Das Bild überlappt den Container.
Wir sehen die abgerundeten Ecken,
wir sehen den Kreis hier im Hintergrund, hier mit diesen schwarzen Ecken oder Kanten hier, aber das
Bild wird sozusagen nicht in diesen Kreis zugeschnitten, und dies kann
erreicht werden,
indem dem Container, der enthält, eine weitere Eigenschaft hinzugefügt wird das Bild
und das ist die Überlaufeigenschaft mit dem Wert versteckt.
Das bedeutet, dass jedes Kind im Inneren des Containers, das aus dem Container
ausbrechen würde und über die Grenzen dieses Containers hinausgehen würde, abgeschnitten wird, sodass
wir das Bild jetzt tatsächlich mit der abgerundeten Form schön in diesen Container drücken Ecken haben
wir hier.
Was wir jetzt noch hinzufügen können, ist ein kleiner Rand auf der vertikalen Achse, vielleicht
30, um einen gewissen Abstand um das Bild oben und unten zu haben, und
damit sieht das nicht schlecht aus, würde ich sagen.
Jetzt werden Sie feststellen, dass es hier auf Android nicht wie ein perfekter Kreis aussieht.
Der Grund dafür ist, dass unser Randradius nicht perfekt berechnet wird, der Randradius die Hälfte Ihrer
Breite und Höhe betragen sollte und das Problem darin
besteht, dass Breite und Höhe nicht gleich sind.
Daher sollten wir hier tatsächlich ein Quadrat rendern und dann ein hinzufügen Randradius, um einen perfekten Kreis zu erhalten.
Die Lösung könnte also sein, dass wir hier im Bildcontainer die Breite von 300 einstellen und daher die gleiche Breite wie die Höhe
haben
und jetzt einen Randradius verwenden, der halb so groß ist wie der von 150, und
jetzt erhalten wir auf beiden einen perfekten Kreis Geräte.
Dies bedeutet auch, dass bei sehr kleinen Geräten, unserem Bild hier, unser Kreis möglicherweise nicht auf den Bildschirm passt, wenn die
Geräte einen Bildschirm haben, der in Bezug auf seine Breite kleiner als 300 Pixel ist. Wir werden jedoch mehr über Werkzeuge erfahren,
wie Sie herausfinden können, welche Gerätebreite Unser Gerät hat und wie wir Stile im nächsten Modul anpassen können.
Lassen Sie uns zunächst den fest codierten Wert hier verwenden, der auf diesen Bildschirmen hier gut aussieht, und wir werden
später erneut Tools behandeln, die uns später bei anderen Gerätebildschirmen helfen.
Auf diese Weise können Sie ein Bild hinzufügen und es stylen, wie Sie es abrunden können, wie Sie es hier tun, was natürlich nicht
zu tun ist, aber in diesem Fall hier gut aussieht. Ich denke, wie
Sie es tun können Dies ist der Fall, wenn Sie das Bild hier als Datei haben.
Was ist nun, wenn das Bild aus dem Internet stammt?