Aplikasi iOS: Bekerja Dengan MultiComponent Picker



Blog ini adalah tentang membuat aplikasi ios yang menampilkan konversi dari satu unit ke unit lainnya. Ini menjelaskan cara kerja Mutlicomponent Picker, Alerts, dll.

Untuk mendapatkan wawasan yang menyeluruh, silahkan baca . Ini adalah blog kedua dari seri aplikasi ios.





Jika Anda adalah pengembang berpengalaman yang ingin tahu tentang cara kerja pemilih MultiComponent, maka Anda telah datang ke blog yang tepat. Di blog ini, saya akan berbicara tentang cara memperluas aplikasi konversi kami dengan lebih banyak fungsi dengan menerapkan pemilih multikomponen, dan juga cara melakukan penanganan yang luar biasa menggunakan peringatan.

Dalamblog terakhir,kami telah melihat itu saat kami mengetik sesuatu di bidang teks, keyboard akan muncul. Nilai yang akan dikonversi diketik di kolom teks dan kemudian kita melihat keyboard tidak hilang.



Untuk mengatasi masalah ini kita harus menambahkan tombol yang menutupi seluruh tampilan. Saat pengguna menyentuh di mana saja di latar belakang, keyboard akan menghilang.

Sekarang, ayo kita lakukan. Seret tombol, setel jenis tombol sebagai kustom dan warna teks sebagai warna yang jelas dari inspektur atribut.

Atribut Inspektur



dan pilih Editor> Atur> Kirim ke Belakang

dan mengubah ukuran tombol sedemikian rupa sehingga pas dengan seluruh tampilan.

Tombol ini sekarang bertindak sebagai tombol tak terlihat latar belakang yang diklik agar keyboard menghilang. Mari tulis IBAction untuk hal yang sama, pilih mode asisten editor dan control + seret ke ViewController.h. Setel Connection to Action dan beri nama menjadi BackgroundButton dan klik hubungkan.

Kode pengontrol tampilan terlihat seperti ini sekarang.

#import @interface ViewController: UIViewController @property (kuat, nonatomik) IBOutlet UITextField * ValueTextField @property (kuat, nonatomik) IBOutlet UIPickerView * picker2 @property (kuat, nonatomik) NSArray * data IBabel @property (kuat, nonatomik) - (IBAction) Konversi: (UIButton *) sender - (IBAction) backgroundButton: (id) sender @end

Beralih ke ViewController.m dan kemudian tulis kode berikut.

- (IBAction) backgroundButton: (id) sender {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

Di sini kode memberitahu semua objek lain untuk menghasilkan status responden pertama ketika sentuhan terdeteksi. Sekarang, jalankan aplikasi dan lihat. Anda akan dapat menemukan bahwa keyboard hilang saat Anda menyentuh latar belakang. Sekarang agar keyboard pergi setelah Anda selesai mengetik, panggil metode backgroundButton dalam metode didselectRow () dari picker. Jadi kode metodenya adalah sebagai berikut.

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) baris inComponent: (NSInteger) komponen {selectedValue = _data [row] [self backgroundButton: 0]}

Sekarang, Anda dapat mengerjakan bagian kecantikan dari aplikasi, seperti menambahkan latar belakang dan bahkan mungkin memberikan gambar tombol yang mewah. Namun, di milik saya, saya akan mengatur gambar latar belakang.
Untuk melakukan itu, cari gambar yang sesuai dulu ya! Kemudian tambahkan ke folder Images.xcassets dan ubah gambar dari layar 1x menjadi 2x secara universal.

Jalankan aplikasi dan lihat apakah itu berfungsi dengan baik.

Jika saya mengubah perangkat ke iphone 5s.

Dan jalankan aplikasinya.

Di sini kita dapat melihat bahwa semuanya bekerja dengan baik seperti yang diharapkan. Sekarang bagaimana jika saya ingin menambahkan latar belakang ke tombol saya dan membuat tampilan lebih seperti tombol? Untuk melakukan itu, pertama-tama saya akan menambahkan IBOutlet untuk tombol convert ke ViewController.h

@property (kuat, nonatomik) IBOutlet UIButton * convert

dan kemudian tambahkan kode berikut dalam metode viewDidLoad ()

self.convert.backgroundColor = [UIColor colorWithRed: 0.4 hijau: 0.8 biru: 1.0 alpha: 1.0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]

Mari kita jalankan aplikasi kita dan lihat, apakah itu yang kita suka.

