Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    Perkembangan yang baik.
  • 0:02 - 0:05
    Anda telah dapat membuat tata letak
    yang baik.
  • 0:05 - 0:09
    Tetapi, saya juga melihat masalah dengan
    semua tata letak yang anda buat selama ini.
  • 0:09 - 0:13
    Tampilan yang tepat terhadap tepi
    TampilanGrup atau
  • 0:13 - 0:14
    terhadap perangkat.
  • 0:14 - 0:16
    Untuk semua tata letak yang telah kita
    buat di pelajaran ini sejauh ini
  • 0:16 - 0:20
    kita dapat menambahkan sedikit visual
    untuk melengkapinya, jadi
  • 0:20 - 0:24
    mereka akan tampak lebih bagus dengan
    menambahkan sedikit spasi putih.
  • 0:24 - 0:26
    Kami akan melakukan ini dengan menggunakan
    konsep blok dan pias,
  • 0:26 - 0:29
    yang telah kita bahas di video ini.
  • 0:29 - 0:31
    Contohnya, kita dapat menambahkan sedikit
    spasi putih, di sini, di sini,
  • 0:31 - 0:34
    atau bahkan di atas, sehingga tampilannya
    tidak terlalu padat
  • 0:34 - 0:38
    terhadap tepi induk dan terhadap tepi
    perangkat.
  • 0:38 - 0:39
    Ini adalah keputusan desain,
  • 0:39 - 0:42
    karena kadang-kadang anda ingin tepi ke
    tepi, seperti untuk
  • 0:42 - 0:45
    efek gambar penuh yang saya telah
    kemukakan sebelumnya.
  • 0:45 - 0:49
    Tetapi dalam hal apapun, anda dapat meng-
    gunakan spasi putih untuk menambahkan ruang,
  • 0:49 - 0:53
    sehingga isinya lebih mudah dibaca dan
    diamati.
  • 0:53 - 0:57
    Saya akan menunjukkan pada anda efek dari
    menambahkan blok atau pias pada tampilan.
  • 0:57 - 0:59
    Mari mulai dengan TampilanTeks seperti
    Hello.
  • 0:59 - 1:02
    Jika kita menambahkan delapan tukik blok
    ke tampilan,
  • 1:02 - 1:05
    lalu membuatnya lebih besar dengan delapan
    tukik di setiap arahnya di sini.
  • 1:05 - 1:08
    Jika kita menambahkan tata letak pias
    delapan tukik ke TampilanTeks,
  • 1:08 - 1:11
    maka kita akan mendapatkan tampilan ini.
  • 1:11 - 1:13
    Untuk menambahkan pias, anda perlu
    menambahkannya ke dalam TampilanGrup,
  • 1:13 - 1:16
    inilah sebabnya saya memilikinya dalam
    tata letak linier di sini,
  • 1:16 - 1:19
    Tata letak linier adalah sesuatu yang
    mengambil TampilanTeks asli dan
  • 1:19 - 1:21
    mendorongnya dengan delapan tukik.
  • 1:21 - 1:23
    Dari kirii dan dari atas.
  • 1:23 - 1:26
    Juga dari samping.
  • 1:26 - 1:28
    Walaupun anda menyatakan blok atau
  • 1:28 - 1:33
    pias dalam TampilanTeks anak, blok tetap
    ditangani oleh TampilanTeks itu sendiri.
  • 1:33 - 1:36
    Sedangkan pias ditangani oleh TampilanGrup
    induk.
  • 1:36 - 1:40
    Jika anda dalam perangkat yang sebenarnya,
    dan anda tidak memiliki latar belakang untuk
  • 1:40 - 1:43
    TampilanTeks, maka secara teknis akan
    terlihat sama.
  • 1:43 - 1:46
    teks akan mulai delapan tukik dari sebelah
    kiri, dan
  • 1:46 - 1:48
    delapan tukik di bawah bagian atas
    perangkat.
  • 1:48 - 1:52
    Tetapi jika anda memiliki latar belakang
    warna untuk TampilanTeks,
  • 1:52 - 1:55
    maka pengguna akan dapat melihat
    TampilanTeks yang sebesar ini.
  • 1:55 - 1:59
    Sedangkan pada perangkat lainnya,
    TampilanTeks hanya akan sebesar ini.
  • 1:59 - 2:01
    Ini adalah sandi yang menampilkan blok
    pada tampilan.
  • 2:02 - 2:07
    Pada TampilanTeks Elemen XML, anda akan
    mengumumkan atribut baru yang menyatakan,
  • 2:07 - 2:11
    android titik dua blok sama dengan delapan
    tukik dalam tanda tanya.
  • 2:11 - 2:12
    Anda dapat memilih ukuran yang anda
    inginkan
  • 2:12 - 2:15
    blok, selama itu adalah nilai tukik.
  • 2:15 - 2:19
    Ketika kita menspesifikasi delapan tukik
    pada blok, maka akan menambahkan delapan
    tukik ke kiri,
  • 2:19 - 2:21
    atas, bawah, dan tepi kanan dari TampilanTeks.
  • 2:22 - 2:25
    Daripada menggunakan atribut blok android umum,
  • 2:25 - 2:29
    anda juga dapat membaginya ke kiri, kanan,
    atas atau bawah.
  • 2:29 - 2:33
    Intinya, keempat garis sandi dapat
    melakukan hal yang sama dengan satu garis
  • 2:33 - 2:36
    Meskipun demikian, kontrol berbutir halus
    ini memberikan anda blok yang berbeda
  • 2:36 - 2:39
    nilai untuk kiri atau kanan, atau atas
    atau bawah.
  • 2:39 - 2:43
    Anda tidak harus memiliki nilai blok yang
    sama untuk keempat arahnya.
  • 2:43 - 2:47
    Nilai default untuk blok adalah nol, jadi
    jika anda arahkan ke kiri, kanan, dan
  • 2:47 - 2:52
    blok atas, tetapi tidak ke bawah, maka
    akan menjadi tukik nol untuk blok bawah.
  • 2:52 - 2:56
    Untuk menentukan pias, anda menambahkan
    atribut lagi ke TampilanTeks.
  • 2:56 - 3:00
    Nama atributnya android titik dua tata
    letak garis bawah pias kita dapat
  • 3:00 - 3:03
    menjadikanya sama dengan, contohnya,
    delapan tukik.
  • 3:03 - 3:07
    Ini akan memindahkan TampilanTeks anak
    delapan tukik dari induk semua tepi.
  • 3:07 - 3:12
    Jika ada TampilanTeks anak yang lain di
    atasnya, maka dengan memiliki pias akan
  • 3:12 - 3:15
    mendorong TampilanTeks delapan tukik ke
    bawah TampilanTeks yang pertama.
  • 3:16 - 3:19
    Jika dapat memiliki pias dengan mendorong
    kolom ke sekitar
  • 3:19 - 3:20
    tampilan ini.
  • 3:20 - 3:24
    Tidak ada tampilan lain yang dapat masuk ke
    dalam area delapan tukik di sekitarnya.
  • 3:24 - 3:28
    Atau anda juga dapat membagi tata letak
    pias ke dalam keempat arahnya,
  • 3:28 - 3:32
    tata letak pias kiri, tata letak pias
    kanan, atas dan bawah.
  • 3:32 - 3:36
    Jika anda tidak menentukan salah satu
    nilainya, maka akan menjadi default nol.
  • 3:36 - 3:39
    Ingatlah bahwa TampilanTeks adalah yang
    memposisikan
  • 3:39 - 3:42
    anakan berdasarkan pias, anda dapat
    melihat atributnya.
  • 3:42 - 3:45
    Mereka dimulai dengan tata letak garis
    bawah untuk pias.
  • 3:45 - 3:48
    Dengan demikian, anda mengerti bahwa
    TampilanGrup adalah yang menangani posisi
  • 3:48 - 3:49
    tampilan tersebut.
  • 3:50 - 3:53
    Blok dan pias dapat diaplikasikan ke
    semua tampilan.
  • 3:53 - 3:56
    Mari kini kita praktekkan atribut yang
    baru saja kita pelajari.
  • 3:56 - 3:58
    Di sini saya memiliki tiga TampilanTeks
    dalam tata letak linier.
  • 3:58 - 4:01
    Mereka semua dipadatkan ke tepi kiri
    layar, jadi
  • 4:01 - 4:02
    Saya ingin menambah sedikit ruang.
  • 4:03 - 4:05
    Mari kita mulai dengan mencoba menambah
    pias.
  • 4:06 - 4:08
    Bagus, sekarang ada ruang tambahan di
    TampilanTeks.
  • 4:09 - 4:11
    Saya akan membuat hal yang sama pada kedua
    TampilanTeks lainnya.
  • 4:12 - 4:17
    Menariknya, ini adalah 16 tukik di atas,
    tetapi sebenarnya ini 32 tukik karena
  • 4:17 - 4:20
    mendapatkan delapan tukik pias bawah dari
    TampilanTeks pertama dan
  • 4:20 - 4:23
    delapan tukik pias atas dari TampilanTeks
    kedua.
  • 4:23 - 4:25
    Jika kita ingin spasinya konsisten, maka
  • 4:25 - 4:30
    selalu buat 16 tukik diantara masing-masing
    tampilan lalu ubah piasnya di sini.
  • 4:30 - 4:33
    Saya dapat memecahnya menjadi nilai pias
    individu.
  • 4:33 - 4:38
    Dengan kode ini, saya memiliki pias kiri
    16 tukik dan pias atas 16 tukik.
  • 4:38 - 4:41
    Tidak ada pias bawah dari TampilanTeks
    pertama, jadi
  • 4:41 - 4:43
    spasi diantaranya adalah benar 16 tukik.
  • 4:43 - 4:47
    Hal yang sama akan dilakukan pada
    TampilanTeks terakhir.
  • 4:47 - 4:49
    Bagus, sekarang semua spasi vertikal
    menjadi sama.
  • 4:50 - 4:53
    Sebelumnya ketika saya mengatakan kita me-
    nambahkan spasi putih ke sisi tampilan ini,
  • 4:53 - 4:56
    secara teknis spasi adalah transparan.
  • 4:56 - 4:59
    Anda dapat melihat apa yang ada di
    belakangnya.
  • 4:59 - 5:02
    Dalam kasus ini kita memiliki latar
    belakang abu-abu pada TampilanGrup.
  • 5:02 - 5:05
    Tata letak akan tampak sama dengan
    perangkat terlepas kita memakai pias atau
  • 5:05 - 5:09
    blok, karena dalam hal ini kita tidak
    memiliki latar berwarna di TampilanTeks.
  • 5:10 - 5:12
    Mari tambahkan dan lihat di mana batas
    dari setiap tampilannya.
  • 5:13 - 5:16
    Sekarang ada latar berwarna pada
    TampilanTeks pertama.
  • 5:16 - 5:20
    Ketika kita menambahkan pias kiri dan atas,
    kita melihat bahwa TampilanGrup mendorong
  • 5:20 - 5:23
    TampilanTeks sebanyak 8 ke atas dan 8 ke
    bawah.
  • 5:23 - 5:27
    Kita dapat mengubahnya ke blok, dan kini
    kita melihat TampilanTeks lebih besar dan
  • 5:27 - 5:30
    mengambil 8 tukik spasi ke kiri dan atas.
  • 5:31 - 5:33
    Jadi secara visual, akan terlihat berbeda
    pada perangkat,
  • 5:33 - 5:35
    terlepas anda memiliki blok atau pias.
  • 5:35 - 5:38
    Jika ada latar warna pad TampilanTeks ini.
  • 5:38 - 5:41
    Kita dapat melakukan yang sama untuk
    tampilan lain jadi dapat terlihat juga.
  • 5:42 - 5:45
    Menambahkan nilai pias dan blok tidak
    hanya membatasi tampilan anak ini,
  • 5:45 - 5:48
    anda juga dapat menambahkannya ke
    TampilanGrup.
  • 5:48 - 5:51
    Jika saya menambahkan nilai blok untuk
    tata letak linier.
  • 5:51 - 5:56
    Maka anda dapat melihat pergeseran tampilan
    sebanyak 16 tukik pada semua arah.
  • 5:56 - 5:59
    Saya menyinggungnya agar anda dapat me-
    netapkan suatu angka untuk blok atau pias.
  • 5:59 - 6:01
    Tetapi bagaimana cara mengetahui nilai
    yang harus dipilih?
  • 6:01 - 6:05
    Panduan rancangan bahan akan merekomendasi-
    kan anda untuk menggunakan peningkatan
  • 6:05 - 6:06
    sebanyak 8 tukik.
  • 6:06 - 6:09
    Ini adalah pengetahuan lanjutan, tetapi
    intinya kami ingin
  • 6:09 - 6:13
    komponen kami berjajar di layar bersama
    dengan kotak delapan tukik.
  • 6:13 - 6:16
    Kotak memang sebenarnya tidak muncul di
    layar, tetapi
  • 6:16 - 6:18
    jika anda ingin menempatkan teks di sini,
  • 6:18 - 6:21
    anda mungkin ingin memindahkannya seperti
    dua kotak ke kiri.
  • 6:21 - 6:25
    Dua kotak pada kotak tabel sama dengan
    16 tukik.
  • 6:25 - 6:29
    Pada layar surel ini, semua ikon berjajar
    pada garis ini.
  • 6:29 - 6:33
    Mereka menempati lebih dari 16 tukik dari
    tepi kiri layar ini, dan
  • 6:33 - 6:38
    semua teks di sini diposisikan melebihi
    dari 72 tukik dari tepi kiri layar ini.
  • 6:38 - 6:41
    Jadi anda dapat membayangkan isinya mulai
    mengikuti
  • 6:41 - 6:42
    garis tertentu di sini.
  • 6:42 - 6:44
    Ini adalah cara lain untuk
    menggambarkannya.
  • 6:44 - 6:47
    Tampilan ini diambil dari apl Google I/O,
  • 6:47 - 6:54
    kami memiliki isi yang berjajar pada
    garis 16 tukik, juga pada garis 72 tukik.
  • 6:54 - 6:57
    Ini pada dasarnya 72 tukik lebih banyak
    dari tepi kiri layar.
  • 6:57 - 6:59
    Dan pada tepi ini,
  • 6:59 - 7:03
    isinya berhenti 16 tukik sebelum tepi
    kanan layar.
  • 7:03 - 7:05
    Pada tablet, anda memiliki lebih banyak
    layar tetap, jadi
  • 7:05 - 7:07
    anda dapat memiliki lebih banyak blok.
  • 7:07 - 7:11
    Ini bisa melebihi 24 tukik dari tepi kiri
    layar, dan seterusnya untuk
  • 7:11 - 7:12
    nilai lainnya.
  • 7:12 - 7:17
    Alasan kami merekomendasikan nilai ini
    untuk memudahkan membaca daftar isi anda.
  • 7:17 - 7:20
    Misalnya, jika judul ini dipindahkan
    sebanyak beberapa piksel, dan
  • 7:20 - 7:24
    Subteks dipindahkan ke kanan sebanyak
    beberapa piksel,
  • 7:24 - 7:26
    maka akan menimbulkan tepi bergerigi di
    sini.
  • 7:26 - 7:30
    Dan akan mengganggu pengguna dalam membaca
    isi tulisan anda.
  • 7:30 - 7:35
    Jadi dengan membariskan semuanya, akan mem-
    permudah apl anda untuk dibaca dan digunakan.
  • 7:35 - 7:38
    Ini adalah beberapa contoh nyata dari
    penggunaan blok dalam pias.
  • 7:38 - 7:40
    Dalam tangkapan layar apl Kalender Google,
  • 7:40 - 7:44
    kita dapat melihat beberapa teks yang
    dipindahkan sedikit ke sini.
  • 7:44 - 7:47
    Ada pula sedikit spasi diantara acara
    kalender tersebut.
  • 7:47 - 7:48
    Jika kita melaksanakannya dengan
    menggunakan blok,
  • 7:48 - 7:52
    maka layar gambar akan diperluas ke dalam
    spasi kosong tersebut.
  • 7:52 - 7:56
    Sebaliknya jika menggunakan pias, maka ada
    sedikit zona cadangan di sekitar tampilan,
  • 7:56 - 7:58
    jadi ini mungkin merupakan pias.
  • 7:58 - 8:02
    Ini adalah tangkapan layar lainnya dari
    perincian halaman sebuah acara kalender.
  • 8:02 - 8:06
    Ada banyak teks di sini dan tampaknya
    lebih banyak celah dibanding yang lainnya.
  • 8:06 - 8:09
    Kita dapat memperbesar celahnya dengan
    menambahkan blok.
  • 8:09 - 8:13
    Untuk menambah celah di sini, anda dapat
    menambahkan blok bawah ke Tampilan Teks, atau
  • 8:13 - 8:15
    anda dapat menambahkan blok atas ke
    tampilan ini.
  • 8:16 - 8:18
    Semuanya dapat dilakukan.
  • 8:18 - 8:21
    Atau anda bahkan dapat melakukannya
    menggunakan pias tata letak.
  • 8:21 - 8:24
    Anda tidak dapat membedakan antara
    menggunakan pias tata letak atau blok
  • 8:24 - 8:28
    dalam kasus ini, karena latar teks yang
    digunakan transparan.
  • 8:28 - 8:31
    Kini giliran anda untuk berlatih
    menggunakan blok berbeda dan
  • 8:31 - 8:32
    nilai pias.
  • 8:32 - 8:35
    Kami telah menyediakan beberapa sandi awal
    untuk anda mulai dengan tautan di bawah.
  • 8:35 - 8:39
    Jika anda nyaman dengan nilai blok dan
    pias, silahkan lanjutkan dan
  • 8:39 - 8:40
    mencoba membuat tata letak ini.
  • 8:41 - 8:46
    Oh ya, teks ini terletak 16 tukik dari
    sisi sini.
  • 8:46 - 8:49
    Tetapi hanya delapan tukik diantara dua
    TampilanTeks.
  • 8:49 - 8:51
    Jika sudah selesai, centang kotak ini.
Title:
02-20 Padding vs. Margin
Description:

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

Indonesian subtitles

Revisions