1
00:00:02,240 --> 00:00:07,730
Sekarang hal yang baik tentu saja Anda tidak harus menggunakan lebar dan

2
00:00:07,730 --> 00:00:14,310
tinggi default ini, Anda dapat mengatur sendiri. Jadi Anda dapat memberikan gambar ini gaya dan saya

3
00:00:14,350 --> 00:00:22,490
akan melakukan ini, di sini saya akan menambahkan properti gambar di stylesheet dan memberikan ini lebar katakanlah 80% dari tampilan induk, jadi

4
00:00:22,550 --> 00:00:28,850
80% dari tampilan layar ini, jadi Oleh karena itu 80% dari lebar layar dan mungkin tinggi 300

5
00:00:28,880 --> 00:00:30,260
piksel dan sekarang

6
00:00:30,260 --> 00:00:36,380
kita dapat menetapkan gaya gambar ini di sini untuk komponen gambar ini dengan menggunakan prop gaya

7
00:00:36,380 --> 00:00:38,990
di sana dan menunjuk pada gambar gaya

8
00:00:39,000 --> 00:00:46,850
seperti ini dan jika kita melakukannya sekarang, kita melihat itu jauh lebih baik dan sekarang gambar pas ke layar dan diubah ukurannya.

9
00:00:46,850 --> 00:00:50,560
Ngomong-ngomong, Anda juga dapat mengontrol bagaimana ukuran gambar diubah jika

10
00:00:50,570 --> 00:00:56,420
Anda menentukan lebar dan tinggi yang tidak memenuhi rasio aspek dari gambar asli, jadi jika

11
00:00:56,420 --> 00:01:02,750
rasio aspek lebar ke tinggi tidak sama dengan gambar File dan kemungkinan adalah bahwa Anda memiliki

12
00:01:02,750 --> 00:01:04,470
rasio aspek yang berbeda, maka

13
00:01:04,610 --> 00:01:12,670
Anda dapat mengatur mode pengubahan ukuran di sini dan ini hanyalah sebuah string di mana Anda dapat memilih dari opsi yang

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

15
00:01:13,630 --> 00:01:20,260
dan misalnya penutup adalah opsi di mana Anda akan mengubah ukuran gambar untuk mempertahankan nya rasio aspek

16
00:01:20,260 --> 00:01:26,980
dan masukkan ke dalam kotak ini di sini. Untuk konten, ini mirip tetapi untuk isi, tidak harus mengambil seluruh kotak

17
00:01:26,980 --> 00:01:28,330
seperti yang Anda lihat di

18
00:01:28,360 --> 00:01:33,430
sini, di sini berisi gambar dan hanya menyusut sehingga tidak melebihi lebar dan tinggi kotak yang kami pesan

19
00:01:33,430 --> 00:01:35,950
untuk itu. . Sebagai penutup,

20
00:01:35,950 --> 00:01:41,740
ini juga menjaga rasio aspek tetapi tidak harus mengecilkan gambar agar masuk ke

21
00:01:41,740 --> 00:01:48,430
dalam kotak ini, melainkan hanya memotong gambar di luar batas akses yang akan melampaui sebaliknya.

22
00:01:48,490 --> 00:01:53,880
Jadi kita bisa bermain-main dengan pengaturan yang berbeda ini untuk mendapatkan pengaturan yang Anda inginkan,

23
00:01:53,920 --> 00:02:01,480
sampul adalah default tetapi jika Anda ingin menyimpan seluruh gambar dan Anda tidak ingin memotongnya pada sumbu apa pun, maka Anda

24
00:02:02,050 --> 00:02:06,770
dapat mengatur ini untuk mengandung dan Anda bisa bermain-main dengan nilai-nilai lain juga.

25
00:02:06,790 --> 00:02:09,110
Saya akan menggunakan cover mana lagi yang merupakan default,

