1
00:00:02,240 --> 00:00:07,730
Teraz dobrą rzeczą jest to, że nie musisz używać tej domyślnej

2
00:00:07,730 --> 00:00:14,310
szerokości i wysokości, możesz ustawić własne. Więc możesz nadać temu obrazowi styl, a

3
00:00:14,350 --> 00:00:22,490
ja to zrobię, tutaj dodam właściwość obrazu do arkusza stylów i nadam mu szerokość powiedzmy 80% widoku rodzica, więc

4
00:00:22,550 --> 00:00:28,850
80% tego widoku ekranu, więc 80% szerokości ekranu, a może wysokość 300 pikseli, a teraz

5
00:00:28,880 --> 00:00:30,260
możemy przypisać

6
00:00:30,260 --> 00:00:36,380
ten styl obrazu do tego komponentu obrazu, używając tam rekwizytu stylu i wskazując na

7
00:00:36,380 --> 00:00:38,990
taki styl obrazu, a jeśli zrobimy

8
00:00:39,000 --> 00:00:46,850
to teraz, zobaczymy, że to o wiele lepiej, a teraz obraz pasuje do ekranu i odpowiednio zmienia rozmiar.

9
00:00:46,850 --> 00:00:50,560
Nawiasem mówiąc, możesz również kontrolować sposób zmiany rozmiaru obrazu,

10
00:00:50,570 --> 00:00:56,420
jeśli zdefiniujesz szerokość i wysokość, która nie odpowiada proporcjom oryginalnego obrazu, więc jeśli

11
00:00:56,420 --> 00:01:02,750
stosunek szerokości do wysokości nie jest taki sam jak obraz plik i są szanse, że

12
00:01:02,750 --> 00:01:04,470
masz inny współczynnik kształtu,

13
00:01:04,610 --> 00:01:12,670
więc możesz ustawić tutaj tryb zmiany rozmiaru, a to po prostu ciąg, w którym możesz wybierać z różnych opcji,

14
00:01:12,730 --> 00:01:13,550
a

15
00:01:13,630 --> 00:01:20,260
na przykład okładka jest opcją, w której zmienisz rozmiar obrazu, aby zachować jego współczynnik kształtu

16
00:01:20,260 --> 00:01:26,980
i zmień go w tym polu tutaj. W przypadku zawartości jest podobna, ale w przypadku zawartości niekoniecznie zajmie

17
00:01:26,980 --> 00:01:28,330
całe pudełko, jak widać

18
00:01:28,360 --> 00:01:33,430
tutaj, tutaj zawiera obraz i po prostu go zmniejsza, aby nie przekroczył szerokości i wysokości zarezerwowanego dla

19
00:01:33,430 --> 00:01:35,950
niego pudełka . W przypadku

20
00:01:35,950 --> 00:01:41,740
okładki zachowuje również proporcje, ale niekoniecznie zmniejsza obraz, aby zmieścił się w

21
00:01:41,740 --> 00:01:48,430
tym polu, zamiast tego przycina obraz poza granice dostępu, który w przeciwnym razie przekroczyłby.

22
00:01:48,490 --> 00:01:53,880
Możemy więc po prostu bawić się tymi różnymi ustawieniami, aby uzyskać żądaną konfigurację, domyślnie

23
00:01:53,920 --> 00:02:01,480
jest to cover, ale w przypadku, gdy chcesz zachować cały obraz i nie chcesz przycinać go na żadnej osi, możesz

24
00:02:02,050 --> 00:02:06,770
ustawić to na zawierają i możesz bawić się z innymi wartościami.

25
00:02:06,790 --> 00:02:09,110
Pójdę z okładką, która znowu jest domyślna,

26
00:02:09,140 --> 00:02:13,960
więc możesz usunąć ten rekwizyt tutaj, ale aby pokazać, że możesz to ustawić, zostawię go tutaj.

27
00:02:13,960 --> 00:02:20,390
Teraz pozwala to dodać obraz na ekranie i oczywiście można przypisać więcej stylów,

28
00:02:20,410 --> 00:02:24,010
na przykład moglibyśmy spróbować nadać tym zaokrąglonym rogom,

29
00:02:24,010 --> 00:02:30,940
dodając tutaj również promień obramowania i ustawiając na 200, tak naprawdę promień obramowania, aby

30
00:02:30,940 --> 00:02:32,800
renderować zaokrąglony obraz.

31
00:02:32,800 --> 00:02:39,580
Teraz wygląda to nieco dziwnie, lepszym sposobem na ustawienie tego jest po prostu zawinięcie

32
00:02:39,580 --> 00:02:48,740
obrazu w taki widok otaczający, a następnie przypisanie stylów, które powinny dodawać zaokrąglone rogi lub upuszczać cienie lub coś

33
00:02:48,740 --> 00:02:51,670
podobnego do tego otaczającego widoku.

34
00:02:51,680 --> 00:02:58,130
Więc możesz odnieść się do prop kontenera obrazu lub czegoś podobnego i dodać to tutaj

35
00:02:58,130 --> 00:03:05,560
w arkuszu stylów, a teraz w tym kontenerze obrazów możesz ustawić promień obramowania, powiedzmy 200, może także

36
00:03:06,240 --> 00:03:10,050
szerokość 3 obramowania i ramkę kolor czarny, dzięki czemu

37
00:03:10,080 --> 00:03:11,480
mamy również

38
00:03:11,490 --> 00:03:13,660
wizualną ramkę, a jeśli to

39
00:03:13,800 --> 00:03:21,000
zrobimy i uratujemy to, otrzymamy ten dziwny wygląd. Powodem tego jest to, że nie ustawiliśmy szerokości i wysokości

40
00:03:21,000 --> 00:03:25,770
kontenera, dlatego powinniśmy to zrobić i faktycznie użyć szerokości i wysokości, które ustawiliśmy

41
00:03:25,770 --> 00:03:30,480
na obrazie, zamiast tego ustawić go na pojemniku, a na obrazie możemy teraz

42
00:03:30,480 --> 00:03:36,630
po prostu użyj szerokości 100% i wysokości 100%, ponieważ obraz znajduje się w tym pojemniku, więc 100%

43
00:03:36,630 --> 00:03:40,230
tutaj i tutaj oznacza, że bierze on szerokość i

44
00:03:40,230 --> 00:03:41,610
wysokość, którą ustawiamy

45
00:03:41,730 --> 00:03:47,280
na pojemniku, ale teraz pojemnik również ma te wartości, dzięki czemu pojemnik ma odpowiedni rozmiar.

46
00:03:47,280 --> 00:03:51,660
Teraz to, co widzisz, jest czymś dziwnym, obraz nakłada się na pojemnik.

47
00:03:51,660 --> 00:03:53,510
Widzimy zaokrąglone rogi, widzimy

48
00:03:53,520 --> 00:03:59,700
koło tutaj w tle, tutaj z tymi czarnymi narożnikami lub krawędziami tutaj, ale obraz nie

49
00:03:59,700 --> 00:04:03,670
jest przycięty do tego koła, że tak powiem, i

50
00:04:03,750 --> 00:04:04,900
można to

51
00:04:04,900 --> 00:04:09,120
osiągnąć poprzez dodanie innej właściwości na pojemniku, który trzyma obraz

52
00:04:09,410 --> 00:04:12,650
i to jest właściwość przepełnienia o wartości ukrytej.

53
00:04:12,660 --> 00:04:18,030
Oznacza to, że każde dziecko wewnątrz kontenera, które w pewnym sensie

54
00:04:18,030 --> 00:04:23,510
wybiłoby się z kontenera, które wykroczyłoby poza granice tego kontenera, jest faktycznie

55
00:04:23,760 --> 00:04:30,420
obcięte, jest odcięte, dzięki czemu teraz ładnie wciskamy obraz do tego pojemnika zaokrąglonym rogi, które

56
00:04:30,420 --> 00:04:31,440
tu mamy.

57
00:04:31,470 --> 00:04:36,490
Teraz możemy również dodać trochę marginesu na osi pionowej, może 30, aby

58
00:04:36,660 --> 00:04:41,350
mieć pewne odstępy wokół góry i dołu obrazu, a przy

59
00:04:41,520 --> 00:04:44,910
tym nie wygląda to tak źle, powiedziałbym.

60
00:04:44,910 --> 00:04:51,420
Teraz zauważysz, że na Androida nie wygląda to jak idealne koło.

61
00:04:51,430 --> 00:04:55,990
Powodem tego jest to, że nasz promień obramowania nie jest idealnie obliczony, promień obramowania powinien

62
00:04:55,990 --> 00:04:58,570
wynosić połowę twojej szerokości i wysokości, a problemem

63
00:04:58,570 --> 00:05:01,060
jest to, że szerokość i wysokość nie

64
00:05:01,060 --> 00:05:06,380
są równe, więc powinniśmy faktycznie renderować kwadrat tutaj, a następnie dodać promień krawędzi, aby uzyskać idealne koło.

65
00:05:06,490 --> 00:05:13,510
Tak więc rozwiązaniem może być ustawienie szerokości 300 na pojemniku na obraz i tym samym szerokość co do wysokości,

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

67
00:05:13,980 --> 00:05:18,640
teraz używamy promienia granicznego, który jest o połowę mniejszy niż 150, a

68
00:05:18,640 --> 00:05:21,600
teraz uzyskamy idealne koło na obu urządzenia.

69
00:05:21,600 --> 00:05:28,480
Oznacza to również, że na bardzo małych urządzeniach, naszym obrazie, nasze koło może nie zmieścić się na ekranie,

70
00:05:28,480 --> 00:05:35,590
jeśli urządzenia mają ekran mniejszy niż 300 pikseli pod względem szerokości, ale dowiemy się o narzędziach, jak dowiedzieć się,

71
00:05:35,590 --> 00:05:41,830
która szerokość urządzenia nasze urządzenie ma i jak możemy dostosować styl do tego w następnym module.

72
00:05:41,830 --> 00:05:47,380
Na razie przejdźmy do zakodowanej tutaj wartości, która wygląda dobrze na tych ekranach, a my ponownie omówimy

73
00:05:47,500 --> 00:05:50,950
narzędzia, które pomogą nam z ekranami innych urządzeń później.

74
00:05:50,950 --> 00:05:56,380
Więc w ten sposób możesz dodać obraz i jak go stylizować, jak możesz go zaokrąglić tak jak tutaj, co

75
00:05:56,380 --> 00:05:59,680
oczywiście nie musi robić, ale które wygląda ładnie w tym

76
00:05:59,680 --> 00:06:03,420
przypadku tutaj Myślę, jak możesz to zrobić jeśli masz tutaj obraz jako plik.

77
00:06:03,430 --> 00:06:05,530
A co jeśli obraz pochodzi z sieci?