אפליקציית iOS: עבודה עם בורר MultiComponent



בלוג זה עוסק ביצירת אפליקציית iOS המציגה המרה מיחידה אחת לאחרת. הוא מתאר את עבודתו של בורר מולכיל-רכיבים, התראות וכו '.

כדי לקבל תובנה מעמיקה, אנא קרא . זהו הבלוג השני של סדרת האפליקציות ios.





אם אתה מפתח מנוסה וסקרן לגבי עבודתו של בורר MultiComponent אז הגעת לבלוג הנכון. בבלוג זה אדבר כיצד להרחיב את אפליקציית ההמרה שלנו עם פונקציונליות רבה יותר על ידי הטמעת בורר רב-רכיבים, וכן כיצד לבצע טיפול יוצא דופן באמצעות התראות.

בתוך הבלוג אחרון,ראינו את זה כשאנחנו מקלידים משהו בשדה הטקסט, המקלדת צצה. הערך להמרה מוקלד בשדה הטקסט ואז אנו רואים שהמקלדת לא נעלמת.



כדי לפתור בעיה זו עלינו להוסיף כפתור המכסה את כל התצוגה. כאשר המשתמש נוגע בכל מקום ברקע, המקלדת אמורה להיעלם.

עכשיו, בואו ונעשה את זה. גרור כפתור, הגדר את סוג הכפתור כצבע מותאם אישית וצבע טקסט כצבע ברור ממפקח התכונות.

מפקח תכונות



ובחר עורך> סידור> שלח לאחור

ושנה את גודל הכפתור בצורה כזו שתתאים לתצוגה כולה.

כפתור זה פועל כעת ככפתור בלתי נראה ברקע שלוחצים עליו כדי שהמקלדת תיעלם. בואו נכתוב את ה- IBAction לאותו דבר, בחרו במצב העורך עוזר ונשלוט + גרור ל- ViewController.h. הגדר את החיבור לפעולה ושם ל- BackgroundButton ולחץ על התחבר.

קוד בקרת התצוגה נראה ככה עכשיו.

#import @interface ViewController: UIViewController @property (חזק, לא אטומי) IBOutlet UITextField * ValueTextField @property (חזק, לא אטומי) IBOutlet UIPickerView * picker2 @property (חזק, לא אטומי) NSArray * נתונים @property (חזק, nonatomil) - (IBAction) המר: (UIButton *) שולח - (IBAction) רקע כפתור: (id) שולח @end

עבור אל ViewController.m ואז כתוב את הקוד הבא.

- (IBAction) backgroundButton: (id) השולח {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

כאן הקוד אומר לכל שאר האובייקטים להניב את מעמד המגיב הראשון כאשר מתגלה מגע. עכשיו, הפעל את האפליקציה ותראה. תוכל לגלות שהמקלדת נעלמת כשאתה נוגע ברקע. עכשיו כדי שהמקלדת תעבור כשסיימת להקליד, התקשר לשיטת backgroundButton בשיטת didselectRow () של הבורר. אז קוד השיטה יהיה כדלקמן.

- (ריק) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) שורה ב- Component: (NSInteger) רכיב {selectValue = _data [row] [רקע עצמי כפתור: 0]}

כעת, תוכלו לעבוד על החלק המייפה של האפליקציה, כמו להוסיף רקע ואולי אפילו לתת תמונת כפתור מהודרת. עם זאת, בשלי, אני אקבע תמונת רקע.
לשם כך, מצא תחילה תמונה מתאימה! לאחר מכן הוסף אותו לתיקיה Images.xcassets ושנה את התמונה מ- 1x למסך 2x באוניברסלי.

הפעל את האפליקציה ובדוק אם היא עובדת בסדר.

אם אני משנה את המכשיר ל- iphone 5s.

עבור אל c ++

והפעל את האפליקציה.

