Teraz dobrą rzeczą jest to, że nie musisz używać tej domyślnej
szerokości i wysokości, możesz ustawić własne. Więc możesz nadać temu obrazowi styl, a
ja to zrobię, tutaj dodam właściwość obrazu do arkusza stylów i nadam mu szerokość powiedzmy 80% widoku rodzica, więc
80% tego widoku ekranu, więc 80% szerokości ekranu, a może wysokość 300 pikseli, a teraz
możemy przypisać
ten styl obrazu do tego komponentu obrazu, używając tam rekwizytu stylu i wskazując na
taki styl obrazu, a jeśli zrobimy
to teraz, zobaczymy, że to o wiele lepiej, a teraz obraz pasuje do ekranu i odpowiednio zmienia rozmiar.
Nawiasem mówiąc, możesz również kontrolować sposób zmiany rozmiaru obrazu,
jeśli zdefiniujesz szerokość i wysokość, która nie odpowiada proporcjom oryginalnego obrazu, więc jeśli
stosunek szerokości do wysokości nie jest taki sam jak obraz plik i są szanse, że
masz inny współczynnik kształtu,
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,
a
na przykład okładka jest opcją, w której zmienisz rozmiar obrazu, aby zachować jego współczynnik kształtu
i zmień go w tym polu tutaj. W przypadku zawartości jest podobna, ale w przypadku zawartości niekoniecznie zajmie
całe pudełko, jak widać
tutaj, tutaj zawiera obraz i po prostu go zmniejsza, aby nie przekroczył szerokości i wysokości zarezerwowanego dla
niego pudełka . W przypadku
okładki zachowuje również proporcje, ale niekoniecznie zmniejsza obraz, aby zmieścił się w
tym polu, zamiast tego przycina obraz poza granice dostępu, który w przeciwnym razie przekroczyłby.
Możemy więc po prostu bawić się tymi różnymi ustawieniami, aby uzyskać żądaną konfigurację, domyślnie
jest to cover, ale w przypadku, gdy chcesz zachować cały obraz i nie chcesz przycinać go na żadnej osi, możesz
ustawić to na zawierają i możesz bawić się z innymi wartościami.
Pójdę z okładką, która znowu jest domyślna,
więc możesz usunąć ten rekwizyt tutaj, ale aby pokazać, że możesz to ustawić, zostawię go tutaj.
Teraz pozwala to dodać obraz na ekranie i oczywiście można przypisać więcej stylów,
na przykład moglibyśmy spróbować nadać tym zaokrąglonym rogom,
dodając tutaj również promień obramowania i ustawiając na 200, tak naprawdę promień obramowania, aby
renderować zaokrąglony obraz.
Teraz wygląda to nieco dziwnie, lepszym sposobem na ustawienie tego jest po prostu zawinięcie
obrazu w taki widok otaczający, a następnie przypisanie stylów, które powinny dodawać zaokrąglone rogi lub upuszczać cienie lub coś
podobnego do tego otaczającego widoku.
Więc możesz odnieść się do prop kontenera obrazu lub czegoś podobnego i dodać to tutaj
w arkuszu stylów, a teraz w tym kontenerze obrazów możesz ustawić promień obramowania, powiedzmy 200, może także
szerokość 3 obramowania i ramkę kolor czarny, dzięki czemu
mamy również
wizualną ramkę, a jeśli to
zrobimy i uratujemy to, otrzymamy ten dziwny wygląd. Powodem tego jest to, że nie ustawiliśmy szerokości i wysokości
kontenera, dlatego powinniśmy to zrobić i faktycznie użyć szerokości i wysokości, które ustawiliśmy
na obrazie, zamiast tego ustawić go na pojemniku, a na obrazie możemy teraz
po prostu użyj szerokości 100% i wysokości 100%, ponieważ obraz znajduje się w tym pojemniku, więc 100%
tutaj i tutaj oznacza, że bierze on szerokość i
wysokość, którą ustawiamy
na pojemniku, ale teraz pojemnik również ma te wartości, dzięki czemu pojemnik ma odpowiedni rozmiar.
Teraz to, co widzisz, jest czymś dziwnym, obraz nakłada się na pojemnik.
Widzimy zaokrąglone rogi, widzimy
koło tutaj w tle, tutaj z tymi czarnymi narożnikami lub krawędziami tutaj, ale obraz nie
jest przycięty do tego koła, że tak powiem, i
można to
osiągnąć poprzez dodanie innej właściwości na pojemniku, który trzyma obraz
i to jest właściwość przepełnienia o wartości ukrytej.
Oznacza to, że każde dziecko wewnątrz kontenera, które w pewnym sensie
wybiłoby się z kontenera, które wykroczyłoby poza granice tego kontenera, jest faktycznie
obcięte, jest odcięte, dzięki czemu teraz ładnie wciskamy obraz do tego pojemnika zaokrąglonym rogi, które
tu mamy.
Teraz możemy również dodać trochę marginesu na osi pionowej, może 30, aby
mieć pewne odstępy wokół góry i dołu obrazu, a przy
tym nie wygląda to tak źle, powiedziałbym.
Teraz zauważysz, że na Androida nie wygląda to jak idealne koło.
Powodem tego jest to, że nasz promień obramowania nie jest idealnie obliczony, promień obramowania powinien
wynosić połowę twojej szerokości i wysokości, a problemem
jest to, że szerokość i wysokość nie
są równe, więc powinniśmy faktycznie renderować kwadrat tutaj, a następnie dodać promień krawędzi, aby uzyskać idealne koło.
Tak więc rozwiązaniem może być ustawienie szerokości 300 na pojemniku na obraz i tym samym szerokość co do wysokości,
dlatego
teraz używamy promienia granicznego, który jest o połowę mniejszy niż 150, a
teraz uzyskamy idealne koło na obu urządzenia.
Oznacza to również, że na bardzo małych urządzeniach, naszym obrazie, nasze koło może nie zmieścić się na ekranie,
jeśli urządzenia mają ekran mniejszy niż 300 pikseli pod względem szerokości, ale dowiemy się o narzędziach, jak dowiedzieć się,
która szerokość urządzenia nasze urządzenie ma i jak możemy dostosować styl do tego w następnym module.
Na razie przejdźmy do zakodowanej tutaj wartości, która wygląda dobrze na tych ekranach, a my ponownie omówimy
narzędzia, które pomogą nam z ekranami innych urządzeń później.
Więc w ten sposób możesz dodać obraz i jak go stylizować, jak możesz go zaokrąglić tak jak tutaj, co
oczywiście nie musi robić, ale które wygląda ładnie w tym
przypadku tutaj Myślę, jak możesz to zrobić jeśli masz tutaj obraz jako plik.
A co jeśli obraz pochodzi z sieci?