26
00:02:09,140 --> 00:02:13,960
sehingga Anda dapat menghapus prop ini di sini tetapi untuk menunjukkan bahwa Anda dapat mengatur ini, saya akan meninggalkannya di sini.

27
00:02:13,960 --> 00:02:20,390
Sekarang ini memungkinkan Anda untuk menambahkan gambar di sini di layar dan tentu saja Anda dapat menetapkan lebih

28
00:02:20,410 --> 00:02:24,010
banyak gaya, misalnya kita bisa mencoba memberikan sudut bulat ini

29
00:02:24,010 --> 00:02:30,940
dengan sekarang juga menambahkan jari-jari perbatasan di sini dan mengatur ini untuk katakanlah 200, jadi sangat besar radius batas

30
00:02:30,940 --> 00:02:32,800
untuk membuat gambar bulat.

31
00:02:32,800 --> 00:02:39,580
Nah, itu terlihat agak aneh, cara yang lebih baik untuk mengatur ini adalah dengan

32
00:02:39,580 --> 00:02:48,740
hanya membungkus gambar menjadi tampilan sekitarnya seperti ini dan kemudian menetapkan gaya yang harus menambahkan sudut bulat atau menjatuhkan

33
00:02:48,740 --> 00:02:51,670
bayangan atau semacamnya pada tampilan sekitarnya.

34
00:02:51,680 --> 00:02:58,130
Jadi di sana Anda dapat merujuk ke penyangga wadah gambar atau sesuatu seperti itu dan menambahkan ini

35
00:02:58,130 --> 00:03:05,560
di sini di stylesheet Anda dan sekarang pada wadah gambar itu, Anda dapat mengatur radius perbatasan katakanlah 200, mungkin juga

36
00:03:06,240 --> 00:03:10,050
lebar perbatasan 3 dan perbatasan warna hitam sehingga kita juga

37
00:03:10,080 --> 00:03:11,480
memiliki batas visual

38
00:03:11,490 --> 00:03:13,660
dan jika kita melakukan itu

39
00:03:13,800 --> 00:03:21,000
dan menyimpan ini, kita mendapatkan tampilan yang aneh ini. Alasan untuk ini adalah bahwa kita belum menetapkan lebar dan

40
00:03:21,000 --> 00:03:25,770
tinggi pada wadah dan oleh karena itu kita harus melakukan ini dan benar-benar menggunakan

41
00:03:25,770 --> 00:03:30,480
lebar dan tinggi yang kita atur pada gambar, atur pada wadah dan pada

42
00:03:30,480 --> 00:03:36,630
gambar, kita dapat sekarang cukup gunakan lebar 100% dan tinggi 100% karena gambar ada di dalam wadah ini,

43
00:03:36,630 --> 00:03:40,230
jadi 100% di sini dan di sini berarti dibutuhkan lebar

44
00:03:40,230 --> 00:03:41,610
dan tinggi yang

45
00:03:41,730 --> 00:03:47,280
kami siapkan di wadah tetapi sekarang wadah juga memiliki nilai-nilai ini sehingga wadah tersebut berukuran tepat.

46
00:03:47,280 --> 00:03:51,660
Sekarang apa yang dapat Anda lihat adalah sesuatu yang aneh, gambar tersebut tumpang tindih dengan wadah.

47
00:03:51,660 --> 00:03:53,510
Kita melihat sudut-sudut bulat, kita

48
00:03:53,520 --> 00:03:59,700
melihat lingkaran di sini di latar belakang, di sini dengan sudut-sudut hitam atau tepi-tepi di sini

49
00:03:59,700 --> 00:04:03,670
tetapi gambar tidak terpotong ke dalam lingkaran itu sehingga bisa

50
00:04:03,750 --> 00:04:04,900
dikatakan dan

51
00:04:04,900 --> 00:04:09,120
itu dapat dicapai dengan menambahkan properti lain pada wadah yang menampung

