แอป iOS: ทำงานร่วมกับ MultiComponent Picker



บล็อกนี้เกี่ยวกับการสร้างแอป ios ที่แสดงการแปลงจากหน่วยหนึ่งไปยังอีกหน่วยหนึ่ง มันอธิบายถึงการทำงานของตัวเลือก Mutlicomponent การแจ้งเตือนและอื่น ๆ

หากต้องการข้อมูลเชิงลึกอย่างละเอียดโปรดอ่าน . นี่เป็นบล็อกที่สองของชุดแอป iOS





หากคุณเป็นนักพัฒนาที่มีประสบการณ์ซึ่งอยากรู้เกี่ยวกับการทำงานของเครื่องมือเลือก MultiComponent คุณมาที่บล็อกที่ถูกต้องแล้ว ในบล็อกนี้ฉันจะพูดถึงวิธีขยายแอป Conversion ของเราให้มีฟังก์ชันการทำงานมากขึ้นโดยการใช้เครื่องมือเลือกหลายองค์ประกอบและวิธีดำเนินการจัดการที่ยอดเยี่ยมโดยใช้การแจ้งเตือน

ในบล็อกที่แล้วเราได้เห็นแล้ว เมื่อเราพิมพ์บางอย่างในช่องข้อความแป้นพิมพ์จะปรากฏขึ้น ค่าที่จะแปลงถูกพิมพ์ลงในช่องข้อความจากนั้นเราจะเห็นว่าแป้นพิมพ์ไม่หายไป



ในการแก้ปัญหานี้เราต้องเพิ่มปุ่มที่ครอบคลุมมุมมองทั้งหมด เมื่อผู้ใช้แตะที่ใดก็ได้บนพื้นหลังแป้นพิมพ์จะหายไป

อัลกอริทึม fibonacci c ++

ตอนนี้มาลงมือทำกันเลย ลากปุ่มกำหนดประเภทของปุ่มเป็นแบบกำหนดเองและสีข้อความเป็นสีที่ชัดเจนจากตัวตรวจสอบแอตทริบิวต์

ตัวตรวจสอบคุณสมบัติ



แล้วเลือก Editor> Arrange> Send to Back

และปรับขนาดปุ่มในลักษณะที่พอดีกับมุมมองทั้งหมด

ตอนนี้ปุ่มนี้ทำหน้าที่เป็นปุ่มล่องหนพื้นหลังที่คลิกเพื่อให้แป้นพิมพ์หายไป มาเขียน IBAction กันเลือกโหมดผู้ช่วยแก้ไขและควบคุม + ลากไปที่ ViewController.h ตั้งค่า Connection to Action และตั้งชื่อเป็น BackgroundButton แล้วคลิกเชื่อมต่อ

ตอนนี้รหัสตัวควบคุมมุมมองจะเป็นแบบนี้

#import @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray * data @property (strong, nonatomic) IBOutlet - (IBAction) Convert: (UIButton *) ผู้ส่ง - (IBAction) backgroundButton: (id) ผู้ส่ง @end

สลับไปที่ ViewController.m จากนั้นเขียนโค้ดต่อไปนี้

- (IBAction) backgroundButton: (id) ผู้ส่ง {[_ValueTextField ลาออกเฟิร์สเรสปอนเดอร์] [_picker2 ลาออกเฟิร์สเรสปอนเดอร์] [_ResultLabel ลาออกก่อนตอบกลับ]}

ที่นี่รหัสจะบอกให้วัตถุอื่น ๆ ทั้งหมดแสดงสถานะการตอบกลับครั้งแรกเมื่อตรวจพบการสัมผัส ตอนนี้เรียกใช้แอพและดู คุณจะพบว่าแป้นพิมพ์หายไปเมื่อคุณแตะพื้นหลัง ตอนนี้สำหรับแป้นพิมพ์ที่จะไปเมื่อคุณพิมพ์เสร็จแล้วให้เรียกเมธอด backgroundButton ในเมธอด didselectRow () ของตัวเลือก ดังนั้นรหัสวิธีจะเป็นดังนี้

- (โมฆะ) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component {selectedValue = _data [row] [self backgroundButton: 0]}

