1 of 15

Pertemuan #5

User Interface #2

Program Studi: Teknik Informatika

PL401 Advanced Programming

Author: Muhamad Yusup, M.Kom.

2 of 15

Bahan Kajian

User Interface

  • Layout dengan Flexbox

​

3 of 15

Komponen Inti React Native

  1. View
  2. State
  3. Prop
  4. Style
  5. Flex Layout
  6. Handling Text Input
  7. Scroll View
  8. List View
  9. Navigator

4 of 15

Flex Layout

Layout Flex disediakan untuk memberikan tata letak yang bersih ke komponen. Child dari Component Layout ditentukan menggunakan Flexbox. Menggunakan properti flexDirection, alignItems, dan justifyContent kita dapat mengarsipkan tata letak yang tepat

​

5 of 15

Flex Layout

5.1. flexDirection:

Values: ('row ’,’ column ’)

Properti ini menentukan sumbu utama tata letak. Child Component harus diorganisir Secara horizontal (baris) atau Vertikal (kolom). Nilai default adalah kolom

​

​

6 of 15

Flex Layout

7 of 15

Flex Layout

8 of 15

Flex Layout

5.2. justifyContent:

JustifyContent menentukan distribusi child di Axis utama.

values: flex-start, flex-end, space-around, dan space-between.

Space-between menyediakan ruang yang sama antara children.

​

9 of 15

Flex Layout

10 of 15

Flex Layout

11 of 15

Flex Layout

5.2. alignItems:

alignItems menentukan penyelarasan children di secondary exis.

Values : (flex-start,center,flex-end, strecth)

flex-start : align at the start

center : align at the center,

flex-end : lign at the end,

stretch : stretched to fill.

​

12 of 15

Flex Layout

13 of 15

Flex Layout

14 of 15

Tugas

Buat Aplikasi dengan jumlah 9 flex box.

Lengkapi style dengan kreasi masing-masing.

​

15 of 15

Terima Kasih