Sekarang hal yang baik tentu saja Anda tidak harus menggunakan lebar dan
tinggi default ini, Anda dapat mengatur sendiri. Jadi Anda dapat memberikan gambar ini gaya dan saya
akan melakukan ini, di sini saya akan menambahkan properti gambar di stylesheet dan memberikan ini lebar katakanlah 80% dari tampilan induk, jadi
80% dari tampilan layar ini, jadi Oleh karena itu 80% dari lebar layar dan mungkin tinggi 300
piksel dan sekarang
kita dapat menetapkan gaya gambar ini di sini untuk komponen gambar ini dengan menggunakan prop gaya
di sana dan menunjuk pada gambar gaya
seperti ini dan jika kita melakukannya sekarang, kita melihat itu jauh lebih baik dan sekarang gambar pas ke layar dan diubah ukurannya.
Ngomong-ngomong, Anda juga dapat mengontrol bagaimana ukuran gambar diubah jika
Anda menentukan lebar dan tinggi yang tidak memenuhi rasio aspek dari gambar asli, jadi jika
rasio aspek lebar ke tinggi tidak sama dengan gambar File dan kemungkinan adalah bahwa Anda memiliki
rasio aspek yang berbeda, maka
Anda dapat mengatur mode pengubahan ukuran di sini dan ini hanyalah sebuah string di mana Anda dapat memilih dari opsi yang
berbeda
dan misalnya penutup adalah opsi di mana Anda akan mengubah ukuran gambar untuk mempertahankan nya rasio aspek
dan masukkan ke dalam kotak ini di sini. Untuk konten, ini mirip tetapi untuk isi, tidak harus mengambil seluruh kotak
seperti yang Anda lihat di
sini, di sini berisi gambar dan hanya menyusut sehingga tidak melebihi lebar dan tinggi kotak yang kami pesan
untuk itu. . Sebagai penutup,
ini juga menjaga rasio aspek tetapi tidak harus mengecilkan gambar agar masuk ke
dalam kotak ini, melainkan hanya memotong gambar di luar batas akses yang akan melampaui sebaliknya.
Jadi kita bisa bermain-main dengan pengaturan yang berbeda ini untuk mendapatkan pengaturan yang Anda inginkan,
sampul adalah default tetapi jika Anda ingin menyimpan seluruh gambar dan Anda tidak ingin memotongnya pada sumbu apa pun, maka Anda
dapat mengatur ini untuk mengandung dan Anda bisa bermain-main dengan nilai-nilai lain juga.
Saya akan menggunakan cover mana lagi yang merupakan default,
sehingga Anda dapat menghapus prop ini di sini tetapi untuk menunjukkan bahwa Anda dapat mengatur ini, saya akan meninggalkannya di sini.
Sekarang ini memungkinkan Anda untuk menambahkan gambar di sini di layar dan tentu saja Anda dapat menetapkan lebih
banyak gaya, misalnya kita bisa mencoba memberikan sudut bulat ini
dengan sekarang juga menambahkan jari-jari perbatasan di sini dan mengatur ini untuk katakanlah 200, jadi sangat besar radius batas
untuk membuat gambar bulat.
Nah, itu terlihat agak aneh, cara yang lebih baik untuk mengatur ini adalah dengan
hanya membungkus gambar menjadi tampilan sekitarnya seperti ini dan kemudian menetapkan gaya yang harus menambahkan sudut bulat atau menjatuhkan
bayangan atau semacamnya pada tampilan sekitarnya.
Jadi di sana Anda dapat merujuk ke penyangga wadah gambar atau sesuatu seperti itu dan menambahkan ini
di sini di stylesheet Anda dan sekarang pada wadah gambar itu, Anda dapat mengatur radius perbatasan katakanlah 200, mungkin juga
lebar perbatasan 3 dan perbatasan warna hitam sehingga kita juga
memiliki batas visual
dan jika kita melakukan itu
dan menyimpan ini, kita mendapatkan tampilan yang aneh ini. Alasan untuk ini adalah bahwa kita belum menetapkan lebar dan
tinggi pada wadah dan oleh karena itu kita harus melakukan ini dan benar-benar menggunakan
lebar dan tinggi yang kita atur pada gambar, atur pada wadah dan pada
gambar, kita dapat sekarang cukup gunakan lebar 100% dan tinggi 100% karena gambar ada di dalam wadah ini,
jadi 100% di sini dan di sini berarti dibutuhkan lebar
dan tinggi yang
kami siapkan di wadah tetapi sekarang wadah juga memiliki nilai-nilai ini sehingga wadah tersebut berukuran tepat.
Sekarang apa yang dapat Anda lihat adalah sesuatu yang aneh, gambar tersebut tumpang tindih dengan wadah.
Kita melihat sudut-sudut bulat, kita
melihat lingkaran di sini di latar belakang, di sini dengan sudut-sudut hitam atau tepi-tepi di sini
tetapi gambar tidak terpotong ke dalam lingkaran itu sehingga bisa
dikatakan dan
itu dapat dicapai dengan menambahkan properti lain pada wadah yang menampung
gambar dan itulah properti melimpah dengan nilai tersembunyi.
Itu berarti bahwa setiap anak di dalam wadah yang akan keluar
dari wadah, yang akan melampaui batas wadah yang terpotong, terpotong sehingga sekarang
kita benar-benar meremas gambar dengan baik ke dalam wadah dengan bulat sudut kami tiba di
sini.
Sekarang apa yang juga bisa kita tambahkan adalah sedikit margin pada sumbu vertikal, mungkin
30 untuk memiliki beberapa jarak di sekitar gambar atas dan bawah dan
dengan itu, ini tidak terlihat terlalu buruk, kataku.
Sekarang satu hal yang akan Anda perhatikan adalah bahwa itu tidak terlihat seperti lingkaran sempurna di Android.
Alasan untuk itu adalah bahwa jari-jari batas kami tidak dihitung dengan sempurna, jari-jari batas harus
setengah dari lebar dan tinggi Anda dan masalahnya
adalah lebar dan tinggi tidak sama, jadi
kita harus benar-benar membuat kotak di sini dan kemudian menambahkan radius perbatasan untuk mendapatkan lingkaran yang sempurna.
Jadi solusinya mungkin kita menetapkan lebar 300 di sini pada wadah gambar dan memiliki lebar yang sama dengan tinggi karena
itu
dan sekarang menggunakan jari-jari perbatasan yang setengah dari yang 150 dan sekarang kita
akan mendapatkan lingkaran sempurna di kedua perangkat.
Ini juga berarti bahwa pada perangkat yang sangat kecil, gambar kita di sini, lingkaran kita mungkin tidak muat di layar
jika perangkat memiliki layar yang lebih kecil dari 300 piksel mengenai lebarnya tetapi kita akan belajar tentang alat, cara mengetahui lebar
perangkat mana yang perangkat kami memiliki dan bagaimana kami dapat menyesuaikan gaya dengan yang ada di modul berikutnya.
Untuk sekarang mari kita pergi dengan nilai hardcoded di sini yang terlihat bagus di layar ini di sini dan kita
akan membahas alat yang membantu kita dengan layar perangkat lain nanti.
Jadi ini adalah bagaimana Anda dapat menambahkan gambar dan bagaimana Anda bisa mendesainnya, bagaimana Anda dapat membuatnya bulat seperti yang Anda lakukan di sini
yang tentu saja tidak harus dilakukan tetapi yang terlihat bagus dalam kasus ini di
sini saya pikir, bagaimana Anda dapat melakukannya ini jika Anda memiliki gambar sebagai file di sini.
Sekarang bagaimana jika gambar tersebut berasal dari web?