Indonesian subtitles

← 05-07 Membuat Layout - Solusi

05-07 Membuat Layout - Solusi

Get Embed Code
13 Languages

Showing Revision 5 created 10/20/2015 by Abe Felisa.

  1. Untuk membuat layout ini,
    saya membuka fail activity_main.xml.
  2. Saya tahu saya butuh
    LinearLayout vertikal
  3. untuk meletakkan setiap tampilan ini
    dalam kolom vertikal.
  4. Pertama, saya akan mengubah
    RelativeLayout menjadi LinearLayout.
  5. Ini segera menampilkan kesalahan
  6. bahwa tag pembuka tidak cocok
    dengan tag penutup.
  7. Saya bisa menyalin ini
    dan merekatkannya di bawah sini.
  8. Sekarang tag-nya cocok.
  9. Lalu saya bisa
    menambahkan tampilannya.
  10. Pertama, ada TextView "Quantity".
  11. Saya akan mengambil TextView ini
    dan mengganti teksnya menjadi "Quantity".
  12. Berikutnya, ada TextView
    yang bertuliskan "0".
  13. Saya bisa menyalin TextView pertama
    dan merekatkannya di bawahnya.
  14. Saya akan ganti teksnya menjadi "0"
    agar cocok dengan cuplikan layar ini.
  15. Anak terakhir dalam LinearLayout ini
    adalah tombol.
  16. Kita belum pernah menambahkan tombol
    dalam layout. Mari cari di Google.
  17. Jika membuka peramban,
    Anda bisa mencari "button android".
  18. Taut pertama ini tampak bagus.
    Ini situs developer.android.com.
  19. Ini dokumentasi untuk tombol. Kita bisa
    mengabaikan mayoritas teks di sini.
  20. Kita gulirkan ke bawah
    untuk membaca Class Overview.
  21. Ini membahas sedikit tentang kode Java
    yang belum kita pelajari.
  22. Namun di bawah sini, ada XML untuk tombol.
  23. Kita bisa menyalin ini dan melihat
    pengaruhnya pada kode.
  24. Dalam layout, saya akan menambahkan
    tombol di bawah kedua TextView ini.
  25. Saya akan merekatkan kode
    dari dokumentasi tadi di sini.
  26. Sekarang, alih-alih string self_destruct,
  27. saya akan memilih
    yang lebih bersahabat, seperti "Order".
  28. Baris terakhir ini juga bisa dihapus
    karena tidak perlu.
  29. Bagus, sekarang Anda punya TextView "0"
    dan "Quantity" serta tombol Order.
  30. Jalankan di aplikasi
    untuk lihat hasilnya
  31. dengan mengeklik
    tombol putar berwarna hijau ini.
  32. Di bawah, kita bisa melihat
    aplikasinya sedang dibuat.
  33. Bukan ini yang kita mau.
  34. Tampaknya, LinearLayout kita
    adalah horizontal, bukan vertikal.
  35. Jadi, pastikan kita menambahkan
    atribut orientasi.
  36. Kita akan mengubah ini
    dengan android:orientation="vertical".
  37. Itu akan memecahkan masalah ini.
  38. Kita klik Run lagi.
  39. Itu lebih baik.
  40. Ketiga anak ini ditampilkan
    dalam kolom vertikal.
  41. Sekarang tinggal mempercantiknya
  42. agar lebih mirip
    dengan cuplikan layar yang tersedia.
  43. Dari cuplikan layar ini, kita melihat
    TextView "Quantity" berhuruf besar.
  44. Di Pelajaran 1, kita mempelajari atribut
    yang disebut android:textAllCaps.
  45. Atribut itu muncul
    dalam autocomplete ini.
  46. Jika muncul seperti ini,
    tinggal tekan enter
  47. dan ini akan otomatis
    ditambahkan pada kode.
  48. Kita buat nilainya "true"
    karena kita ingin huruf besar semua.
  49. Lebih baik menggunakan atribut ini
    untuk menulis teks dengan huruf besar
  50. karena antarmuka pengguna ingin diubah
  51. agar "Quantity" ditulis
    dengan huruf kecil seperti ini,
  52. kita tinggal menghapus atribut ini
    alih-alih mengubah teksnya.
  53. Berikutnya, untuk teks "0", kita harus
    menggunakan ukuran teks 16 sp.
  54. Saya tambahkan sekarang.
    Ini muncul di saran autocomplete.
  55. Jadi, saya tekan enter saja,
    lalu saya memilih 16 sp untuk nilainya.
  56. Kita juga ingin warna hurufnya hitam.
  57. Saya akan menggunakan warna sistem Android
    untuk hitam yang ditulis seperti ini.
  58. Bagus, itu menyelesaikan
    TextView "Quantity" dan "0".
  59. Tombol Order-nya sudah bagus.
  60. Ini akan otomatis membuat
    teks dalam tombolnya berhuruf besar.
  61. Tinggi dan lebarnya wrap_content.
  62. Namun kita harus menyelesaikan
    ruang vertikal ini.
  63. Kita menginginkan padding
    atau margin sebesar 16dp
  64. antara TextView "Quantity" dan "0".
  65. Kita juga menginginkan padding 16 dp
    antara "0" dan tombol Order.
  66. Anda dapat menerapkan ini
    dalam berbagai cara.
  67. Saya hanya akan menambahkannya
  68. sebagai layout margin atas
    untuk tombol ini.
  69. Saya akan tambahkan sebagai margin bawah
    untuk TextView "Quantity" ini.
  70. Silakan melakukannya dengan cara lain
    selama tampilannya sama.
  71. Penyebab saya memilih
    margin bawah dan margin atas
  72. adalah karena saya tahu
    area tengah ini akan berubah nantinya.
  73. Kita akan menjadikannya pemilih kuantitas
    dengan tombol plus dan minus.
  74. Saya juga masih
    menginginkan jarak 16 dp
  75. antara "Quantity", judul,
    dan pemilih kuantitas.
  76. Begitu pula dengan tombol ini.
  77. Mari kita jalankan lagi sekarang
    pada perangkat kita.
  78. Bagus, dan ini persis
    seperti yang kita mau.
  79. TextView "Quantity" ditulis
    dengan huruf besar,
  80. TextView "0" menggunakan
    huruf 16 sp berwarna hitam,
  81. dan ada tombol Order di sini.
  82. Juga ada jarak 16 dp
    antara tampilan-tampilan ini.
  83. Bagus.
  84. Saya hampir lupa.
    Dalam kuis juga ada pertanyaan,
  85. apa yang terjadi saat tombol ini diklik?
  86. Tidak terjadi apa-apa,
    setidaknya untuk sekarang.
  87. Terus saksikan untuk ketahui
    apa yang terjadi berikutnya