Bagaimana Membangun Apps iPad dengan Xcode dan Interface Builder

Diposting oleh Muhammad fazri Sabtu, 31 Maret 2012

Membuat Proyek

Membuat proyek dimulai dengan peluncuran Xcode dan menggunakan menu File untuk membuat proyek baru.
Untuk aplikasi ini kita ingin membuat aplikasi berbasis View. Pastikan untuk memilih iPad, karena keluarga perangkat default adalah iPhone. Jangan khawatir, proyek Anda akan membuat kode yang kompatibel dengan kedua perangkat-ini seleksi hanya berarti bahwa Anda akan menggunakan tata letak iPad sebagai default untuk Interface Builder.
Bagian berikutnya dari proyek wizard meminta Anda untuk nama proyek. Aku menyebutnya mine GrandeCalc HD dan memberikannya namespace com.jherrington.calculatorhd. Anda dapat menyebutnya apa pun dengan nama yang Anda suka.
Bila proyek ini dibuat, Anda akan melihat sesuatu seperti ini:

Ini menunjukkan dua utama Objective-C kelas yang mendorong aplikasi. Kelas Objective-C memiliki dua komponen, yang pertama adalah definisi kelas interface (termasuk hal-hal seperti variabel anggota, properti, dan metode umum), ini adalah dalam .h file header. Yang lainnya adalah implementasi kelas dalam .m file.
Yang pertama dari dua kelas Anda adalah mendelegasikan aplikasi. Ini adalah kelas yang menangani aplikasi-centric acara seperti memulai, mematikan, dan sebagainya. Kami tidak akan menyentuh kelas itu sama sekali. Yang lainnya adalah controller tampilan. Ini adalah kelas yang kait sampai ke elemen interface dalam melihat dan menanggapi pengguna menekan pada mereka. Kami akan menambahkan beberapa kode Objective-C di sana.
Sekarang setelah kita memiliki kerangka kode aplikasi kita, saatnya untuk membangun interface. Mulailah dengan mencari di bagian Sumber Daya proyek seperti yang ditunjukkan di bawah ini.
Area tampilan pandang didefinisikan dalam .xib file. Ini adalah interface pembangun file yang lokal  versi interface. Bahwa file termasuk semua kontrol, tata letak dan ukuran, teks mereka, tag, koneksi ke Objective-C kelas yang sesuai, dan sebagainya.
Kita mulai mengedit file tersebut dengan mengklik dua kali.

Membangun Interface

Double-klik .xib file akan memunculkan Interface Builder. Setelah itu, Anda akan melihat tiga jendela. Salah satunya adalah jendela besar yang berisi isi dari pandangan, sebuah jendela kecil kedua memiliki toolbox elemen interface pengguna yang Anda lihat di bawah.

