Berikut ini adalah langkah-langkah untuk membuat tampilan view dengan variasi background dan image serta penjelasan mengenai tata letak tampilan (layout positioning) secara vertical dan horizontal.

1. Sama seperti pada penjelasan sebelumnya mengenai project “Hello world”, yaitu membuat project baru sesuai dengan namanya atau sesuai dengan project yang akan dibuat.

 

2. setelah project selesai dibuat, langkah selanjutnya adalah menuliskan beberapa baris kode program pada file app.js seperti di bawah ini :

 

3. Setelah selesai menuliskan kode program di atas, tambahkan file gambar dengan format (png/jpg) pada folder /resources/iphone/images/appcelerator.png untuk background iOS apps dan /resources/Android/images/appcelerator.png untuk background Android apps.

 

4. Jalankan program di atas (run as iPhone retina –> iOS simulator atau run as Android emulator(nexus 4 – 4.2.2-API 17) –> Genymotion emulator Android).

run-as-iphone-4                                run-as-android

 

5. Tampilan untuk hasil kode program yang mempunyai window dengan layout: ‘vertical’ –> (iOS/Android)

verticalView-iOS     VerticalView-Adroid

 

6. Tampilan untuk hasil kode program yang menggunakan Window dengan layout: ‘horizontal’ –> (iOS/Android)

HorizontalView-iOS     HorizontalView-Android

 

Keterangan :

Untuk mengubah tampilan view dari vertical window ke horizontal window cukup dengan mengubah attribut [layout: ‘vertical’] menjadi [layout: ‘horizontal’] pada variable win. 

code-vertical  ===>   code-horizontal

 

 

Penjelasan mengenai cara kerja tata letak (layout positioning) view pada window

Pada dasarnya layout positioning pada sebuah view di appcelerator terbagi atas 3 model, yaitu :

1. Absolute

Merupakan default mode tampilan sebuah view yang akan mengacu pada parentnya untuk menentukan point koodinat pada sisi kiri/kanan dan atas/bawah.

2. Vertical

Merupakan mode tata letak tampilan childs view yang tersusun secara vertikal dari atas ke bawah dan sebaliknya menyesuaikan dengan ukuran properti “Top” pada tiap view (offset value). Seperti contoh pada kode program di atas, untuk mengetahui perbedaan pada penggunaan view yang berada pada window dengan layout vertical/horizontal maka sebaiknya properti top, width, dan height dimasukkan sesuai dengan ukuran yang di inginkan.

3. Horizontal

Merupakan mode tata letak tampilan childs view yang tersusun secara horisontal dari kiri ke kanan dan sebaliknya. properti “left” childs view hampir sama properti top pada layout vertikal (offset value). baris view berikutnya akan ditambahkan ke kiri/kanan sesuai dengan ukuran properti yang dimasukan. perpindahan tata letak baris ke baris bawah berikutnya akan menyesuaikan dengan default lebar device yang digunakan.

Cara membuat tampilan view dengan variasi background, gambar dan tata letak (layout positioning)
Tagged on: