1
00:00:02,240 --> 00:00:07,730
Das Gute ist natürlich, dass Sie diese Standardbreite und -höhe nicht verwenden

2
00:00:07,730 --> 00:00:14,310
müssen, sondern Ihre eigene festlegen können. Sie können diesem Bild also einen Stil geben, und

3
00:00:14,350 --> 00:00:22,490
ich werde dies tun. Hier füge ich eine Bildeigenschaft in das Stylesheet ein und gebe diesem eine Breite von beispielsweise 80% der

4
00:00:22,550 --> 00:00:28,850
übergeordneten Ansicht, also 80% dieser Bildschirmansicht 80% der Bildschirmbreite und möglicherweise eine Höhe von 300 Pixel. Jetzt

5
00:00:28,880 --> 00:00:30,260
können wir diesen

6
00:00:30,260 --> 00:00:36,380
Bildstil hier dieser Bildkomponente zuweisen, indem wir dort die Stilstütze verwenden und auf ein Stilbild wie

7
00:00:36,380 --> 00:00:38,990
dieses zeigen. Wenn wir das jetzt tun,

8
00:00:39,000 --> 00:00:46,850
sehen wir, dass dies der Fall ist viel besser und jetzt passt das Bild auf den Bildschirm und wird entsprechend angepasst.

9
00:00:46,850 --> 00:00:50,560
Übrigens können Sie jetzt auch steuern, wie die Größe des

10
00:00:50,570 --> 00:00:56,420
Bilds geändert wird, wenn Sie eine Breite und Höhe definieren, die nicht dem Seitenverhältnis des

11
00:00:56,420 --> 00:01:02,750
Originalbilds entspricht. Wenn also Ihr Seitenverhältnis von Breite zu Höhe nicht mit dem Bild übereinstimmt Datei

12
00:01:02,750 --> 00:01:04,470
und wahrscheinlich haben Sie ein

13
00:01:04,610 --> 00:01:12,670
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

14
00:01:12,730 --> 00:01:13,550
können.

15
00:01:13,630 --> 00:01:20,260
Cover ist beispielsweise eine Option, bei der Sie die Größe des Bilds ändern, um die Größe beizubehalten Seitenverhältnis

16
00:01:20,260 --> 00:01:26,980
und passen Sie es hier in diese Box. Für enthalten ist es ähnlich, aber für enthalten wird nicht unbedingt die gesamte

17
00:01:26,980 --> 00:01:28,330
Box benötigt, wie Sie hier sehen

18
00:01:28,360 --> 00:01:33,430
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

19
00:01:33,430 --> 00:01:35,950
reservieren, nicht überschreitet . Für die Abdeckung

20
00:01:35,950 --> 00:01:41,740
wird auch das Seitenverhältnis beibehalten, das Bild muss jedoch nicht unbedingt verkleinert werden, damit es in dieses

21
00:01:41,740 --> 00:01:48,430
Feld passt. Stattdessen wird das Bild nur über die Grenzen des Zugriffs hinaus zugeschnitten, den es sonst überschreiten würde.

22
00:01:48,490 --> 00:01:53,880
Wir können also einfach mit diesen verschiedenen Einstellungen herumspielen, um das gewünschte Setup zu erhalten.

23
00:01:53,920 --> 00:02:01,480
Cover ist die Standardeinstellung. Wenn Sie jedoch das gesamte Bild behalten und es auf keiner Achse zuschneiden möchten, können Sie dies

24
00:02:02,050 --> 00:02:06,770
auf einstellen enthalten und Sie können auch mit den anderen Werten herumspielen.

25
00:02:06,790 --> 00:02:09,110
Ich werde mit Deckung gehen, die wieder die Standardeinstellung

26
00:02:09,140 --> 00:02:13,960
ist, also könnten Sie diese Requisite hier entfernen, aber um zu zeigen, dass Sie dies einstellen können, lasse ich es hier.

27
00:02:13,960 --> 00:02:20,390
Auf diese Weise können Sie hier auf dem Bildschirm ein Bild hinzufügen und natürlich weitere Stile zuweisen.

28
00:02:20,410 --> 00:02:24,010
Wir könnten beispielsweise versuchen, diese abgerundeten Ecken zuzuweisen, indem

29
00:02:24,010 --> 00:02:30,940
wir hier auch einen Rahmenradius hinzufügen und diesen auf beispielsweise 200 einstellen, also sehr groß Randradius, um ein

30
00:02:30,940 --> 00:02:32,800
abgerundetes Bild zu rendern.

31
00:02:32,800 --> 00:02:39,580
Das sieht allerdings etwas seltsam aus. Eine bessere Möglichkeit, dies festzulegen, besteht darin, das

32
00:02:39,580 --> 00:02:48,740
Bild einfach in eine Umgebungsansicht wie diese zu wickeln und dann die Stile zuzuweisen, die dieser Umgebungsansicht abgerundete Ecken

33
00:02:48,740 --> 00:02:51,670
oder Schlagschatten oder ähnliches hinzufügen sollen.

34
00:02:51,680 --> 00:02:58,130
Dort können Sie also auf die Bildcontainer-Requisite oder ähnliches verweisen und diese hier unten in Ihrem

35
00:02:58,130 --> 00:03:05,560
Stylesheet hinzufügen. Jetzt können Sie in diesem Bildcontainer einen Randradius von beispielsweise 200, möglicherweise auch eine Randbreite von 3

36
00:03:06,240 --> 00:03:10,050
und einen Rand festlegen Farbe Schwarz, damit wir auch einen

37
00:03:10,080 --> 00:03:11,480
visuellen Rand

38
00:03:11,490 --> 00:03:13,660
haben, und wenn wir das

39
00:03:13,800 --> 00:03:21,000
tun und dies speichern, erhalten wir diesen seltsamen Blick. Der Grund dafür ist, dass wir keine Breite und Höhe für den

40
00:03:21,000 --> 00:03:25,770
Container festgelegt haben. Daher sollten wir dies tun und tatsächlich die Breite und Höhe verwenden, die wir

41
00:03:25,770 --> 00:03:30,480
für das Bild festgelegt haben. Stellen Sie sie stattdessen für den Container und für das Bild

42
00:03:30,480 --> 00:03:36,630
ein Verwenden Sie jetzt einfach eine Breite von 100% und eine Höhe von 100%, da sich das Bild in diesem Container befindet.

43
00:03:36,630 --> 00:03:40,230
Ein 100% hier und hier bedeutet also, dass es die Breite und

44
00:03:40,230 --> 00:03:41,610
Höhe benötigt, die wir

45
00:03:41,730 --> 00:03:47,280
für den Container einrichten, aber jetzt auch für den Container hat diese Werte, damit der Container die richtige Größe hat.

46
00:03:47,280 --> 00:03:51,660
Was Sie jetzt sehen können, ist etwas Seltsames. Das Bild überlappt den Container.

47
00:03:51,660 --> 00:03:53,510
Wir sehen die abgerundeten Ecken,

48
00:03:53,520 --> 00:03:59,700
wir sehen den Kreis hier im Hintergrund, hier mit diesen schwarzen Ecken oder Kanten hier, aber das

49
00:03:59,700 --> 00:04:03,670
Bild wird sozusagen nicht in diesen Kreis zugeschnitten, und dies kann

50
00:04:03,750 --> 00:04:04,900
erreicht werden,

51
00:04:04,900 --> 00:04:09,120
indem dem Container, der enthält, eine weitere Eigenschaft hinzugefügt wird das Bild

52
00:04:09,410 --> 00:04:12,650
und das ist die Überlaufeigenschaft mit dem Wert versteckt.

53
00:04:12,660 --> 00:04:18,030
Das bedeutet, dass jedes Kind im Inneren des Containers, das aus dem Container

54
00:04:18,030 --> 00:04:23,510
ausbrechen würde und über die Grenzen dieses Containers hinausgehen würde, abgeschnitten wird, sodass

55
00:04:23,760 --> 00:04:30,420
wir das Bild jetzt tatsächlich mit der abgerundeten Form schön in diesen Container drücken Ecken haben

56
00:04:30,420 --> 00:04:31,440
wir hier.

57
00:04:31,470 --> 00:04:36,490
Was wir jetzt noch hinzufügen können, ist ein kleiner Rand auf der vertikalen Achse, vielleicht

58
00:04:36,660 --> 00:04:41,350
30, um einen gewissen Abstand um das Bild oben und unten zu haben, und

59
00:04:41,520 --> 00:04:44,910
damit sieht das nicht schlecht aus, würde ich sagen.

60
00:04:44,910 --> 00:04:51,420
Jetzt werden Sie feststellen, dass es hier auf Android nicht wie ein perfekter Kreis aussieht.

61
00:04:51,430 --> 00:04:55,990
Der Grund dafür ist, dass unser Randradius nicht perfekt berechnet wird, der Randradius die Hälfte Ihrer

62
00:04:55,990 --> 00:04:58,570
Breite und Höhe betragen sollte und das Problem darin

63
00:04:58,570 --> 00:05:01,060
besteht, dass Breite und Höhe nicht gleich sind.

64
00:05:01,060 --> 00:05:06,380
Daher sollten wir hier tatsächlich ein Quadrat rendern und dann ein hinzufügen Randradius, um einen perfekten Kreis zu erhalten.

65
00:05:06,490 --> 00:05:13,510
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

66
00:05:13,510 --> 00:05:13,960
haben

67
00:05:13,980 --> 00:05:18,640
und jetzt einen Randradius verwenden, der halb so groß ist wie der von 150, und

68
00:05:18,640 --> 00:05:21,600
jetzt erhalten wir auf beiden einen perfekten Kreis Geräte.

69
00:05:21,600 --> 00:05:28,480
Dies bedeutet auch, dass bei sehr kleinen Geräten, unserem Bild hier, unser Kreis möglicherweise nicht auf den Bildschirm passt, wenn die

70
00:05:28,480 --> 00:05:35,590
Geräte einen Bildschirm haben, der in Bezug auf seine Breite kleiner als 300 Pixel ist. Wir werden jedoch mehr über Werkzeuge erfahren,

71
00:05:35,590 --> 00:05:41,830
wie Sie herausfinden können, welche Gerätebreite Unser Gerät hat und wie wir Stile im nächsten Modul anpassen können.

72
00:05:41,830 --> 00:05:47,380
Lassen Sie uns zunächst den fest codierten Wert hier verwenden, der auf diesen Bildschirmen hier gut aussieht, und wir werden

73
00:05:47,500 --> 00:05:50,950
später erneut Tools behandeln, die uns später bei anderen Gerätebildschirmen helfen.

74
00:05:50,950 --> 00:05:56,380
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

75
00:05:56,380 --> 00:05:59,680
zu tun ist, aber in diesem Fall hier gut aussieht. Ich denke, wie

76
00:05:59,680 --> 00:06:03,420
Sie es tun können Dies ist der Fall, wenn Sie das Bild hier als Datei haben.

77
00:06:03,430 --> 00:06:05,530
Was ist nun, wenn das Bild aus dem Internet stammt?