Di sinilah kita akan meraih menampilkan teks dan tombol untuk kalkulator kami.
Jendela ketiga menunjukkan isi dari .xib file seperti terlihat di sini
Jendela ini akan menjadi penting ketika kita menghubungkan tombol dan label untuk kelas Objective-C yang melakukan semua pekerjaan. Dalam hal ini, objek Responder Pertama benar-benar mewakili kelas Objective-C yang akan menangani semua peristiwa.
Langkah berikutnya adalah untuk drag dan drop beberapa tombol dan UITextField ke tampilan, dan kemudian mulai mengedit mereka. Anda dapat lay out dan tombol gaya Anda namun Anda inginkan; titik satunya kunci adalah untuk mengatur nilai dari setiap tombol Tag digit untuk nilai numerik dari tombol. Dengan cara ini, kita akan dapat menggunakan event handler sama untuk setiap tombol menggunakan nilai tag pada kode kita sebagai nilai numerik yang relevan. Berikut adalah cara menetapkan nilai Tag dari tombol 6 nomor, misalnya:
Tata letak saya akan tampak seperti ini
Jangan khawatir jika terlihat sedikit berbeda. Selama semua tombol yang relevan dan label berada di tempat, kita akan mampu menyatukan itu dan membuatnya menjadi sebuah kalkulator fungsional.
Ada satu langkah terakhir untuk mengurus sebelum kita melanjutkan untuk mengembangkan logika aplikasi kita: kita ingin memastikan interface kami menangani perubahan orientasi perangkat (dari portrait ke landscape, atau sebaliknya) lunak. Anda dapat mensimulasikan tampilan interface aplikasi Anda dengan memilih Interface Simulasikan dari menu File. Setelah simulator telah meluncurkan, coba putar kiri dan kanan iPad simulasi dengan cmd-kiri atau Cmd-kanan. Setiap elemen dalam tata letak Anda memiliki seperangkat pilihan yang menentukan bagaimana ia akan menanggapi perubahan dalam orientasi perangkat. Pilih salah satu tombol Anda, kemudian pilih ikon di bagian atas jendela properti. Anda ingin menyesuaikan pengaturan Anda untuk terlihat seperti ini:
Bagian penting adalah Autosizing. Ini mendefinisikan bagaimana elemen perubahan bentuk dan posisi selama ulang tata letak interface. Garis-garis sepanjang tepi kotak menentukan apakah posisi dari elemen relatif tetap atau mengambang untuk setiap tepi layar. Kontrol pada bagian dalam kotak elemen menentukan apakah perubahan tinggi atau lebar pada tata letak ulang. Untuk tombol dan menampilkan teks, menentukan bahwa mereka sedang mengambang dan bahwa mereka perubahan baik lebar dan tinggi. Untuk melakukan ini, pastikan kedua anak panah di dalam kotak merah padat, dan bahwa garis luar kotak yang putus-putus. Setelah itu selesai, uji interface lagi: seharusnya terlihat baik di kedua modus potret dan landscape.
Dengan tata letak dilakukan UI, saatnya untuk kembali ke Xcode untuk bekerja di Objective-C.

Logika yang

Objective-C memiliki dua kelas tampilan elemen kritis; IBAction dan IBOutlet s. IBAction adalah metode yang merespon event (misalnya, sentuhan tombol). IBOutlet adalah properti yang kelas digunakan untuk terhubung ke elemen interface pengguna (seperti nomor label dalam kalkulator). Jika Anda ingin mendengarkan untuk acara, Anda akan ingin menambahkan IBAction s. Jika Anda ingin mengubah keadaan interface, atau membaca kondisi saat ini, Anda harus IBOutlet s.
Karena IBAction s dan IBOutlet s adalah publik, mereka pergi ke header file. File header untuk tampilan kalkulator terlihat seperti ini:
  1. #import
  2. @interface GrandeCalc_HDViewController : UIViewController {
  3.     IBOutlet UITextField* numberDisplay;
  4.     float heldValue;
  5.     int lastOpDirection;
  6. }
  7. @property (nonatomic, retain) UITextField* numberDisplay;
  8. -(IBAction)numberClicked:(id)sender;
  9. -(IBAction)dotClicked:(id)sender;
  10. -(IBAction)plusClicked:(id)sender;
  11. -(IBAction)minusClicked:(id)sender;
  12. -(IBAction)equalsClicked:(id)sender;
  13. @end

Outlet satunya adalah numberDisplay lapangan, yang terhubung dengan menampilkan nomor di dalam view. Ada kemudian lima tindakan, ini sesuai masing-masing untuk nomor yang ditekan, dan titik, ditambah, dikurangi, dan sama dengan tombol yang ditekan. Dalam setiap kasus, sender objek dilewatkan bersama. Ini sender adalah elemen UI yang dihasilkan acara tersebut. Sebagai contoh, ini bisa menjadi tombol angka yang ditekan.
Karena semua tombol nomor pergi ke event handler yang sama, kita akan menggunakan nilai Tag dari tombol-tombol untuk membedakan nilai-nilai numerik mereka. Dalam kasus titik, ditambah, dikurangi, dan sama, kami hanya akan mengabaikan sender , karena kita hanya akan hook yang sampai elemen UI tunggal.
Jika Anda baru untuk Objective-C, Anda harus mencatat bahwa variabel anggota (seperti numberDisplay , heldValue , dan lastOpDirection ) didefinisikan dalam @interface blok. Properti dan metode yang didefinisikan setelah itu. Dalam hal ini, ada satu properti, numberDisplay , dan lima metode umum. Para numberDisplay properti akan digunakan oleh interface untuk mengatur dan mendapatkan pointer ke elemen objek menampilkan nomor di UI.
Pelaksanaan untuk melihat, yang diadakan di .m file, ditunjukkan di bawah ini:
  1. #import ”GrandeCalc_HDViewController.h”
  2. @implementation GrandeCalc_HDViewController
  3. @synthesize numberDisplay;
  4. - (BOOL)shouldAutorotateToInterfaceOrientation:
  5.   (UIInterfaceOrientation)interfaceOrientation {
  6.     return YES;
  7. }
  8. - (void)didReceiveMemoryWarning {
  9.     [super didReceiveMemoryWarning];
  10. }
  11. - (void)dealloc {
  12.     [super dealloc];
  13. }
  14. -(IBAction)numberClicked:(id)sender {
  15.     UIButton *buttonPressed = (UIButton *)sender;
  16.     int val = buttonPressed.tag;
  17.     if ( [numberDisplay.text compare:@"0"] == 0 ) {
  18.         numberDisplay.text = [NSString
  19.          stringWithFormat:@"%d", val ];
  20.     } else {
  21.         numberDisplay.text = [NSString
  22.          stringWithFormat:@"%@%d", numberDisplay.text, val ];
  23.     }
  24. }
  25. -(IBAction)dotClicked:(id)sender {
  26.     numberDisplay.text = [NSString stringWithFormat:@"%@.", numberDisplay.text ];
  27. }
  28. -(IBAction)plusClicked:(id)sender {
  29.     float curValue = [numberDisplay.text floatValue];
  30.     numberDisplay.text = [NSString stringWithString:@"0" ];
  31.     heldValue = curValue;
  32.     lastOpDirection = 1;
  33. }
  34. -(IBAction)minusClicked:(id)sender {
  35.     float curValue = [numberDisplay.text floatValue];
  36.     numberDisplay.text = [NSString stringWithString:@"0" ];
  37.     heldValue = curValue;
  38.     lastOpDirection = -1;
  39. }
  40. -(IBAction)equalsClicked:(id)sender {
  41.     float newValue = heldValue +
  42.        ( [numberDisplay.text floatValue] * lastOpDirection );
  43.     numberDisplay.text = [NSString
  44.         stringWithFormat:@"%g", newValue ];
  45.     heldValue = 0.0f;
  46.     lastOpDirection = 0;
  47. }
  48. @end

Sekali lagi, jika Anda baru ke Objective-C, semua ini akan mengambil beberapa membiasakan diri, tapi meskipun sintaks ini sedikit aneh, Anda harus dapat melihat beberapa pola berorientasi obyek akrab bagi Java dan C + +.
Hanya browsing di kode, Anda dapat melihat bahwa setiap metode dimulai dengan dikurangi dan kemudian memiliki deklarasi method. Minus berarti bahwa itu adalah metode objek. Ditambah A akan menunjukkan metode kelas. Sintaks dari metode ini adalah persis sama seperti pada file header, kecuali bahwa dalam kasus ini ada juga tubuh untuk metode ini.
Dalam setiap metode, Anda akan menemukan Objective-C kode untuk menerapkan metode ini. Dalam kode itu, Anda akan menemukan operasi dasar C bahwa Anda mungkin akrab dengan, misalnya, operator aritmatika, dan cara bahwa variabel didefinisikan. Bagian yang benar-benar unik dalam sintaks pemanggilan berorientasi objek Objective-C.
Mari kita lihat:
  1. [NSString stringWithString:@"0" ]
Ini berarti membuat sebuah string baru dengan nilai ’0 ‘. Para @ simbol menetapkan bahwa kita ingin sebuah string Objective-C, sebagai lawan C string. Dan dalam hal ini, kita memanggil metode kelas pada NSString .
Sekarang lihat perintah ini:
2. [NSString stringWithFormat:@"%@%d", numberDisplay.text, val ];
Ini kira-kira setara dengan panggilan untuk sprintf . Format string dalam hal ini mengambil nilai teks saat ini dari tampilan numerik dan menambahkan nilai digit yang ditekan. Semua kurung adalah membingungkan pada awalnya, tetapi sekali Anda menjadi akrab dengan mereka, mereka akan mulai masuk akal.
Sekarang dengan kode di tangan dan interface diatur, saatnya untuk menghubungkan dua menggunakan Interface Builder. Sebelum melakukan itu, Anda akan perlu untuk membangun proyek Anda dengan mengklik Membangun dan Jalankan di Xcode, ini akan memastikan bahwa Interface Builder memiliki semua input dan output yang tersedia untuk itu, sehingga Anda dapat menghubungkan mereka dengan komponen interface Anda.

Menghubungkan Interface dengan Code

Interface Builder terlihat untuk IBOutlet dan IBAction elemen dari kelas Objective-C melihat, dan memberikan kita sebuah interface untuk kawat kontrol untuk mereka. Untuk menghubungkan tombol, pertama pilih tombol itu, kemudian pergi ke panel koneksi dari jendela Inspektur (diwakili oleh lingkaran biru dengan panah).
Dari sini, Anda dapat melihat semua acara yang berkaitan dengan tombol. Anda dapat klik pada salah satu lingkaran dan tarik ke item Pemilik File di jendela isinya. Untuk tombol, kita akan menggunakan “Touch Up Di dalam” acara. Ketika Anda drop acara anda di Pemilik File, Anda akan melihat popup yang menunjukkan semua tersedia IBAction metode. Hanya memilih satu yang sesuai: numberClicked untuk tombol angka, plusClicked untuk tanda plus, dan sebagainya. Menghubungkan semua tombol dengan cara yang sama.
Langkah terakhir adalah untuk menghubungkan numberDisplay variabel untuk menampilkan nomor elemen UI. Mulailah dengan pergi ke jendela isi dan pilih Pemilik File itu. Itu harus menunjukkan sesuatu seperti gambar di bawah ini di jendela Inspektur.
Anda kemudian dapat drag konektor untuk numberDisplay untuk elemen interface pengguna di daerah tata letak untuk menghubungkan dua.
Pada titik ini Anda dapat menyimpan interface dan Interface Builder dekat. Kemudian mencoba dan menjalankan aplikasi Anda dari IDE Xcode. Ini harus bekerja lebih atau kurang seperti yang Anda harapkan kalkulator untuk bekerja. Tentu saja, logika aplikasi kami sangat sederhana, ada banyak cara yang bisa memperbaiki perilaku app.
Jika kalkulator gagal untuk bekerja, masalah kemungkinan dalam koneksi yang Anda didefinisikan antara interface pengguna (xib file.) Dan file Objective-C. Ikuti instruksi terakhir untuk menambahkan breakpoints dengan metode klik pada kelas Objective-C, dan melihat apakah metode yang semakin disebut. Jika mereka tidak, kembali ke Interface Builder untuk memastikan bahwa Anda kabel sampai peristiwa yang benar untuk IBAction metode dalam kelas Objective-C.

sumber : http://ilmuti.com/2011/12/16/bagaimana-membangun-apps-ipad-dengan-xcode-dan-interface-builder/

Label: ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)