Return to Video

07-23 The Stages - Solution

  • 0:01 - 0:05
    Baiklah. Saya akan menjawab pertanyaan-
    pertanyaan ini sebelum masuk ke XML.
  • 0:05 - 0:07
    Pertama, adalah memilih view.
  • 0:07 - 0:10
    Saya akan menggambar kotak di
    sekeliling yang saya lihat.
  • 0:10 - 0:11
    Oke, jadi ada lima view berbeda
  • 0:11 - 0:15
    tidak termasuk view group, yang
    secara teknis dianggap satu view.
  • 0:15 - 0:18
    Tapi, lima view ini adalah
    dua TextViews di atas sini.
  • 0:18 - 0:19
    diikuti oleh tiga tombol.
  • 0:19 - 0:24
    Dan tidak ada ImageViews di manapun
    jadi saya rasa tidak perlu ImageViews.
  • 0:24 - 0:28
    Anda mungkin berpikir kenapa saya
    buat dua ini adalah TextViews berbeda,
  • 0:28 - 0:32
    pada produk akhir, styling
    Team A dan skornya
  • 0:32 - 0:34
    terlihat sangat berbeda.
  • 0:34 - 0:38
    Jadi saya putuskan untuk membiarkan
    keduanya sebagai TextViews terpisah.
  • 0:38 - 0:40
    Lanjut ke langkah kedua,
    memposisikan view.
  • 0:40 - 0:43
    Saya akan memilih ViewGroup mana
    yang akan dipakai di sini.
  • 0:43 - 0:47
    Ada dua dalam benak saya yaitu
    linear layout dan relative layout.
  • 0:47 - 0:49
    Ini adalah kolom vertikal pada view.
  • 0:49 - 0:53
    Jadi lumayan jelas apa yang saya mau,
    yaitu linear layout.
  • 0:54 - 0:57
    Terakhir saya masuk ke langkah
    ketiga, menata view.
  • 0:57 - 1:00
    Dan saya akan mengerjakannya
    saat bekerja dengan XML.
  • 1:00 - 1:03
    Mari kita masuk ke XML.
  • 1:03 - 1:05
    Saya ingin melihat
    ke tab Text.
  • 1:05 - 1:08
    Hal pertama yang akan saya
    lakukan di sini adalah
  • 1:08 - 1:10
    menghapus yang tidak diperlukan.
  • 1:10 - 1:12
    Saya akan lanjut dan mulai dengan
    menghapus TextView ini.
  • 1:13 - 1:17
    Dan semua paddingLeft, paddingRight,
    paddingTop dan paddingBottom,
  • 1:17 - 1:20
    juga akan saya hapus.
  • 1:20 - 1:23
    Hati-hati, jangan menghapus
    yang diperlukan.
  • 1:23 - 1:24
    Oke.
  • 1:24 - 1:28
    Kita telah sepakat bahwa ViewGroup yang
    akan digunakan bukan relative layout
  • 1:28 - 1:31
    tapi linear layout, maka saya akan
    mengubahnya sekarang.
  • 1:31 - 1:35
    Dalam linear layout ini saya akan
    membuat dua TextViews
  • 1:35 - 1:36
    dan tiga tombol.
  • 1:36 - 1:38
    Saya akan memulai membuatnya.
  • 1:38 - 1:41
    Saya tidak akan terlalu
    spesifik tentang lebar dan
  • 1:41 - 1:43
    tinggi TextViews ini nantinya.
  • 1:43 - 1:45
    Saat ini saya akan membiarkannya
    sebagai wrap_content
  • 1:45 - 1:48
    yang akan menempatkan kotak TextView
    di sekeliling teksnya.
  • 1:49 - 1:52
    Saya akan menentukan teks untuk
    TextView ini juga.
  • 1:52 - 1:55
    TextView pertama ini akan
    terbaca Team A.
  • 1:56 - 1:59
    Mari kita lihat hasilnya di Preview.
  • 1:59 - 2:02
    Saya dapat melihat TextView kecil
    di sini yang bernama Team A.
  • 2:02 - 2:04
    Mari kita buat
    lebih banyak lagi.
  • 2:04 - 2:07
    Yang di bawahnya adalah skor,
    itu juga sebuah TextView.
  • 2:07 - 2:10
    Kita akan ketik Text.
  • 2:10 - 2:13
    Saya lihat ada tulisan TextView,
    maka saya tekan Enter.
  • 2:13 - 2:16
    Saya juga akan membuatnya wrap_content.
  • 2:16 - 2:18
    Dan saya akan menambahkan teksnya.
  • 2:18 - 2:22
    Skor biasanya mulai dari nol,
    maka kita memulainya dari nol.
  • 2:22 - 2:22
    Oke.
  • 2:22 - 2:23
    Sekarang tombolnya.
  • 2:23 - 2:26
    Saya akan mengetik huruf Button.
  • 2:26 - 2:28
    Teruskan dan tambahkan wrap_content
    untuk ini juga.
  • 2:28 - 2:32
    Button pertama akan
    terbilang +3 Points.
  • 2:32 - 2:35
    Saya akan lanjut dan salin ini dan
  • 2:35 - 2:40
    menempelkannya di sini sekali,
    dua kali untuk mendapat dua Button lagi.
  • 2:40 - 2:43
    Satu Button akan terbilang
    +2 Points dan
  • 2:43 - 2:45
    satu lagi terbilang Free Throw.
  • 2:45 - 2:47
    Oke, mari kita lihat tampilannya
    di Preview.
  • 2:48 - 2:51
    Kelihatannya saya punya tiga tombol.
  • 2:51 - 2:54
    Saya dapat melihat Team A dan 0.
  • 2:54 - 2:56
    Jadi semua view saya
    sudah ada,
  • 2:56 - 2:59
    tapi tak terlihat seperti bayangan akhir
    yang diharapkan.
  • 2:59 - 3:01
    Ingat, mereka ada di kolom vertikal.
  • 3:01 - 3:03
    Jadi saya akan mengubah
    orientasi layout.
  • 3:03 - 3:05
    Akan saya lakukan itu.
  • 3:05 - 3:10
    Mulai ketik orientation dan saya
    menginginkannya vertikal.
  • 3:10 - 3:12
    Oke, terlihat lebih baik.
  • 3:12 - 3:17
    Tombol-tombol ini sebenarnya diperluas
    untuk mengisi lebarnya jendela layar.
  • 3:17 - 3:21
    Jadi saya tidak mau melakukan
    wrap_content untuknya,
  • 3:21 - 3:23
    sebagai gantinya saya akan melakukan
    match_parent.
  • 3:23 - 3:25
    Jadi, ijinkan saya
    mengubahnya sekarang.
  • 3:26 - 3:29
    Maka, lebar semua tombol telah
    menjadi match_parent.
  • 3:29 - 3:30
    Lihat di Preview.
  • 3:31 - 3:33
    Sudah lebih baik,
    mereka membesar.
  • 3:33 - 3:34
    Baiklah.
  • 3:34 - 3:39
    Teks saya masih agak
    terpojok di sudut,
  • 3:39 - 3:44
    untuk membetulkannya saya akan
    memakai sesuatu bernama gravity.
  • 3:44 - 3:46
    Oke, di sini saya memakai Google Drawing.
  • 3:46 - 3:49
    Mari kita buat satu text box di
    Google Drawing.
  • 3:50 - 3:52
    Sebanyak inilah batas pandangan view.
  • 3:52 - 3:54
    Saya dapat mengetik kata Team A,
  • 3:54 - 3:58
    dan secara default akan tampil di
    sudut kiri atas.
  • 3:58 - 4:01
    Sama seperti TextView, saat Anda
    mengetik teks di TextView,
  • 4:01 - 4:03
    secara default akan ada di
    sudut kiri atas.
  • 4:03 - 4:09
    Dengan Google Drawings, saya dapat
    memilih teks ini dan menggunakan
  • 4:09 - 4:14
    sesuatu yang setara dengan attribute,
    namanya line, agar rata tengah
  • 4:14 - 4:19
    secara mendatar dalam kotak teks dan
    rata tengah vertikal di dalamnya.
  • 4:19 - 4:20
    Lumayan keren.
  • 4:20 - 4:24
    Mengambil konten dan menggerakkannya
    di dalam batas pandangan adalah
  • 4:24 - 4:27
    tugas layout gravity.
  • 4:27 - 4:30
    Jika Anda pikir ini mungkin mirip
    metode alignment
  • 4:30 - 4:34
    yang dapat Anda pakai untuk
    relative layout, memang benar, tapi Anda
  • 4:34 - 4:37
    dapat memakai gravity attribute untuk
    linear layout, yang membuatnya berguna.
  • 4:37 - 4:39
    Kita akan melihatnya di dalam kode.
  • 4:40 - 4:44
    Saya akan ambil TextView pertama dan
    ketik gravity.
  • 4:45 - 4:47
    Dengan gravity,
    saya punya dua pilihan:
  • 4:47 - 4:49
    layout gravity dan gravity.
  • 4:49 - 4:51
    Saya sudah katakan
    tentang atribut gravity.
  • 4:51 - 4:53
    Itu yang akan kita gunakan.
  • 4:53 - 4:56
    Kemudian saya punya beberapa
    pilihan di sini,
  • 4:56 - 4:58
    dan saya menginginkannya
    ditengahkan secara mendatar.
  • 4:58 - 5:00
    Jadi itu yang akan saya pakai.
  • 5:00 - 5:03
    Saya akan lanjut dan lihat
    hasilnya di Preview.
  • 5:04 - 5:08
    Tidak terlihat berubah banyak,
    tapi ada sebabnya.
  • 5:09 - 5:13
    Bila saya klik di sini, perbesarlah
    karena mungkin terlalu kecil.
  • 5:15 - 5:16
  • 5:16 - 5:21
    ada Team A di sini, dan Anda dapat
    melihat batas view di sekelilingnya.
  • 5:21 - 5:24
    Kalau saya bilang ini tadinya diletakkan
    di tengah view,
  • 5:24 - 5:27
    itu memang benar.
  • 5:27 - 5:32
    Memang terlihat seperti terletak di tengah
    pandangan, karena sangat kecil.
  • 5:32 - 5:33
    Kembali ke Google Drawing.
  • 5:33 - 5:39
    Bila saya perkecil ukurannya menjadi
    sebesar teks,
  • 5:39 - 5:40
    Rata tengah, tapi tidak terlihat
  • 5:40 - 5:45
    sangat berbeda dari
    jika didorong ke kiri.
  • 5:45 - 5:47
    Kalau saya menginginkannya
    di tengah-tengah ponsel,
  • 5:47 - 5:50
    saya perlu memperbesar view
    selebar ponsel.
  • 5:50 - 5:52
    Jadi kita perlu mengubah lebarnya.
  • 5:54 - 5:56
    Oke, di sini saya akan menutup Preview.
  • 5:57 - 5:59
    Dan melihat lebarnya di sini.
  • 6:00 - 6:05
    Saya akan lakukan match_parent,
    daripada wrap_content.
  • 6:05 - 6:06
    Mari kita lihat di Preview lagi.
  • 6:07 - 6:08
    Kita perkecil.
  • 6:09 - 6:11
    Jauh lebih baik.
  • 6:11 - 6:12
    Kelihatannya rata tengah.
  • 6:12 - 6:14
    Mari kita ulangi untuk skor di sini.
  • 6:16 - 6:19
    Oke, saya akan tambahkan
    gravity ke ini juga dan
  • 6:19 - 6:21
    gravity dalam semua layout gravity.
  • 6:21 - 6:26
    center_horizontal dan saya akan mengubah
    lebarnya ke match_parent.
  • 6:27 - 6:29
    Oke, mari kita cek lagi.
  • 6:29 - 6:31
    Keren! Jadi semuanya ada di tengah.
  • 6:31 - 6:32
    Terlihat lumayan bagus.
  • 6:32 - 6:34
    Selain terlihat sedikit
    tertekan jadi satu,
  • 6:34 - 6:37
    tidak terlalu banyak ruang untuk
    elemen-elemen ini.
  • 6:37 - 6:41
    Saya akan memberi setiap TextView
    4 padding.
  • 6:41 - 6:46
    Saya mulai mengetik padding,
    memberinya 4dp.
  • 6:47 - 6:48
    Ingat dp?
  • 6:48 - 6:52
    Saya hanya menggunakan padding,
    bukan padding bottom atau sejenisnya.
  • 6:52 - 6:54
    Itu akan memberi 4dp di sekitar
    semua TextView.
  • 6:54 - 6:57
    Mari kita lihat tampilannya di Preview.
  • 6:58 - 7:01
    Oke. Itu memberinya sedikit ruang lebih.
  • 7:01 - 7:04
    Saya akan melakukan hal yang sama ke
    Score TextView.
  • 7:08 - 7:11
    Oke, sekarang saya akan lakukan hal yang
    sama kepada Button.
  • 7:16 - 7:19
    Hmm, kelihatannya tidak berubah banyak.
  • 7:19 - 7:24
    Bagaimana kalau saya membuatnya
    sedikit lebih besar, mungkin 8?
  • 7:24 - 7:26
    20?
  • 7:26 - 7:30
    Hmm, menarik, jadi ini membuat
    tombolnya sendiri lebih besar.
  • 7:30 - 7:32
    Saya tidak ingin tombolnya membesar,
  • 7:32 - 7:34
    saya ingin ruang sekitarnya yang membesar.
  • 7:34 - 7:38
    Dan sebenarnya, itu adalah tugas
    yang lebih baik untuk layout_margin.
  • 7:38 - 7:41
    Ingat, padding menambahkan lapisan
    dalam view,
  • 7:41 - 7:43
    margin menambahkan ruang
    di sekitar view.
  • 7:44 - 7:45
    Jadi kita ubah ini ke layout_margin.
  • 7:45 - 7:47
    Saya akan membuatnya 8dp.
  • 7:47 - 7:49
    Nah, ini terlihat lebih baik.
  • 7:49 - 7:53
    Sekarang ada ruang di sekitar view di
    antara dua view ini.
  • 7:53 - 7:56
    Ayo kita lanjut melakukannya
    kepada tombol-tombol lainnya.
  • 7:56 - 8:00
    Margin, bukan padding, layout_margin.
  • 8:00 - 8:01
    Oke, itu terlihat lumayan bagus.
  • 8:01 - 8:04
    Kalau Anda memilih atribut yang
    berbeda dari saya
  • 8:04 - 8:08
    misalkan Anda memiliki lima padding
    bukan empat, tidak masalah.
  • 8:08 - 8:12
    Ingat, saat ini saya hanya mencoba
    membuat teksnya terbaca.
  • 8:12 - 8:15
    Kita akan belajar tentang ukuran font
    dan warna yang bagus pada
  • 8:17 - 8:18
    tahap lebih lanjut.
    Oke.
  • 8:18 - 8:19
    Kerjaan yang menakjubkan.
  • 8:19 - 8:21
    Anda telah menyelesaikan langkah itu.
タイトル:
07-23 The Stages - Solution
概説:

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
UD837 - Android for Beginners
Duration:
08:22

Indonesian subtitles

改訂 Compare revisions