כאן אנו יכולים לראות שהכל עובד בסדר כצפוי. עכשיו מה אם הייתי רוצה להוסיף רקע לכפתור שלי ולהפוך את המראה ליותר ככפתור? לשם כך הייתי מוסיף תחילה IBOutlet עבור כפתור ההמרה ל- ViewController.h

@property (חזק, לא אנטומי) IBOutlet UIButton * להמיר

ואז הוסף את הקוד הבא בשיטת viewDidLoad ()

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

בואו ננהל את האפליקציה שלנו ונראה אם ​​זה כמו שאנחנו אוהבים.

בסדר מצויין! בטח שמתם לב ששיניתי גם את עמדות תווית התוצאה, הסיבה לשינוי היא משהו שאסביר בהמשך.

אנו יודעים שהאפליקציה שלנו הופכת מ צלזיוס לפרנהייט ולהיפך בלבד. אז מה דעתך להוסיף עוד כמה פונקציות או יחידות להמרה? לשם כך עלינו להוסיף רכיב אחד נוסף ל- UIPickerView הנותן את הבחירה המתאימה, כאשר נבחרה יחידה ברכיב הראשון של הבורר.

כדי להכין בורר המחולק לשני רכיבים, עלינו להוסיף נתונים NSArray חדשים 2, שיחזיקו את הנתונים עבור הרכיב השני. כמו כן, הגדירו שני קבועים שייצגו את שני המרכיבים שלנו. כאן, המרכיב השמאלי מוכרז כ- 0 והרכיב הימני מוכרז כ -1 לפשטות התכנות.

הקובץ שלך ב- ViewController.h נראה

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (חזק, לא אטומי) IBOutlet UITextField * ValueTextField @property (חזק, לא אטומי) IBOutlet UIPickerView * picker2 @property (נתונים חזקים, nonatomic) NSAr חזק, לא אטומי) NSArray * data2 @property (חזק, nonatomic) IBOutlet UILabel * ResultLabel @property (חזק, nonatomic) IBOutlet UIButton * להמיר - (IBAction) המר: (UIButton *) שולח - (IBAction) רקע כפתור: (id) שולח @סוֹף

כעת הגדירו את מערך data2 בשיטת ViewDidLoad (). כעת, לאחר שיש לנו את שני מקורות הנתונים, עלינו להיות מסוגלים לכתוב קוד לבורר באופן שכאשר אנו בוחרים פריט מהרכיב הראשון של הבורר, הרכיב השני אמור להשתנות באופן אוטומטי לערך המקביל. הרכיב השני תלוי בבחירת הראשון.
לשם כך עלינו להגדיר מילון שיאחסן את המפתחות והערכים. מפתחות מכילים את הנתונים המתאימים לרכיב הראשון של הבורר, והערכים מכילים את הנתונים המתאימים לרכיב השני של הבורר.

- (void) 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.data [self.data2 count]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) row forComponent: (NSInteger) component {if (component == data1comp) {return [self.data1 objectAtIndex: row]} להחזיר [self.data2 objectAtIndex: שורה]} - (ריק) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) שורה ב-Component: (NSInteger) רכיב {[self backgroundButton: 0] אם (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [object objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp = שנבחר = data2comp] = שורה}}

כאן בשיטת didSelectRow () שלנו, אנו מקבלים את הערך הנבחר של הרכיב הראשון, ואז אנו מעבירים אותו כארגומנט לשיטת objectForKey () של המילון, ומקבלים את הערך המתאים למפתח. כדי למצוא את המיקום המתאים לערך במערך השני כלומר נתונים 2, אנו משתמשים בשיטת indexOfObject () של המערך ומאחסנים את התוצאה בערך שלם.
לאחר מכן אנו מעבירים ערך שלם זה לשיטת הבוחר selectRow: row inComponent: component (). וטען מחדש את רכיב הבורר באמצעות reloadComponent ().
לאחר שעשינו זאת, כאשר אנו בוחרים פריט אחד מהרכיב הראשון, הפריט המתאים ייבחר ברכיב השני של הבורר.

הקוד עבור didSelectRow ()

- (ריק) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) שורה ב-Component: (NSInteger) רכיב {[רקע עצמיButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: שורה] NSArray * a = [object objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = שורה}}

כעת הפעל את האפליקציה ובדוק אם הבורר עובד כמצופה.

וואלה! זה עובד!

אז בואו נמשיך לקודד את כפתור ההמרה שלנו. לבוחר הקודם היו רק שני ערכים שתואמים כלומר צלזיוס ופרנהייט ואז התוצאה חושבה. אבל עכשיו יש לנו ארבעה ערכים צלזיוס, פרנהייט, מטר וסנטימטר. אז השתמשתי בהצהרת מתג, המחשבת את הערך על בסיס משתנה השורה שנבחר.

- (IBAction) המרה: (UIButton *) שולח {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) מתג (selectRow) {מקרה 0: // צלזיוס לפרנהייט res = (val * 1.8) + מקרה 32break 1: // פרנהייט לצלזיוס res = (val-32) /1.8 case break 2: // Meter to Centimeter res = val * 100 case case 3: // Centimeter to Meter res = val * 0.01 break ברירת מחדל: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

אם אתה מפעיל את האפליקציה, אנו יכולים לראות שהכל עובד בסדר.

כעת נוכל לבדוק חריגים שיכולים להתרחש באפליקציה שלנו. לדוגמא, אין ערך בתיבת הטקסט. או שאנחנו מנסים להמיר מ צלזיוס למטר או סנטימטר, וזה למעשה לא אפשרי. סוגים אלה של מצבים נקראים חריגים ועלינו להימנע מכך על ידי כתיבת קוד לטיפול בשגיאות כאלה.

בואו נפתור את הסוג הראשון של השגיאה שיכולה להתרחש כאשר אנו מריצים את היישום שלנו. כלומר, אנחנו מתגעגעים לכתוב את הערך שלנו להמרה בשדה הטקסט. עבור תרחיש זה, עלינו להתריע בפני המשתמשים שלנו להזין את הערך ואז להמשיך.

אנו יכולים להשתמש ב- UIAlertView לשם כך. אנו יכולים לכתוב שיטה בשם showAlertWithMessage (NSString *). בשיטה זו, אנו יכולים להכריז על alertView ואז לבסוף להציג אותה בשיטת show (). הקוד לשיטה יהיה כדלקמן.

- (void) showAlertWithMessage: (NSString *) הודעה {UIAlertView * alertView = [[UIAlertView alloc] initWithTitle: @ 'Error' הודעה: delegate message: self cancelButtonTitle: nil otherButtonTitles: @ 'Okay', nil] alertView.tag = 100 _ResultLabel.text=@'אין תוצאה '[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 } }

כעת הפעל את האפליקציה ונסה ללחוץ על כפתור ההמרה מבלי להזין ערכים בשדה הטקסט.

הסוג השני של החריג שיכול להתרחש הוא אם הערך ברכיב הראשון אינו תואם לערך ברכיב השני של 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' } }

כעת הפעל את האפליקציה וראה על ידי שינוי הערך ברכיב השני לאחר שתבצע את הבחירה ברכיב הראשון.

מה הפירוש של מרחב שמות בתשחץ

אתה יכול לראות את הודעת השגיאה, שלא ניתן לחשב את התוצאה. תבחין כי הודעת השגיאה הודפסה באותה תווית התוצאה, וכי ההודעה ארוכה. אז זו הסיבה שהתווית הועברה מטה מהכיוון הקודם.

אז אפליקציית ההמרה שלנו הושלמה. תוכלו להוסיף יותר פונקציונליות לאפליקציה על פי בחירתכם ולהפוך אותה ליפה יותר בהתאם ליצירתיות שלכם.

יש לך שאלה עבורנו? הזכר אותם בסעיף ההערות ונחזור אליך.

פוסטים קשורים: