Linear Layout, Relative Layout, Table Layout

12 views

Dalam pemprograman android, ada beberapa layout yang dipakai untuk menempatkan majemuk “view” menyerupai button dan text. Untuk menciptakan layout cukup mudah, melalui folder res/layout dalam project, tempatkan file .xml di dalam folder tersebut.

File .xml sanggup dibentuk dengan 2 cara :

  1. Buka Eclipse kamu
  2. Create File -> New  -> Android Application Project
  3. Klik kanan di folder res/layout -> New -> Android XML File

Atau

  1. Buat .txt di folder res/layout
  2. Rename file .txt menjadi .xml

Ada 3 macam layout(dari 6 macam) yang secara luas digunakan. Layout-layout tersebut yaitu :

1. Linear Layout

Linear Layout yaitu Layout yang umum digunakan, terutama bagi pemula. Layout ini menempatkan view secara horizontal atau vertical, bergantung pada instruksi yang digunakan.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent" android:orientation="vertical"tools:context=".MainActivity" ><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/hello_world" /><Button android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/click"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/hello_world" /><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/click"/></LinearLayout></LinearLayout>

Tampilan yang terjadi sesudah instruksi di eksekusi 

 

 

2. Relative Layout

Relative Layout mempunyai karakteristik menempatkan view secara relatif. Posisi dari setiap view bergantung kepada view yang lain. Mudahnya adalah, programmer mempunyai kebebasan untuk menempatkan view yang diinginkan. Penempatan satu view sanggup berupa di sisi kanan, kiri, atas, ataupun bawah dari view lain. Jika tidak di menetapkan di sisi mana view akan berada, maka sanggup terjadi penumpukan antara satu view dengan view yang lain, tentunya programmer tidak menginginkan hal itu terjadi bukan  . Jujur, ini yaitu layout kesukaan saya. Awal nya memang sulit, namun semakin gampang kalau sudah terbiasa.

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context=".MainActivity" ><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/hello_world" android:layout_alignParentLeft="true"android:id="@+id/tv1"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/click"android:layout_toRightOf="@id/tv1"/><Button android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/click2"android:layout_alignParentBottom="true"/></RelativeLayout>

 Tampilan yang terjadi sesudah instruksi di eksekusi

3. Table Layout

Table Layout mempunyai karakteristik yang menyerupai dengan pembuatan layout di HTML. Jika anda familiar dengan pemprograman web berjenis html, <table> dan <TableLayout /> yaitu 2 hal yang hampir sama. TableLayout mengatur tampilan menurut kolom dan baris. Dan jangan lupa untuk selalu menambahkan tag <TableRow /> kalau ingin menciptakan baris gres dalam layout.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff"android:shrinkColumns="*"  android:stretchColumns="*"><TableRow android:layout_height="wrap_content" android:layout_width="match_parent" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content"android:textSize="18sp" android:text="@string/hello_world"  android:layout_span="3"android:padding="18dip" android:background="#b0b0b0"android:textColor="#000"/> </TableRow> <TableRow android:id="@+id/tableRow1" android:layout_height="wrap_content" android:layout_width="match_parent"> <TextView android:id="@+id/tv1" android:text="@string/hello_world"android:layout_weight="1" android:background="#dcdcdc"android:textColor="#000000"android:padding="20dip" android:gravity="center"/> <Buttonandroid:id="@+id/but1" android:text="@string/click"android:layout_weight="1" android:background="#d3d3d3"android:textColor="#000000"android:padding="20dip" android:gravity="center"/> </TableRow> </TableLayout>

 Tampilan yang terjadi sesudah instruksi di eksekusi

 

Kurang lebih menyerupai itu. Masih banyak method yang sanggup di explore untuk menciptakan penempatan tiap view semakin bervariasi, yang mana kau sanggup membaca eksklusif dokumentasi nya di developer.android.com

Sebenarnya aku kurang suka memprogram layout dalam xml file. Yang lebih menarik yaitu memprogram dalam bentuk inisialisasi masing-masing layout secara “programmatically” alias di declare di file .java.

Semoga Bermanfaat.

 

 

LuthfanM

Blog gw

Author: 
    author
    No related post!