اولاً، حتماً متوجه شده اید که وقتی روی هر TextField/TextView کلیک می کنید، صفحه کلید ظاهر می شود. آن صفحه کلید فقط یک نمای ورودی پیش فرض Textfield یا TextView است.
ما می توانیم آن را با کمک UI Kit Framework تغییر دهیم.
حالا بیایید شروع کنیم،
- Xcode را باز کنید.
- روی Create a new Xcode project کلیک کنید.
- اکنون Single View Application را انتخاب کنید.
- -> Next را کلیک کنید.
- -> نام محصول و سایر فیلدهای خالی (در صورت وجود) را وارد کنید.
- اکنون مکانی را که می خواهید پروژه خود را در آن ذخیره کنید انتخاب کنید و روی Create کلیک کنید.
کد زیر را در ViewController.h بنویسید/کپی کنید.
- #
- import < UIKit / UIKit.h >
- @interface ViewController: UIViewController
- {
- UIDatePicker * DatePicker;
- UIPickerView * Picker;
- NSArray * CountryArray;
- NSArray * heightInch;
- NSArray * heightFeet;
- }
- @property(strong, nonatomic) IBOutlet UITextField * dateSelectionTextField;
- @property(strong, nonatomic) IBOutlet UITextField * countryTextField;
- @property(strong, nonatomic) IBOutlet UITextField * heightTextField;
- @end
همه را به ترتیب در ViewController.m کپی کنید
- #
- import "ViewController.h"
- @interface ViewController() < UIPickerViewDataSource, UIPickerViewDelegate >
- @end
- @implementation ViewController
- @synthesize dateSelectionTextField, countryTextField, heightTextField;
- - (void) viewDidLoad
- {
- [super viewDidLoad];
- // Do any additional setup after loading the view, typically from a nib.
اکنون ابتدا DatePicker را اختصاص می دهیم و ورودی dateSelectionTextField را به DatePicker تنظیم می کنیم .
- //For DatePicker
- DatePicker =
- [
- [UIDatePicker alloc] init
- ];
- DatePicker.datePickerMode = UIDatePickerModeDate; //You can change Picker mode here
- [self.dateSelectionTextField setInputView: DatePicker];
برای Picker یکسان است اما با برخی تغییرات رنگ سفارشی.
- //For Picker
- Picker =
- [
- [UIPickerView alloc] init
- ];
- Picker.delegate = self;
- Picker.dataSource = self;
- [Picker setShowsSelectionIndicator: YES];
- Picker.tintColor = [UIColor blackColor];
- Picker.backgroundColor = [UIColor colorWithRed: 153.0 green: 204.0 blue: 255.0 alpha: 2];
این آرایه ها مقادیر محتوا را در Picker نگه می دارند.
- //Arrays
- CountryArray =
- [
- [NSArray alloc] initWithObjects: @ "USA", @ "India", @ "France", nil
- ];
- heightFeet =
- [
- [NSArray alloc] initWithObjects: @ "3", @ "4", @ "5", @ "6", @ "7", @ "8", nil
- ];
- heightInch =
- [
- [NSArray alloc] initWithObjects: @ "0", @ "1", @ "2", @ "3", @ "4", @ "5", @ "6", @ "7", @ "8", @ "9", @ "10", @ "11", nil
- ];
این برای تنظیم InputView از TextField است.
توجه: تخصیص One Picker را می توان برای چندین فیلد متنی استفاده کرد.
- //ForPicker
- [self.countryTextField setInputView: Picker];
- [self.heightTextField setInputView: Picker];
اکنون نوار ابزاری ساخته خواهد شد که به راحتی کاربر را برای رفتن به فیلدهای متنی دیگر فراهم می کند.
- //For ToolBar
- UIToolbar * toolBar =
- [
- [UIToolbar alloc] initWithFrame: CGRectMake(0, 0, 320, 45)
- ];
- [toolBar setTintColor: [UIColor blueColor]];
- UIBarButtonItem * doneBtn =
- [
- [UIBarButtonItem alloc] initWithTitle: @ "Done"
- style: UIBarButtonItemStyleDone target: self action: @selector(Done)
- ];
- UIBarButtonItem * space =
- [
- [UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemFlexibleSpace target: nil action: nil
- ];
- UIBarButtonItem * prevBtn =
- [
- [UIBarButtonItem alloc] initWithImage: [UIImage imageNamed: @ "765-arrow-left.png"] style: UIBarButtonItemStylePlain target: self action: @selector(previous)
- ];
- UIBarButtonItem * nextBtn = [
- [UIBarButtonItem alloc] initWithImage: [UIImage imageNamed: @ "766-arrow-right.png"] style: UIBarButtonItemStylePlain target: self action: @selector(next)
- ];
- prevBtn.width = 20.0;
- nextBtn.width = 70.0;
- [toolBar setItems: [NSArray arrayWithObjects: prevBtn, nextBtn, space, doneBtn, nil]];
اکنون این نوار ابزار را به فیلدهای متنی اضافه می کند.
- //for date textfield
- [self.dateSelectionTextField setInputAccessoryView: toolBar];
- //for country textfield
- [self.countryTextField setInputAccessoryView: toolBar];
- //for Height textfield
- [self.heightTextField setInputAccessoryView: toolBar];
- }
این دکمه Action to Done را در نوار ابزار می دهد.
- //For Date picker
- -(void) Done
- {
- //for date picker only
- NSDateFormatter * formatter =
- [
- [NSDateFormatter alloc] init
- ];
- [formatter setDateFormat: @ "dd/MMM/YYYY"];
- self.dateSelectionTextField.text = [NSString stringWithFormat: @ "%@", [formatter stringFromDate: DatePicker.date]];
- [self.dateSelectionTextField resignFirstResponder];
- //forPicker
- [self.countryTextField resignFirstResponder];
- [self.heightTextField resignFirstResponder];
- }
اکنون اینها روش مورد نیاز برای PickerView هستند .
- //For Picker
- -(NSInteger) numberOfComponentsInPickerView: (UIPickerView * ) pickerView
- {
- if ([countryTextField isFirstResponder])
- {
- return 1;
- } else if ([heightTextField isFirstResponder])
- {
- return 2;
- } else
- return 1;
- }
- - (NSInteger) pickerView: (UIPickerView * ) pickerView numberOfRowsInComponent: (NSInteger) component
- {
- if ([countryTextField isFirstResponder])
- {
- return [CountryArray count];
- } else if ([heightTextField isFirstResponder])
- {
- if (component == 0)
- {
- return [heightFeet count];
- } else {
- return [heightInch count];
- }
- }
- return 1;
- }
- - (NSString * ) pickerView: (UIPickerView * ) pickerView titleForRow: (NSInteger) row forComponent: (NSInteger) component {
- if ([countryTextField isFirstResponder])
- {
- return [CountryArray objectAtIndex: row];
- } else if ([heightTextField isFirstResponder])
- {
- if (component == 0)
- {
- return [heightFeet objectAtIndex: row];
- } else
- {
- return [heightInch objectAtIndex: row];
- }
- }
- return 0;
- }
- - (void) pickerView: (UIPickerView * ) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component
- {
- if ([countryTextField isFirstResponder])
- {
- self.countryTextField.text = [CountryArray objectAtIndex: row];
- } else if ([heightTextField isFirstResponder])
- {
- [heightTextField setText: [NSString stringWithFormat: @ "%@' %@''", [heightFeet objectAtIndex: [Picker selectedRowInComponent: 0]],
- [heightInch objectAtIndex: [Picker selectedRowInComponent: 1]]
- ]];
- }
- }
ممکن است این سوال برای شما پیش بیاید که چرا از این عبارات if-else استفاده می شود؟
بنابراین پاسخ این است که آنها مقادیر مختلف و فیلدهای متنی مختلف را از طریق Same Picker ارائه میکنند.
حالا اجازه میدهیم ادامه دهیم، کدنویسی زیر عملکردی را برای دکمههای قبلی و بعدی در نوار ابزار ارائه میدهد.
- -(void) previous {
- if ([countryTextField isFirstResponder])
- {
- [self.countryTextField resignFirstResponder];
- [dateSelectionTextField becomeFirstResponder];
- } else if ([heightTextField isFirstResponder])
- {
- [self.heightTextField resignFirstResponder];
- [countryTextField becomeFirstResponder];
- }
- }
- - (void) next
- {
- if ([dateSelectionTextField isFirstResponder])
- {
- NSDateFormatter * formatter =
- [
- [NSDateFormatter alloc] init
- ];
- [formatter setDateFormat: @ "dd/MMM/YYYY"];
- self.dateSelectionTextField.text = [NSString stringWithFormat: @ "%@", [formatter stringFromDate: DatePicker.date]];
- [self.dateSelectionTextField resignFirstResponder];
- [countryTextField becomeFirstResponder];
- } else if ([countryTextField isFirstResponder])
- {
- [self.countryTextField resignFirstResponder];
- [heightTextField becomeFirstResponder];
- }
- }