Dalam tutorial ini, kita akan
membangun dan memperkenalkan Anda ke Interface Builder, pendamping Xcode
dirancang untuk memungkinkan Anda dengan cepat dan mudah mengembangkan
interface untuk aplikasi Anda. Dalam proses ini, kita akan membangun
sebuah aplikasi sederhana untuk iPad a big ol’ calculator kita akan
menyebutnya GrandeCalc HD.
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:
- #import
- @interface GrandeCalc_HDViewController : UIViewController {
- IBOutlet UITextField* numberDisplay;
- float heldValue;
- int lastOpDirection;
- }
- @property (nonatomic, retain) UITextField* numberDisplay;
- -(IBAction)numberClicked:(id)sender;
- -(IBAction)dotClicked:(id)sender;
- -(IBAction)plusClicked:(id)sender;
- -(IBAction)minusClicked:(id)sender;
- -(IBAction)equalsClicked:(id)sender;
- @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:
- #import ”GrandeCalc_HDViewController.h”
- @implementation GrandeCalc_HDViewController
- @synthesize numberDisplay;
- - (BOOL)shouldAutorotateToInterfaceOrientation:
- (UIInterfaceOrientation)interfaceOrientation {
- return YES;
- }
- - (void)didReceiveMemoryWarning {
- [super didReceiveMemoryWarning];
- }
- - (void)dealloc {
- [super dealloc];
- }
- -(IBAction)numberClicked:(id)sender {
- UIButton *buttonPressed = (UIButton *)sender;
- int val = buttonPressed.tag;
- if ( [numberDisplay.text compare:@"0"] == 0 ) {
- numberDisplay.text = [NSString
- stringWithFormat:@"%d", val ];
- } else {
- numberDisplay.text = [NSString
- stringWithFormat:@"%@%d", numberDisplay.text, val ];
- }
- }
- -(IBAction)dotClicked:(id)sender {
- numberDisplay.text = [NSString stringWithFormat:@"%@.", numberDisplay.text ];
- }
- -(IBAction)plusClicked:(id)sender {
- float curValue = [numberDisplay.text floatValue];
- numberDisplay.text = [NSString stringWithString:@"0" ];
- heldValue = curValue;
- lastOpDirection = 1;
- }
- -(IBAction)minusClicked:(id)sender {
- float curValue = [numberDisplay.text floatValue];
- numberDisplay.text = [NSString stringWithString:@"0" ];
- heldValue = curValue;
- lastOpDirection = -1;
- }
- -(IBAction)equalsClicked:(id)sender {
- float newValue = heldValue +
- ( [numberDisplay.text floatValue] * lastOpDirection );
- numberDisplay.text = [NSString
- stringWithFormat:@"%g", newValue ];
- heldValue = 0.0f;
- lastOpDirection = 0;
- }
- @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:
- [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.
![[Image: Capture1.JPG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_siehH11hrbbymfe57S5yQVOoXnOJL-q_dj6ARd9S4XGk3m5r5c4CiUtD7wFbcrOaaQAbSISdywFMQwfxlO5VQuDorFx1X-d5lmDKIGGFyciP-jRMFBAIZ0EJkzAgAh7xd9WT4=s0-d)
![[Image: Capture2.JPG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v3dgwo4xnM1nHTDjp_BOxbnk6UlWW1gmT_uNxv9OI0yVLqdaOJckIAIPHAm7T4kHF8nDlzWy91NT9vvdiUKBnqpUfn3qBUPVo5pFurMdeu7NFbabrMK83daPjjEaZRF25tJus=s0-d)
![[Image: Capture.JPG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_spNLRZPQ_zLNVlP-mFk2ja98ddAHVgpbdTs8ikOzncou5g5XqpOjcBhEAb2SE1ZULioiBTJP5u2j2x5buekIDgaERiv0ul-gH8IXQw7LeFxsbL3lbDQRnwYaPo-3HOvCsftA=s0-d)
![[Image: Capture.JPG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uVlSWj5_Yd26Xk5EOvJ4xNcemnwwYQ99_XYdnyHgTxbhnrF5nWH2qh60eYA6Jf-FAKhlbbwmerUQXYwOp3qPLB_HYuCK7zW2Ri6lQcaLuc87Z9oZx8LoLO7vI-0jAtZJAxBYw=s0-d)
![[Image: 261812_247337965277544_100000040266345_1...7237_n.jpg]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vDdPOknRu6Yys87nKPtjYztGzKw7SBMFswvgmZhaQlqLEPFH6QN4BqQUGixmndC-6CObINiueGKeEz438R3FZnHEtzFOKM2eO_2v_6YEA2Gft770FjPpuYtzVHqe_NqpzYu8H9MngaP_gIceB0REHXvquhGvactgFTJ6jWADTO4-b5tkRZ4zUUwEM9xX8J=s0-d)
![[Image: Capture.JPG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uqItGDxCU5_c5g1_PSNSLFMkGkOwoFpfVknnEHim5Ibf7CCZa2oV0XDfzacqVF8pqXIpDwz46JUP7v_qoOiQEfGtj6LCxtn3jnPbIA2gEhSCCTxFy1OQF6uJtyh-N-Baoj6zI=s0-d)
![[Image: Capture.JPG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uRfewRHbF2qUUfYASs1W-R5Sk-44jQGAJFxMAiE4K0F8BjS-ocA8UedVqcLZmwy-Vq_x9aNX_x4D8gacHm0g52akBCwXEm7IHdC737RJd_R7XqcEqQVBMQiahIaFXAOiZ6rOM=s0-d)
