|
|
Metode dan Algoritma | Tutorial Membuat Aplikasi iPad iOS . Anda bisa melakukan konsultasi tentang Tutorial Membuat Aplikasi iPad iOS melalui form di samping kanan !!!
Mengembangkan aplikasi iPad sederhana
Yang Akan di buat
Dalam tutorial hari ini, saya akan menunjukkan Anda bagaimana untuk membuat sebuah proyek yang menggunakan iPad UISplitViewController untuk menampilkan konten dalam 2 panel terpisah. Kami juga akan menyentuh pada beberapa desain / UI pola-pola baru dan memberikan pengenalan secara keseluruhan untuk pemrograman iPad. Proyek ini akan didasarkan pada salah satu dari tutorial awal saya yang menampilkan daftar buah dalam UITableView dan dibor turun ketika mereka dipilih. Kami akan memperluas contoh itu dan menciptakan sesuatu yang akan terlihat seperti ini.
Menggunakan UISplitViewController untuk menampilkan UITableView di sebelah kiri dan UIView dengan UIImageView subview di sebelah kanan. Proyek ini sebenarnya cukup sederhana untuk membuat sebagai kode template menyediakan banyak kode yang kami butuhkan untuk memulai.
Memulai
1. Pastikan Anda telah men-download 3.2 SDK bentuk http://developer.apple.com/iphone/.
2. Download sumber daya yang dibutuhkan untuk proyek ini dan unzip mereka iPadHelloWorldResources.zip. (berisi file gambar dan plist kita akan menggunakan untuk memuat gambar)
Membuat Proyek
Memulai sebuah proyek untuk iPad tidak berbeda daripada memulai satu untuk iPhone. Ketika Anda membuka Xcode dan pilih File-> New Project, Anda akan melihat penambahan Berpisah Aplikasi Berbasis View. Pilih ini dan nama itu iPadHelloWorld.
Ini akan membuat aplikasi dasar dengan UITableView di sebelah kiri dan UIView di sebelah kanan. Ia bahkan akan mengisi meja dengan beberapa elemen sampel. Ini akan menambah file-file berikut untuk proyek Anda.
Berikut ini adalah deskripsi singkat dari masing-masing file:
iPadHelloWorldAppDelegate – ini mirip dengan setiap delegasi app. Jika Anda melihat dalam aplikasi: Metode didFinishLaunchingWithOptions, Anda akan melihat bahwa UISplitViewController sedang dialokasikan dengan MasterViewController dan DetailViewControllers.
MasterViewController – UITableViewController A, tidak ada yang mewah. Ini akan menangani pandangan di sisi kiri.
DetailViewController – ini menangani tampilan konten yang Anda lihat di sisi kanan. Kami akan memperbarui ini sebagai pengguna memilih baris yang berbeda dalam tabel ke kiri. Ini hanya rumah satu tampilan.
Pergi ke depan dan tekan Membangun dan Jalankan untuk memeriksa aplikasi. Jika Anda belum melakukannya, bermain-main dengan kontak iPad dan aplikasi pengaturan juga.
Catatan:
Bila Anda menjalankan aplikasi, Anda hanya akan melihat tampilan utama sejak simulator berjalan dalam mode vertikal. Untuk melihat tampilan sisi-by-side, memutar simulator dengan mengklik “Hardware -> Putar Kiri / Kanan”. Anda juga dapat menekan CMD-> Panah Kiri / Kanan pada keyboard.
Mengimpor Proyek Images
Setelah Anda memiliki beberapa waktu untuk bermain dengan iPad proyek baru, Anda sekarang akan perlu untuk mengimpor gambar yang dibutuhkan untuk proyek ini. Setelah men-download dan unzip file dalam dari tutorial ini, menyeret mereka ke dalam folder proyek yang disebut “Sumber-iPad”.
Xcode akan meminta Anda untuk menyalin file, periksa ya dan klik OK.
Pastikan Anda menyertakan semua 4 file gambar serta file bernama fruits.plist.
Menampilkan List Buah
Menampilkan daftar buah kita tidak berbeda dengan menampilkan data dalam UITableView lainnya. Mari kita mulai dengan membuka MasterViewController.h dan menambahkan deklarasi untuk berbagai buah kita.
#import
@class DetailViewController;
@interface MasterViewController : UITableViewController {
DetailViewController *detailViewController;
NSArray * fruits;
}
@property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;
@property (nonatomic, retain) NSMutableArray *fruits;
@end
#import
@class DetailViewController;
@interface MasterViewController : UITableViewController {
DetailViewController *detailViewController;
NSArray * fruits;
}
@property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;
@property (nonatomic, retain) NSMutableArray *fruits;
@end
Seperti yang Anda lihat, tidak ada yang baru di sini. Kami hanya mendeklarasikan array buah kita dan membuat properti untuk itu.
Kami akan memuat buah dari file plist yang diimpor ke proyek Anda di langkah terakhir. Memuat konten dari file plist adalah solusi yang sangat cepat dan mudah ketika Anda tidak membutuhkan database.
Bukalah MasterViewController.m dan tambahkan baris kode berikut ke metode viewDidLoad Anda.
- (void)viewDidLoad {
[super viewDidLoad];
self.fruits = [[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fruits" ofType:@"plist"]] retain];
}
File fruits.plist dasarnya sebuah array yang telah ditulis ke file. Jika Anda membukanya, terlihat sangat mirip dengan XML. Sekarang bahwa array buah kita telah dihuni, mari kita menerapkan masing-masing delegasi UITableView dan sumber data metode untuk mengisi tabel.
sumber data metode UITableView
- (NSInteger)tableView:(UITableView *)aTableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return [fruits count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"CellIdentifier";
// Dequeue or create a cell of the appropriate type.
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryNone;
}
// Get the object to display and set the value in the cell.
cell.textLabel.text = [self.fruits objectAtIndex:indexPath.row];
return cell;
}
Tidak ada yang istimewa … Kami pertama kali memberitahu tableview yang kita inginkan fruits.count (4 dalam kasus ini) jumlah baris. Selanjutnya, kita menampilkan nama buah dalam setiap sel tableview. Jika Anda ingin mempelajari lebih lanjut tentang UITableViews.
Metode delegasi UITableView
- (void)tableView:(UITableView *)aTableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
/*
When a row is selected, set the detail view controller's detail item to the item associated with the selected row.
*/
detailViewController.detailItem = [self.fruits objectAtIndex: indexPath.row];
}
Di sini, kita hanya menyetel properti detailItem dari detailViewController dengan buah yang dipilih. Kita akan membahas properti ini kemudian dalam bagian ini, tapi untuk saat ini semua yang perlu Anda ketahui adalah bahwa tipenya adalah id. Pada titik ini, pergi ke depan dan tekan Membangun dan Jalankan untuk melihat kode Anda dalam tindakan. Anda harus melihat sesuatu yang terlihat seperti ini:
Menampilkan daftar buah-buahan, tapi tidak ada yang terjadi ketika Anda memilih sebuah sel (baik judul detailView dapat berubah). Sekarang bahwa kita memiliki daftar buah-buahan ditampilkan, kita sekarang perlu untuk mengimplementasikan kode untuk menampilkan gambar yang sesuai mereka.
Menampilkan Buah
Menampilkan buah dipilih sebenarnya cukup sederhana. Hal pertama yang perlu kita lakukan adalah menambahkan UIImageView untuk detailView kami. Mulailah dengan menambahkan IBOutlet untuk tampilan gambar. Bukalah DetailViewController.h dan tambahkan kode berikut:
@interface DetailViewController : UIViewController {
UIPopoverController *popoverController;
UINavigationBar *navigationBar;
id detailItem;
IBOutlet UIImageView * fruitImageView;
}
@property (nonatomic, retain) UIPopoverController *popoverController;
@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar;
@property (nonatomic, retain) id detailItem;
@property (nonatomic, retain) IBOutlet UIImageView * fruitImageView;
@end
Semua kode di sini dilengkapi dengan template kecuali kode untuk menambahkan UIImageView IBOutlet. Setelah Anda telah menambahkan ini terbuka sampai DetailView.xib dalam pembangun antarmuka. Tambahkan UIImageView ke tampilan dan ukuran ke 500 × 500
ow, klik pada pemilik objek file dan membuka inspektur koneksi (Tools -> inspektur koneksi).
Tarik dari IBOutlet imageView tentang UIImageView dan lepaskan. UIImageView sekarang terhubung ke stopkontak.
Catatan: Jika Anda ingin gambar untuk tidak miring, mengatur modus isi tampilan gambar (dalam atribut inspektur) ke Aspect Fit.
Sekarang ImageView telah terhubung, saatnya untuk menulis kode yang update itu. Tutup Interface Builder dan buka DetailViewController.m berkas dan tambahkan baris berikut dengan metode setDetailItem:
- (void)setDetailItem:(id)newDetailItem {
if (detailItem != newDetailItem) {
[detailItem release];
detailItem = [newDetailItem retain];
// Update the view.
navigationBar.topItem.title = detailItem;
NSString * imageName = [NSString stringWithFormat:@"%@.png",detailItem];
[self.fruitImageView setImage:[UIImage imageNamed:imageName]];
}
if (popoverController != nil) {
[popoverController dismissPopoverAnimated:YES];
}
}
Sebagian besar kode ini telah ditambahkan oleh template dan saya tidak akan membahas terlalu banyak dalam tutorial ini. Tetapi untuk sekarang, penambahan penting adalah baris yang memuat gambar berdasarkan nama buah dan satu di bawah ini yang menentukan properti citra dari tampilan gambar. Di sana Anda memilikinya! Membangun dan pergi dan aplikasi harus berfungsi seperti yang disebutkan. Berikut adalah screenshot lain dari produk akhir.
Firut Keren Lain SplitViewController
Ketika dalam mode vertikal, SplitViewController memberi Anda elemen lain UI baru yang disebut UIPopOverView tersebut. Collin akan memiliki tutorial segera pada tampilan ini, tetapi gambar di bawah menunjukkan apa yang saya bicarakan.
Bila perangkat vertikal, maka secara otomatis akan memutar tampilan Anda dan memberikan UIPopoverView ketika “Guru Daftar” tombol cukup. (BTW tombol ini juga disesuaikan).
Anda dapat mendownload kode sumber untuk tutorial ini di sini iPadHelloWorld.zip.
Tutorial Membuat Aplikasi iPad iOS
ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2
{ 0 komentar... Views All / Send Comment! }
Posting Komentar