52
00:04:09,410 --> 00:04:12,650
gambar dan itulah properti melimpah dengan nilai tersembunyi.

53
00:04:12,660 --> 00:04:18,030
Itu berarti bahwa setiap anak di dalam wadah yang akan keluar

54
00:04:18,030 --> 00:04:23,510
dari wadah, yang akan melampaui batas wadah yang terpotong, terpotong sehingga sekarang

55
00:04:23,760 --> 00:04:30,420
kita benar-benar meremas gambar dengan baik ke dalam wadah dengan bulat sudut kami tiba di

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

57
00:04:31,470 --> 00:04:36,490
Sekarang apa yang juga bisa kita tambahkan adalah sedikit margin pada sumbu vertikal, mungkin

58
00:04:36,660 --> 00:04:41,350
30 untuk memiliki beberapa jarak di sekitar gambar atas dan bawah dan

59
00:04:41,520 --> 00:04:44,910
dengan itu, ini tidak terlihat terlalu buruk, kataku.

60
00:04:44,910 --> 00:04:51,420
Sekarang satu hal yang akan Anda perhatikan adalah bahwa itu tidak terlihat seperti lingkaran sempurna di Android.

61
00:04:51,430 --> 00:04:55,990
Alasan untuk itu adalah bahwa jari-jari batas kami tidak dihitung dengan sempurna, jari-jari batas harus

62
00:04:55,990 --> 00:04:58,570
setengah dari lebar dan tinggi Anda dan masalahnya

63
00:04:58,570 --> 00:05:01,060
adalah lebar dan tinggi tidak sama, jadi

64
00:05:01,060 --> 00:05:06,380
kita harus benar-benar membuat kotak di sini dan kemudian menambahkan radius perbatasan untuk mendapatkan lingkaran yang sempurna.

65
00:05:06,490 --> 00:05:13,510
Jadi solusinya mungkin kita menetapkan lebar 300 di sini pada wadah gambar dan memiliki lebar yang sama dengan tinggi karena

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

67
00:05:13,980 --> 00:05:18,640
dan sekarang menggunakan jari-jari perbatasan yang setengah dari yang 150 dan sekarang kita

68
00:05:18,640 --> 00:05:21,600
akan mendapatkan lingkaran sempurna di kedua perangkat.

69
00:05:21,600 --> 00:05:28,480
Ini juga berarti bahwa pada perangkat yang sangat kecil, gambar kita di sini, lingkaran kita mungkin tidak muat di layar

70
00:05:28,480 --> 00:05:35,590
jika perangkat memiliki layar yang lebih kecil dari 300 piksel mengenai lebarnya tetapi kita akan belajar tentang alat, cara mengetahui lebar

71
00:05:35,590 --> 00:05:41,830
perangkat mana yang perangkat kami memiliki dan bagaimana kami dapat menyesuaikan gaya dengan yang ada di modul berikutnya.

72
00:05:41,830 --> 00:05:47,380
Untuk sekarang mari kita pergi dengan nilai hardcoded di sini yang terlihat bagus di layar ini di sini dan kita

73
00:05:47,500 --> 00:05:50,950
akan membahas alat yang membantu kita dengan layar perangkat lain nanti.

74
00:05:50,950 --> 00:05:56,380
Jadi ini adalah bagaimana Anda dapat menambahkan gambar dan bagaimana Anda bisa mendesainnya, bagaimana Anda dapat membuatnya bulat seperti yang Anda lakukan di sini

75
00:05:56,380 --> 00:05:59,680
yang tentu saja tidak harus dilakukan tetapi yang terlihat bagus dalam kasus ini di

76
00:05:59,680 --> 00:06:03,420
sini saya pikir, bagaimana Anda dapat melakukannya ini jika Anda memiliki gambar sebagai file di sini.

77
00:06:03,430 --> 00:06:05,530
Sekarang bagaimana jika gambar tersebut berasal dari web?