Home > Others > iPhone devel untuk pemula day #2: Aplikasi sederhana

iPhone devel untuk pemula day #2: Aplikasi sederhana

OK, sekarang kita akan membuat aplikasi sederhana, bukan aplikasi sih sebenarnya, cuma view aja, dan belum ada interaksi nya. View ini akan menampilkan sebuah gambar secara full screen dan akan meng-handle orientation, artinya jika nanti nya iPhone di rotate ke kanan/kiri maka screen akan otomatis menyesuaikan. Note: tampilan screen terbagi 2 jenis, potrait (tegak berdiri), dan landscape/melebar.

Let’s do it…

  1. Jalankan Xcode, New Project –> View-based Application, beri nama Hello
  2. Pada panel kiri (Group & Files), expand pada bagian Hello –> Resources, klik HelloViewController.xib, maka Interface Builder (IB) akan otomotatis membuka file tersebut, dan menampilkan layar kosong.
  3. Selanjutnya IB, buka Tools –> Library, tambahkan (dengan drag and drop) Navigation Bar ke dalam screen, posisi kan pada bagian atas,  klik 2 kali pada text ‘Title’, ganti menjadi ‘Hello’.
  4. Kemudian tambahkan Image VIew (UIImageView) ke dalam screen, posisi kan agar pas memenuhi seluruh space yang tersisa.

    Insert Image View

    Insert Image View

  5. Selanjutnya untuk menambahkan image ke dalam project, buka kembali Xcode, lalu pada panel kiri, klik kanan pada bagian Hello –> Add –> New Group, beri nama Images. Klik kanan pada bagian Images –> Add –> Existing files… lalu pilih gambar yg ingin di masukkan, jangan lupa centang pilihan “Copy items into destination’s group”.

    Insert Image

    Insert Image

  6. Kembali ke IB, pilih UIImageView yang ada di screen, lalu pilih Tools –> Attributes Inspector, expand pada bagian Image View, lalu isikan nama file gambar yg tadi dimasukkan, kalo di gw nama nya wall.jpg. Lalu pada bagian View –> Mode, pilih Aspect Fill.

    Image View Attributes

    Main screen

    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .

    .
    .
    .

    Note: Agar gambar tidak menimpa header, Anda dapat mengatur urutan object nya.

    Urutan objek

    Urutan objek

  7. Sekarang, kembali ke Xcode dan coba jalankan program, Build and Go. Setelah simulator dijalankan, pilih Hardware –> Rotate Right/Left untuk melihat landscape orientation.
    Potrait

    Potrait

    Landscape

    Landscape

    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .
    .

    Terlihat bahwa saat landscape orientation, view tidak berubah dan tidak menyesuaikan, berikut nya kita akan meng-handle orientation.

  8. Pada Xcode, pilih Hello –> Classes –> HelloViewController.m, cari bagian shouldAutorotateToInterfaceOrientation, buang bagian komentar untuk mengaktifkan fungsi ini, lalu pada return ubah menjadi YES.
    .
  9. Sip, sekarang jalankan kembali program nya, seharusnya orientation sudah berfungsi.
    .

.

.

.

.

.

.

.

.

.

.

Mission accomplished…

Advertisements
Categories: Others Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: