Perbedaan height dan width dalam komponen android

Apa sih Height dan Width di React Native ?

Pada dasarnya, Height dan Width berfungsi untuk mengatur Tinggi dan Lebar baik pada React Native maupun pada platform yang lain seperti CSS dan HTML. Height dan Widht berperan layaknya bingkai untuk program yang kamu buat. Dalam React Native, ada 2 cara yang bisa kamu terapkan untuk mengatur komponen Height dan Width yaitu :

Baca Juga :

• 5 menit Saja! Cara Install React Native di Sistem Operasi Windows
• Ini yang Harus Kamu Ketahui Tentang Open Source!

1. Fixed Dimension

Fixed Dimension merupakan cara mudah mengatur komponen Height dan Width. Karena output yang ditampilkan sesuai dengan pengaturan yang kamu terapkan pada Height dan Width. Untuk lebih mudahnya mari kita cek code berikut :

Dan beginilah tampilan outputnya :

Pada style pertama, saya mengatur agar backgroundnya berwarna “powderblue” dengan height dan width : 100. Karena Fixed Dimension bersifat tetap (Fixed) maka seperti yang kamu lihat background Powderblue hanya memenuhi sebagian layar saja, sesuai seperti ukuran yang saya terapkan pada codingnya.

Baca Juga : Kelebihan dan Kekurangan Sistem Graphic User Interface (GUI)!

2. Flex Dimension

Berbeda dengan Fixed Dimension, Flex Dimension berfungsi layaknya baju dengan bahan yang bisa melebar sesuai ukuran badan si pengguna nya. Ukuran pada Flex Dimension akan mengerucut maupun membesar sesuai ruang yang tersedia.

Jadi meskipun kamu set height maupun width nya hingga “1000”, sistem akan secara otomatis menyesuaikan dengan ukuran layar.

Untuk Style Flex Dimension, Style dengan value tertinggi akan mendapatkan space lebih banyak dibandingkan value yang kecil. Untuk lebih jelasnya mari kita lihat Code dibawah ini :

Baca Juga :Mengenal Command Line Interface (CLI) dan Kelebihannya!

Bisa kamu lihat, pada style pertama saya beri value (flex) nya 1, dan ditambah 1 untuk setiap style berikutnya. Iniliah hasil outputnya :

Karena value pada nilai pertama 1, maka ia hanya dapat space atau ruang lebih kecil dari style yang lainnya. Semakin besar valuenya maka semakin besar pula ruang yang akan diberikan.

Dan karena Flex dimension bersifat layaknya baju yang bisa mengecil maupun membesar sesuai ukuran badan kamu, maka meskipun ukuran height dan width kecil sistem akan secara otomatis menyesuaikannya dengan ukuran layar.

Berikutnya Baca : 5 menit Saja! Cara Install React Native di Sistem Operasi Windows

Sumber : javapoint.com

Mendukung berbagai ukuran layar

Perangkat Android hadir dalam berbagai bentuk dan ukuran sehingga tata letak aplikasi Anda harus bersifat fleksibel. Artinya, tata letak tidak boleh ditentukan dengan dimensi mutlak yang mengasumsikan rasio tinggi lebar dan ukuran layar tertentu; tetapi harus mampu merespons berbagai ukuran dan orientasi layar tanpa masalah.

Dengan mendukung berbagai ukuran layar, aplikasi nantinya dapat tersedia bagi sebanyak mungkin pengguna di berbagai perangkat cukup dengan satu APK. Selain itu, memungkinkan aplikasi untuk berfungsi pada berbagai ukuran layar juga akan memastikan bahwa aplikasi bisa menangani perubahan konfigurasi jendela di perangkat, seperti ketika pengguna mengaktifkan mode multi-aplikasi.

Halaman ini menunjukkan cara mendukung berbagai ukuran layar dengan teknik berikut:

• Menggunakan dimensi tampilan yang memungkinkan ukuran tata letak untuk diubah
• Membuat tata letak UI alternatif sesuai konfigurasi layar
• Menyediakan bitmap yang bisa direntangkan dengan tampilan

Namun, perlu diketahui bahwa menyesuaikan berbagai ukuran layar tidak menjadikan aplikasi Anda kompatibel dengan semua faktor bentuk Android. Ada beberapa langkah tambahan yang perlu dilakukan untuk mendukung perangkat Android Wear, TV, Auto, dan Chrome OS.

Untuk pedoman desain dalam membuat UI bagi ukuran layar yang berbeda, lihat panduan materi untuk UI yang responsif.

Teknik Dasar Tampilan Responsif pada Website

Ketika ingin menerapkan prinsip responsif pada tampilan aplikasi web, sebaiknya kita mulai berpikir dari peranti berukuran kecil. Dengan batasan – batasan yang dimilikinya, proses membangun tampilan responsif, jadi menantang. Nah, jika kita telah fokus pada peranti ukuran kecil, kita dapat dengan mudahnya menerapkan tampilan responsif pada seluruh jenis ukuran layar. Keren kan?

Relative Units

Konsep terpenting dalam penerapan tampilan responsif adalah fluiditas dan proporsionalitas.Halaman harus dapat menyesuaikan setiap ukuran yang kita tampilkan pada layar peranti yang berbeda-beda. Dengan menggunakan relative units, tampilan akan dapat mudah menyesuaikan dengan keadaan layar.

Contohnya kita ingin membuat sebuah elemen div dengan lebar sesuai dengan viewport pada browser.Kita bisa saja berasumsi dengan menerapkan lebar 1000px, misalnya, karena nilai tersebut cukup lebar untuk berbagai layar peranti. Maka kita menuliskan css seperti berikut:

Penggunaan unit PX tidaklah disarankan dalam kasus ini, karena unit PX sebaiknya digunakan untuk nilai yang tidak berubah-ubah. Jika kita ubah ukuran viewport lebih dari 1000px pada browser, maka tampilan tak seperti harapan kita.

Dengan mengubah satuan PX menjadi %, maka nilai width element div dapat menyesuaikan berdasarkan viewport yang tersedia.

Dengan begitu kita tak perlu khawatir tentang peranti apa yang akan mengakses website kita.

Typography Units

Dalam penerapan font, kita juga perlu menggunakan satuan relatif seperti em, rem, vw dan vh. Satuan tersebut dapat menyesuaikan ketika ukuran layar atau ukuran font itu sendiri diubah.

• em : Satuan relatif terhadap ukuran font sebuah elemen (2em berarti 2 kali ukuran font saat ini)
• ex: Satuan relatif terhadap tinggi font saat ini, satuan ini sangat jarang sekali digunakan.
• ch: Satuan relatif terhadap lebar dari karakter “0” nol.
• rem: Mirip seperti em, tetapi rem merupakan Satuan relatif terhadap ukuran font dari root element.
• vw: Satuan relatif terhadap 1% lebar viewport. Contoh 1vw = 1% dari lebar viewport. Satuan ini tidak support pada IE8 ke bawah.
• vh: Satuan relatif terhadap 1% tinggi viewport. Contoh 1vh = 1% dari tinggi viewport. Satuan ini tidak support pada IE8 ke bawah.

Mari kita beri contoh penggunaan unit relative dengan vw pada font.

Berdasarkan kode di atas, kita mengatur sebuah ukuran font element <h2> yang terdapat pada class .container dengan menggunakan satuan relatif vw. Dengan begitu ketika kita mencoba mengubah ukuran viewport, ukuran font tersebut akan menyesuaikan.

Set the Viewport

Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan peranti. Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan dengan layar komputer.

Sebelum adanya tablet ataupun handphone, halaman website didesain hanya untuk ukuran layar komputer. Dengan begitu banyak sekali website yang menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur sebuah viewport pada halaman website kita.

Mengatur viewport dapat melalui sebuah tag <meta> yang disisipkan pada header section berkas html.

Jika kita tidak ingin pengguna melakukan fitur zoom pada website, kita juga dapat mengaturnya dengan menuliskan viewport lebih lengkap.

Lebih jelasnya tentang gambaran fungsi penggunaan viewport, perhatikan saja dua contoh halaman berikut. Yang sebelah kiri tidak menerapkan viewport sedangkan sebelah kanan, sebaliknya. Mana yang lebih baik?

Set the Breakpoint

Dengan menetapkan sebuah breakpoint kita dapat mengatur sebuah styling element berdasarkan viewport. Maka dengan begitu konten yang kita tampilkan pada halaman dapat disesuaikan dengan berbagai peranti, baik itu tata letak ataupun ukuran font. Breakpoint dituliskan dalam styling atau CSS menggunakan @media query dan diikuti dengan ukuran viewport. Sebaiknya jangan menetapkan sebuah breakpoint berdasarkan kelas perangkat. Mendefinisikan breakpoint berdasarkan sebuah perangkat, produk atau brand tertentu akan menyulitkan kita dalam melakukan pemeliharaan (maintenance). Tentukanlah breakpoint berdasarkan lebar viewport. Tentukan nilai breakpoint untuk layar kecil, sedang dan besar.

Contohnya kita mempunyai sebuah html dengan susunan elemen seperti ini:

Kemudian pada styling/CSS kita menetapkan 3 breakpoint berdasarkan ukuran layar kecil, sedang dan besar.

Lihatlah perubahan yang terjadi ketika kita mengubah ukuran viewport.

Dalam GIF terlihat terdapat 3 perubahan tampilan.

Yang pertama ketika berada pada ukuran viewport besar, content box memiliki margin pada sebelah kiri dan kanannya, hal ini dikarenakan kita mengatur .container untuk menerapkan margin-left dan margin-left dengan nilai auto jika min-width bernilai 800.

Yang kedua ketika berada pada ukuran viewport sedang maka tidak ada lagi margin pada content box.

Dan yang ketiga ketika viewport dalam keadaan ukuran layar kecil maka box berwarna merah dan orange akan memiliki nilai lebar 100%. Kemudian jika tampilan viewport berada pada ukuran yang tidak kita tetapkan maka tidak ada @media query yang diterapkan, sehingga seluruh warna box memiliki nilai 100%.

Untuk kalian yang ingin mencobanya, silakan clone repository di akhir artikel ini ya.

SVG for Image Resources

Mengapa image resource khususnya ikon, harus menggunakan SVG? Sebabnya, SVG merupakan sebuah Scalable Vector Graphic, gambar yang dapat dituliskan dengan menggunakan bahasa XML. Dengan begitu ukuran resource tersebut sangatlah kecil karena pada dasarnya hanya sebuah baris kode. Selain itu tujuan utamanya adalah agar gambar yang ditampilkan dapat menyesuaikan dengan beberapa ukuran tanpa mengurangi kualitas gambar itu sendiri hal ini sangatlah berbeda jika kita menggunakan format gambar pada umumnya. Kita dapat dengan Responsif memasukan SVG pada situs web dengan menggunakan tag <object>.

Di dalam body tag <object> terdapat element image yang berfungsi sebagai image fallback atau gambar alternatif yang gunakan ketika browser tidak support dalam menampilkan svg.

Lihatlah perbedaan responsif gambar yang ditampilkan ketika kita menggunakan svg dan juga format gambar umum (png).

Menggunakan PNG sebagai resource

Menggunakan SVG sebagai resource

Saat berubah ukuran, gambar yang menggunakan format png, kualitas yang ditampilkan jadi berkurang. Sebaliknya, hal yang sama untuk gambar svg, kualitas yang ditampilkan, tidak berkurang. Apa pasal?Pada dasarnya SVG merupakan sebuah vector. Dari segi ukuran berkas pun, SVG lebih unggul.