Return to Video

13-02 Adding a CheckBox - Solution

  • 0:01 - 0:04
    Untuk membuat penataan seperti ini
    mari pertama memikirkan tentang tampilan yang kita butuhkan
  • 0:04 - 0:07
    Saya akan mengasumsikan bahwa semua ini
    telah terbentuk, dan kita hanya akan
  • 0:07 - 0:11
    berbicara mengenai hal-hal baru
    yang perlu kita tambahkan dalam penataannya.
  • 0:11 - 0:15
    Dua tampilan baru yang perlu
    kita tambahkan adalah TextView untuk Toppings dan
  • 0:15 - 0:18
    tampilan kotak centang untuk
    pilihan Whipped cream
  • 0:18 - 0:21
    Anda mungkin tidak pernah mengetahui
    bahwa tampilan ini ada di Android, tetapi
  • 0:21 - 0:24
    semoga dengan melakukan pencarian Google
    membantu anda mendapatkan jawaban ini.
  • 0:25 - 0:28
    Berlanjut ke langkah ke 2,
    kita perlu menempatkan tampilannya.
  • 0:28 - 0:31
    Dengan berasumsi bahwa tampilan ini
    sudah berada di posisi yang benar,
  • 0:31 - 0:35
    kita hanya perlu menambahkan Toppings dan
    Whipped cream, secara vertikal, dalam baris yang sama.
  • 0:35 - 0:37
    Berhubung tampilan dasarnya adalah vertikal,
  • 0:37 - 0:40
    tata letak linear, kita dapat menambahkan
    dua tampilan ini di atasnya.
  • 0:41 - 0:44
    Untuk langkah ketiga, kita perlu
    memberi gaya pada tampilan-tampilannya.
  • 0:44 - 0:46
    Gaya pada header bagian Toppings
    adalah sama dengan Quantity dan
  • 0:46 - 0:49
    header bagian Order Summary, jadi
    kita hanya cukup menyalin dan
  • 0:49 - 0:51
    menempelkan header-headernya yang telah ada.
  • 0:51 - 0:55
    Tampilan kotak centang baru, walaupun demikian
    kita perlu memberi gaya dengan penyesuaian.
  • 0:55 - 0:59
    Kita harus dapat memberikan 24 dp ruang
    diantara kotak dan tulisan,
  • 0:59 - 1:04
    dan kita harus merubah ukuran fon
    dari Whipped cream menjadi ukuran fon 16 sp.
  • 1:04 - 1:06
    Mari membuat perubahan-perubahan ini
    pada aplikasi kita sekarang.
  • 1:07 - 1:10
    Untuk menambahkan sebuah
    header Toppings yang menyerupai header Quantity,
  • 1:10 - 1:13
    Saya dapat hanya menyalin
    dan menempelkan kode ini.
  • 1:13 - 1:17
    Saya menyalinnya dan kemudian menambahkannya
    ke bagian atas dari penataan vertikal linear ini.
  • 1:18 - 1:20
    Oke, jadi sekarang
    itu akan tertulis Quantity dua kali disini.
  • 1:20 - 1:23
    Saya akan merubah teksnya jadi
    akan tertulis Toppings.
  • 1:23 - 1:25
    Saya juga menyalin melebihi pias bawah jadi
  • 1:25 - 1:29
    nantinya akan ada sebagian ruang diantara
    header yang ini dan konten di bawahnya.
  • 1:30 - 1:32
    Sekarang kita belum menambahkan sebuah
    kotak centang ke aplikasi kita, jadi
  • 1:32 - 1:35
    Saya akan melakukan pencarian Google
    tentang bagaimana melakukannya.
  • 1:35 - 1:38
    Saya akan mencari untuk
    android kotak centang.
  • 1:38 - 1:41
    Ingat untuk menambahkan android karena
    akan ada kotak centang untuk
  • 1:41 - 1:45
    platform-platform lain, seperti untuk
    web dan platform mobile lainnya,
  • 1:45 - 1:48
    ini dapat membantu anda mendapatkan
    hasil yang spesifik untuk Android.
  • 1:48 - 1:50
    Mari kita coba tautan yang pertama.
  • 1:50 - 1:53
    Ini mereferensikan dokumentasi
    untuk kelas kotak centang.
  • 1:53 - 1:56
    Saya akan menyelusurinya dan
    dapat melihat ikhtisar kelas yang bagus dan
  • 1:56 - 1:59
    itu akan langsung menuju
    ke atribut XML.
  • 1:59 - 2:03
    Hal yang tetap saya sukai adalah
    contoh dari beberapa XML untuk kotak centang.
  • 2:03 - 2:05
    Jadi mari kembali ke hasil pencarian.
  • 2:05 - 2:07
    Mari kita klik pada tautan yang kedua.
  • 2:07 - 2:10
    Keren, sekarang ini menampilkan beberapa
    gambar-gambar dari kotak centang.
  • 2:10 - 2:12
    Dan ini beberapa XML.
  • 2:12 - 2:13
    Yang ini kelihatannya cukup bagus.
  • 2:13 - 2:16
    Ada dua kotak centang diantara
    sebuah LinearLayout.
  • 2:16 - 2:19
    Saya hanya akan menyalin
    kotak centang pertama ini, dan
  • 2:19 - 2:21
    kemudian Saya akan
    menempelkannya di aplikasi kita
  • 2:22 - 2:26
    Kembali ke aplikasi kita, Saya akan
    menempelkannya setelah teks Toppings, tetapi
  • 2:26 - 2:29
    sebelum teks Quantity, jadi tepat disini.
  • 2:29 - 2:33
    Saya akan memodifikasi XMLnya karena itu tidak
    cukup sesuai dengan kasus yang kita gunakan
  • 2:33 - 2:37
    Saya akan menghilangkan identitasnya
    dan juga teks yang disini.
  • 2:37 - 2:40
    Melainkan daging, karena kedai kopi kita
    tidak menjual daging,
  • 2:40 - 2:42
    Saya akan mengetik Whipped cream.
  • 2:43 - 2:46
    Omong-omong, apa yang anda lihat sebelumnya
    @untai/meat
  • 2:46 - 2:50
    adalah mereferensikan ke sumber untai
    di file strings.xml.
  • 2:50 - 2:53
    Kita akan membicarakan hal tersebut nanti,
    namun untuk sekarang,
  • 2:53 - 2:55
    anda dapat hanya mengetik untaiannya
    langsung disini.
  • 2:55 - 2:57
    Dan lihat, update pratinjau,
  • 2:57 - 2:59
    sekarang kita memiliki sebuah
    kotak centang yang bertuliskan Whipped cream.
  • 2:59 - 3:03
    Hal yang keren tentang tampilan kotak centang
    adalah memberi anda sebuah kotak,
  • 3:03 - 3:08
    dan juga beberapa teks, jadi anda tidak perlu
    menambahkan tampilan teks lainnya disini.
  • 3:08 - 3:11
    Kita juga tidak membutuhkan garis ini
    disini yang berkata tentang onClick.
  • 3:12 - 3:14
    Yang kita perhatikan mengenai
    tugas pengodean ini
  • 3:14 - 3:16
    adalah membuat kotak centang terlihat disini.
  • 3:16 - 3:20
    Cara lainnya anda dapat saja tiba di XML ini
    dengan memeriksa
  • 3:20 - 3:21
    contekan tampilan biasa Android.
  • 3:23 - 3:25
    Daftar contekan ini berisi setumpuk
    tampilan biasa Android dan
  • 3:25 - 3:27
    juga memiliki contoh-contoh untuk XML juga.
  • 3:28 - 3:33
    Ini tampilan kotak centang dan ini adalah
    contoh dari bagaimana akan terlihat dan
  • 3:33 - 3:34
    berkorespondensi dengan XML.
  • 3:34 - 3:37
    Anda mungkin sudah menyalin XML dari sini
    dan menempelkannya di aplikasi.
  • 3:38 - 3:40
    Kembali ke Studio Android,
  • 3:40 - 3:42
    mari jalankan aplikasinya
    untuk melihat bagaimana tampilannya.
  • 3:42 - 3:43
    Dan inilah dia.
  • 3:43 - 3:44
    Terlihat cukup bagus.
  • 3:44 - 3:47
    Kita memiliki header Toppings
    dan kotak centang Whipped Cream
  • 3:48 - 3:50
    Kita juga mendapatkan animasi keren
    ketika kita memeriksa kotaknya.
  • 3:51 - 3:55
    Satu-satunya masalah yang saya lihat adalah
    spasinya tidak ada.
  • 3:55 - 3:58
    Sebagai contoh, ini terlalu rapat diantara
    header Quantity dan
  • 3:58 - 4:01
    kotak centang Whipped cream, dan
    juga tidak cukup spasi diantaranya disini.
  • 4:02 - 4:04
    Mari kembali ke garis merah
    yang telah tersedia,
  • 4:04 - 4:09
    kita harus menambahkan spasi 24 dp disini,
    dan mengganti ukuran fonnya ke 16 sp.
  • 4:11 - 4:13
    Pertama-tama saya akan mengganti ukuran fonnya.
  • 4:13 - 4:18
    Saya akan mengetik android:textSize
    dan akan memasukkan 16 sp
  • 4:18 - 4:21
    Saya akan membuka pratinjau disini
    untuk memeriksa apakah itu benar-benar menaikkan
  • 4:21 - 4:23
    ukuran fonnya, dan ya benar.
  • 4:23 - 4:26
    Jika anda tidak yakin apakah itu sudah terbaharui
    atau belum anda dapat selalu menekan tombol ini.
  • 4:26 - 4:27
    Oke.
  • 4:27 - 4:30
    Sekarang untuk mengetahui jaraknya,
    sebenarnya gunakanlah
  • 4:30 - 4:32
    untuk mengerjakan
    sekelompok percobaan dan kesalahan.
  • 4:32 - 4:34
    Saya mencoba menetapkan tampilan pias dan
  • 4:34 - 4:38
    kemudian Saya mencoba tampilan blok,
    dan ternyata bahwa paddingLeft
  • 4:38 - 4:43
    memang mengontrol jarak diantara
    kotak dan teks disini.
  • 4:43 - 4:44
    Mari kita tambahkan bloknya sekarang.
  • 4:45 - 4:47
    Keren, teksnya berpindah.
  • 4:47 - 4:49
    Saya masih melihat satu lagi masalah.
  • 4:49 - 4:53
    Terdapat spasi vertikal yang cukup disini, tetapi
    tidak terdapat spasi vertikal yang cukup disini.
  • 4:53 - 4:58
    Saya juga perlu menambahkan blok bawah, atau
    pias bawah pada tampilan kotak centang, atau
  • 4:58 - 5:01
    Saya perlu menambahkan blok atas, atau
    pias atas pada header Quantity ini.
  • 5:01 - 5:03
    Yang mana saja tetap akan bekerja,
  • 5:03 - 5:07
    Saya hanya perlu menambahkan sebuah
    pias atas pada header Quantity ini.
  • 5:07 - 5:09
    Lihat, ini terlihat lebih baik!
  • 5:09 - 5:11
    Sekarang hal-hal ini terlihat lebih sama spasinya.
  • 5:11 - 5:13
    Saya akan menjalankan aplikasi ini pada alat saya.
  • 5:14 - 5:15
    Dan inilah aplikasinya.
  • 5:15 - 5:16
    Terlihat cukup bagus.
  • 5:16 - 5:17
    Kerja yang bagus.
  • 5:17 - 5:21
    Ketika anda butuh menambahkan perubahan UI
    pada aplikasi anda, anda dapat mengikuti pola ini
  • 5:21 - 5:25
    dari pencarian Google untuk informasi online dan
    kemudian aplikasikan pada aplikasi anda.
Title:
13-02 Adding a CheckBox - Solution
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
05:27

Indonesian subtitles

Revisions