bagaimana menangani popup di selenium webdriver

OK bagus! Anda pasti telah memperhatikan bahwa saya telah mengubah posisi label hasil juga, alasan perubahannya adalah sesuatu yang akan saya jelaskan nanti.

Kami tahu bahwa aplikasi kami hanya mengkonversi dari Celsius ke Fahrenheit dan sebaliknya. Jadi, bagaimana jika menambahkan beberapa fungsi atau unit lagi untuk diubah? Untuk melakukannya, kita perlu menambahkan satu komponen lagi ke UIPickerView yang memberikan pilihan yang sesuai, saat sebuah unit dipilih di komponen pertama alat pilih.

Untuk membuat picker dibagi menjadi dua komponen, kita perlu menambahkan NSArray data2 baru, yang akan menampung data untuk komponen kedua. Juga, tentukan dua konstanta yang akan mewakili dua komponen kita. Di sini, komponen kiri dinyatakan 0 dan komponen kanan dinyatakan 1 untuk kesederhanaan pemrograman.

File ViewController.h Anda terlihat seperti ini

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (kuat, nonatomik) IBOutlet UITextField * ValueTextField @property (kuat, nonatomik) IBOutlet UIPickerView * picker2 @property (kuat, nonatomik) NSArray * kuat, nonatomik) NSArray * data2 @property (kuat, nonatomik) IBOutlet UILabel * ResultLabel @property (kuat, nonatomik) IBOutlet UIButton * convert - (IBAction) Convert: (UIButton *) sender - (IBAction) backgroundButton: (id) sender @akhir

Sekarang tentukan array data2 dalam metode ViewDidLoad (). Sekarang setelah kita memiliki kedua sumber data, kita harus dapat menulis kode untuk alat pilih sedemikian rupa sehingga ketika kita memilih item dari komponen pertama alat pilih, komponen kedua harus secara otomatis diubah ke nilai yang sesuai. Komponen kedua bergantung pada pemilihan komponen pertama.
Untuk ini, kita perlu mendefinisikan kamus yang akan menyimpan kunci dan nilai. Kunci berisi data yang sesuai dengan komponen pertama alat pilih, dan nilai berisi data yang sesuai dengan komponen kedua alat pilih.

- (void) viewDidLoad {[super viewDidLoad] // Lakukan penyiapan tambahan apa pun setelah memuat tampilan, biasanya dari ujung pena. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nil] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nil] dictionary = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}

Sekarang, kita harus mengubah sumber data dan metode delegasi dari alat pilih saat ini ke yang berikut, sehingga kita memiliki data yang diisi di kedua komponen.

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) komponen {if (component == data1comp) {return [self.data1 count]} return [self.data2 count]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) baris forComponent: (NSInteger) komponen {if (component == data1comp) {return [self.data1 objectAtIndex: row]} kembalikan [self.data2 objectAtIndex: row]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) baris inComponent: (NSInteger) komponen {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: baris] NSArray * a = [kamus objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animasi: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selected = baris}}

Di sini, di metode didSelectRow () kami, kami mendapatkan nilai yang dipilih dari komponen pertama, lalu kami meneruskannya sebagai argumen ke metode objectForKey () dari kamus, dan mendapatkan nilai yang sesuai untuk kuncinya. Untuk menemukan posisi yang sesuai untuk nilai dalam array kedua yaitu data2, kami menggunakan metode indexOfObject () dari array dan menyimpan hasilnya dalam nilai integer.
Kami kemudian meneruskan nilai integer ini ke metode picker selectRow: baris inComponent: metode component (). Dan muat ulang komponen picker menggunakan reloadComponent ().
Setelah kami melakukan ini, saat kami memilih satu item dari komponen pertama, item terkait akan dipilih di komponen kedua dari alat pilih.

Kode untuk didSelectRow ()

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) baris inComponent: (NSInteger) komponen {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [kamus objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animasi: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = row}}

Sekarang jalankan aplikasi dan lihat, apakah alat pilih berfungsi seperti yang diharapkan.

Voila! berhasil!

Jadi mari kita lanjutkan untuk mengkodekan tombol konversi kita. Alat pilih sebelumnya hanya memiliki dua nilai untuk dicocokkan yaitu Celcius dan Fahrenheit dan kemudian hasilnya dihitung. Tapi sekarang kita punya empat nilai Celcius, Fahrenheit, Meter dan Sentimeter. Jadi saya telah menggunakan pernyataan switch, yang menghitung nilai berdasarkan variabel baris yang dipilih.

- (IBAction) Convert: (UIButton *) sender {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) switch (selectedRow) {case 0: // Celsius to Fahrenheit res = (val * 1.8) + 32 break case 1: // Fahrenheit to Celsius res = (val-32) /1.8break case 2: // Meter to Centimeter res = val * 100 break case 3: // Centimeter to Meter res = val * 0.01 break default: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

jika Anda menjalankan aplikasi, kami dapat melihat bahwa semuanya berfungsi dengan baik.

apa jeda baris di html

Sekarang, kami dapat memeriksa pengecualian yang dapat terjadi di aplikasi kami. Misalnya, tidak ada nilai di kotak teks. Atau kami mencoba untuk mengubah dari Celcius ke Meter atau Sentimeter, yang sebenarnya tidak mungkin. Jenis situasi ini disebut sebagai pengecualian dan kita harus menghindarinya dengan menulis kode untuk menangani kesalahan tersebut.

Mari kita selesaikan jenis kesalahan pertama yang dapat terjadi saat kita menjalankan aplikasi kita. Artinya, kami melewatkan menulis nilai kami untuk dikonversi di bidang teks. Untuk skenario ini, kita harus memperingatkan pengguna kita untuk memasukkan nilai dan kemudian melanjutkan.

Kita bisa menggunakan UIAlertView untuk ini. Kita dapat menulis sebuah metode bernama showAlertWithMessage (NSString *) pesan. Dalam metode ini, kita bisa mendeklarasikan alertView dan akhirnya menampilkannya menggunakan metode show (). Kode untuk metode tersebut adalah sebagai berikut.

- (void) showAlertWithMessage: (NSString *) pesan {UIAlertView * alertView = [[UIAlertView alokasi] initWithTitle: @ pesan 'Error': delegasi pesan: self cancelButtonTitle: nil otherButtonTitles: @ 'Okay', nil] alertView.tag = 100 _ResultLabel.text=@'Tidak Ada Hasil '[alertView show]}

Sekarang metode ini ketika pengguna mengklik tombol konversi harus disebut sebagai konversi. Konversi tidak boleh dilakukan tanpa memasukkan nilainya. Jadi dalam definisi metode untuk mengkonversi, kita harus memeriksa apakah panjang bidang teks lebih besar dari atau sama dengan nol atau tidak. Jika sudah maka lakukan konversi, jika tidak menampilkan alert. Oleh karena itu, kode tombol konversi menjadi seperti ini:

- (IBAction) Convert: (UIButton *) sender {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { float res=0.0 float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } }

Sekarang jalankan aplikasi dan coba klik tombol convert tanpa memasukkan nilai di textfield.

Jenis pengecualian kedua yang dapat terjadi adalah jika nilai di komponen pertama tidak cocok dengan nilai di komponen kedua UIPickerView. Untuk ini, kami memeriksa apakah nilai baris komponen yang dipilih saat ini dari komponen kedua sama dengan nilai nilai baris yang dikembalikan oleh delegasi didSelectRow () metode. Jika kondisinya tidak sesuai, maka konversi tidak memungkinkan dan jika nilainya cocok maka konversi dapat dilakukan.

Kita dapat mengimplementasikan logika ini sebagai berikut,

- (IBAction) Convert: (UIButton *) sender {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { _ResultLabel.textColor= [UIColor blackColor] float res=0.0 NSInteger n =[_picker2 selectedRowInComponent:data2comp] if(n==secondrow) { float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } else { // code for displaying error. _ResultLabel.textColor= [UIColor redColor] _ResultLabel.text = @'Result cannot be calculated' } }

Sekarang jalankan aplikasi dan lihat dengan mengubah nilai di komponen kedua setelah Anda membuat pilihan di komponen pertama.

Anda dapat melihat pesan kesalahan, bahwa hasilnya tidak dapat dihitung. Anda akan melihat bahwa pesan kesalahan dicetak di label hasil yang sama, dan pesannya panjang. Jadi inilah mengapa label dipindahkan ke bawah dari orientasi sebelumnya.

Jadi, aplikasi konversi kami selesai. Anda dapat menambahkan lebih banyak fungsionalitas ke aplikasi sesuai pilihan Anda dan membuatnya lebih indah sesuai kreativitas Anda.

Ada pertanyaan untuk kami? Sebutkan mereka di bagian komentar dan kami akan menghubungi Anda kembali.

Posting terkait: