YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Indonesian subtitles

← 13-02 Adding a CheckBox - Solution

Get Embed Code
13 Languages

Showing Revision 1 created 10/18/2015 by sp11.

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