ตอนนี้คุณสามารถทำงานในส่วนการตกแต่งที่สวยงามของแอปได้เช่นการเพิ่มพื้นหลังและอาจให้ภาพปุ่มแฟนซี อย่างไรก็ตามในของฉันฉันจะตั้งค่าภาพพื้นหลัง
ในการทำเช่นนั้นให้หาภาพที่เหมาะสมก่อน! จากนั้นเพิ่มลงในโฟลเดอร์ Images.xcassets และเปลี่ยนภาพจาก 1x เป็น 2x หน้าจอแบบสากล

เรียกใช้แอปและดูว่าทำงานได้ดีหรือไม่

ถ้าเปลี่ยนเครื่องเป็น iphone 5s.

และเรียกใช้แอป

ที่นี่เราจะเห็นว่าทุกอย่างทำงานได้ดีตามที่คาดไว้ ตอนนี้จะเป็นอย่างไรถ้าฉันต้องการเพิ่มพื้นหลังให้กับปุ่มของฉันและทำให้ดูเหมือนปุ่มมากขึ้น? ในการทำเช่นนั้นก่อนอื่นฉันจะเพิ่ม IBOutlet สำหรับปุ่มแปลงไปยัง ViewController.h

@property (แข็งแกร่งไม่ใช่อะตอม) IBOutlet UIButton * แปลง

จากนั้นเพิ่มรหัสต่อไปนี้ในเมธอด viewDidLoad ()

self.convert.backgroundColor = [UIColor colorWithRed: 0.4 สีเขียว: 0.8 สีน้ำเงิน: 1.0 alpha: 1.0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]

ให้เราเรียกใช้แอพของเราและดูว่าเป็นแบบที่เราชอบหรือไม่

โอเคดีมาก! คุณต้องสังเกตว่าฉันได้เปลี่ยนตำแหน่งของป้ายกำกับผลลัพธ์เช่นกันสาเหตุของการเปลี่ยนแปลงเป็นสิ่งที่ฉันจะอธิบายในภายหลัง

เรารู้ว่าแอปของเราแปลงจากเซลเซียสเป็นฟาเรนไฮต์และในทางกลับกันเท่านั้น แล้วจะเพิ่มฟังก์ชั่นหรือหน่วยที่จะแปลงได้อย่างไร? ในการทำเช่นนั้นเราต้องเพิ่มอีกหนึ่งองค์ประกอบใน UIPickerView ที่ให้การเลือกที่เหมาะสมเมื่อมีการเลือกหน่วยในองค์ประกอบแรกของเครื่องมือเลือก

ในการสร้างตัวเลือกแบ่งออกเป็นสององค์ประกอบเราต้องเพิ่ม NSArray data2 ใหม่ซึ่งจะเก็บข้อมูลสำหรับองค์ประกอบที่สอง กำหนดค่าคงที่สองค่าที่จะแทนส่วนประกอบทั้งสองของเรา ที่นี่ส่วนประกอบทางซ้ายจะประกาศเป็น 0 และส่วนประกอบทางขวาจะถูกประกาศ 1 เพื่อความเรียบง่ายของการเขียนโปรแกรม

ไฟล์ ViewController.h ของคุณดูเหมือน

#import # กำหนด data1comp 0 # กำหนด data2comp 1 @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) @ NSArperty * data แข็งแกร่งไม่ใช่อะตอม) NSArray * data2 @property (แข็งแกร่งไม่ใช่อะตอม) IBOutlet UILabel * ResultLabel @property (แข็งแกร่งไม่ใช่อะตอม) IBOutlet UIButton * แปลง - (IBAction) แปลง: (UIButton *) ผู้ส่ง - (IBAction) backgroundButton: (id) ผู้ส่ง @end

ตอนนี้กำหนดอาร์เรย์ data2 ในเมธอด ViewDidLoad () ตอนนี้เรามีแหล่งข้อมูลทั้งสองแล้วเราต้องสามารถเขียนโค้ดสำหรับตัวเลือกในลักษณะที่เมื่อเราเลือกรายการจากส่วนประกอบแรกของตัวเลือกส่วนประกอบที่สองควรจะเปลี่ยนเป็นค่าที่ตรงกันโดยอัตโนมัติ องค์ประกอบที่สองขึ้นอยู่กับการเลือกของส่วนแรก
สำหรับสิ่งนี้เราต้องกำหนดพจนานุกรมซึ่งจะเก็บคีย์และค่าต่างๆ คีย์ประกอบด้วยข้อมูลที่ตรงกับองค์ประกอบแรกของตัวเลือกและค่าประกอบด้วยข้อมูลที่ตรงกับองค์ประกอบที่สองของเครื่องมือเลือก

- (โมฆะ) viewDidLoad {[super viewDidLoad] // ทำการตั้งค่าเพิ่มเติมหลังจากโหลดมุมมองโดยทั่วไปจะมาจากปลายปากกา _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nil] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'เซลเซียส', ไม่มี] พจนานุกรม = [พจนานุกรมศัพท์ NSDictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}

ตอนนี้เราต้องเปลี่ยนแหล่งข้อมูลและมอบหมายวิธีการของตัวเลือกปัจจุบันเป็นดังต่อไปนี้เพื่อให้เรามีข้อมูลที่เต็มไปด้วยส่วนประกอบทั้งสอง

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) ส่วนประกอบ {if (component == data1comp) {return [return [self.data1 count]} [self.data2 count]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) แถว forComponent: (NSInteger) คอมโพเนนต์ {if (component == data1comp) {return [self.data1 objectAtIndex: row]} return [self.data2 objectAtIndex: row]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [พจนานุกรม objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedRalow = row}}

ที่นี่ในเมธอด didSelectRow () ของเราเราได้รับค่าที่เลือกของส่วนประกอบแรกจากนั้นเราส่งต่อเป็นอาร์กิวเมนต์ไปยังเมธอด objectForKey () ของพจนานุกรมและรับค่าที่สอดคล้องกันสำหรับคีย์ ในการค้นหาตำแหน่งที่สอดคล้องกันสำหรับค่าในอาร์เรย์ที่สองเช่น data2 เราใช้เมธอด indexOfObject () ของอาร์เรย์และเก็บผลลัพธ์เป็นค่าจำนวนเต็ม
จากนั้นเราส่งค่าจำนวนเต็มนี้ไปยังเมธอด picker selectRow: row inComponent: component () method และโหลดส่วนประกอบของตัวเลือกใหม่โดยใช้ reloadComponent ()
เมื่อเราดำเนินการเสร็จสิ้นเมื่อเราเลือกหนึ่งรายการจากองค์ประกอบแรกรายการที่เกี่ยวข้องจะถูกเลือกในองค์ประกอบที่สองของเครื่องมือเลือก

รหัสสำหรับ didSelectRow ()

- (เป็นโมฆะ) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) แถว inComponent: (NSInteger) องค์ประกอบ {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [พจนานุกรม objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = row}}

ตอนนี้เรียกใช้แอพและดูว่าตัวเลือกทำงานตามที่คาดไว้หรือไม่

โวลา! มันได้ผล!

ดังนั้นให้เราเขียนโค้ดปุ่มแปลงของเราต่อไป เครื่องมือเลือกก่อนหน้านี้มีเพียงสองค่าที่จะจับคู่กันคือเซลเซียสและฟาเรนไฮต์จากนั้นจึงคำนวณผลลัพธ์ แต่ตอนนี้เรามีสี่ค่าเซลเซียสฟาเรนไฮต์มิเตอร์และเซนติเมตร ดังนั้นฉันจึงใช้คำสั่งสวิตช์ซึ่งคำนวณค่าตามตัวแปรแถวที่เลือก

- (IBAction) แปลง: (UIButton *) ผู้ส่ง {float val = [_ ValueTextField.text floatValue] สวิตช์ NSLog (@ 'value% f', val) (selectedRow) {case 0: // เซลเซียสเป็นฟาเรนไฮต์ 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: // เซนติเมตรถงเมตร res = val * 0.01 break ค่าเริ่มต้น: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

หากคุณเรียกใช้แอปเราจะเห็นว่าทุกอย่างทำงานได้ดี

ตอนนี้เราสามารถตรวจสอบข้อยกเว้นที่สามารถเกิดขึ้นได้ในแอปของเรา ตัวอย่างเช่นไม่มีค่าในกล่องข้อความ หรือเรากำลังพยายามแปลงจากเซลเซียสเป็นเมตรหรือเซนติเมตรซึ่งจริงๆแล้วไม่สามารถทำได้ สถานการณ์ประเภทนี้เรียกว่าเป็นข้อยกเว้นและเราต้องหลีกเลี่ยงโดยการเขียนโค้ดเพื่อจัดการข้อผิดพลาดดังกล่าว

ให้เราแก้ไขข้อผิดพลาดประเภทแรกที่อาจเกิดขึ้นเมื่อเราเรียกใช้แอปพลิเคชันของเรา นั่นคือเราพลาดที่จะเขียนมูลค่าของเราที่จะแปลงในฟิลด์ข้อความ สำหรับสถานการณ์นี้เราต้องแจ้งเตือนผู้ใช้ของเราให้ป้อนค่าจากนั้นดำเนินการต่อ

เราสามารถใช้ UIAlertView สำหรับสิ่งนี้ เราสามารถเขียนเมธอดชื่อ showAlertWithMessage (NSString *) ข้อความ ในวิธีนี้เราสามารถประกาศ alertView จากนั้นจึงแสดงโดยใช้วิธี show () รหัสสำหรับวิธีการจะเป็นดังนี้

- (เป็นโมฆะ) showAlertWithMessage: (NSString *) ข้อความ {UIAlertView * alertView = [[UIAlertView จัดสรร] initWithTitle: @ ข้อความ 'ข้อผิดพลาด': ข้อความที่มอบสิทธิ์: ยกเลิกตัวเองด้วยตนเอง CancelButtonTitle: nil otherButtonTitles: @ 'Okay', nil] alertView.tag = 100 _ResultLabel.text=@'No Result '[alertView show]}

ตอนนี้วิธีนี้เมื่อผู้ใช้คลิกปุ่มแปลงจะต้องเรียกว่าการแปลง ไม่ควรทำการแปลงโดยไม่ต้องป้อนค่า ดังนั้นในนิยามวิธีการสำหรับการแปลงเราต้องตรวจสอบว่าความยาวของฟิลด์ข้อความมากกว่าหรือเท่ากับศูนย์หรือไม่ หากเป็นเช่นนั้นทำการแปลงมิฉะนั้นจะแสดงการแจ้งเตือน ดังนั้นรหัสปุ่มแปลงจะเป็นดังนี้:

- (IBAction) แปลง: (UIButton *) ผู้ส่ง {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 } }

ตอนนี้เรียกใช้แอพและลองคลิกที่ปุ่มแปลงโดยไม่ต้องป้อนค่าในฟิลด์ข้อความ

java system.exit (1)

ข้อยกเว้นประเภทที่สองที่อาจเกิดขึ้นคือหากค่าในองค์ประกอบแรกไม่ตรงกับค่าในองค์ประกอบที่สองของ UIPickerView สำหรับสิ่งนี้เราตรวจสอบว่าค่าแถวส่วนประกอบที่เลือกในปัจจุบันขององค์ประกอบที่สองเท่ากับค่าของค่าแถวที่ส่งคืนโดยผู้รับมอบสิทธิ์ didSelectRow () ของวิธีการหรือไม่ หากเงื่อนไขไม่ตรงกันแสดงว่าไม่สามารถแปลงได้และหากค่าตรงกันก็สามารถทำการแปลงได้

เราสามารถใช้ตรรกะนี้ได้ดังนี้

- (IBAction) แปลง: (UIButton *) ผู้ส่ง {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' } }

ตอนนี้เรียกใช้แอปและดูโดยการเปลี่ยนค่าในองค์ประกอบที่สองหลังจากที่คุณทำการเลือกในองค์ประกอบแรก

คุณสามารถเห็นข้อความแสดงข้อผิดพลาดว่าไม่สามารถคำนวณผลลัพธ์ได้ คุณจะสังเกตเห็นว่าข้อความแสดงข้อผิดพลาดถูกพิมพ์ในป้ายกำกับผลลัพธ์เดียวกันและข้อความนั้นยาว นี่คือสาเหตุที่ป้ายกำกับถูกย้ายลงจากการวางแนวก่อนหน้านี้

ดังนั้นแอปการแปลงของเราจึงเสร็จสมบูรณ์ คุณสามารถเพิ่มฟังก์ชั่นการใช้งานให้กับแอพได้ตามที่คุณเลือกและทำให้สวยงามขึ้นตามความคิดสร้างสรรค์ของคุณ

มีคำถามสำหรับเรา? พูดถึงพวกเขาในส่วนความคิดเห็นแล้วเราจะติดต่อกลับไป

กระทู้ที่เกี่ยวข้อง: