iOS基本UI元素示例教程

时间:2020-02-23 14:45:54  来源:igfitidea点击:

在本教程中,我们将讨论和实现基本的UI元素,例如文本字段,标签和按钮。

说明

我们在第一个教程本身中已经看到过,标签用于显示静态内容。
TextField是允许用户输入的UI元素。
按钮用于处理用户操作。
我们在第一个教程的基本级别上实现了按钮和标签。
让我们看一下UITextField。

iOS UITextField

UITextField支持使用委托对象来处理与编辑相关的事件处理。
当发生某些动作时,UITextField将调用委托方法,以允许对其行为进行自定义和控制。
为此,我们需要添加UITextFieldDelegate协议。

一些委托方法包括:

  • -(void)textFieldDidBeginEditing:(UITextField *)textField
  • -(void)textFieldDidEndEditing:(UITextField *)textField

我们可以从属性检查器中自定义UITextField,如下图所示。

占位符属性需要提示文本作为输入。
编辑时将"清除按钮"属性设置为"出现"。
单击文本字段右侧的按钮时,它将删除TexField中的所有字符。
键盘类型可以从下拉菜单中选择。
这些属性也可以通过编程设置。
我们也将以编程方式添加UITextField。

实作

我们将在ViewController上添加一个Label,Button和TextField。
将TextField拖到ViewController停靠文件的所有者按钮。
并选择代表。
打开助手编辑器,并将三个出口拖到头文件中并相应地命名。
您的屏幕应如下图所示。

Main.storyboardViewController应该看起来像下面给出的那样

您看到的红线是屏幕上UI元素之间的边距。
可以通过按住控制按钮并将线从一个UI元素拖到另一个UI元素来进行设置。
然后,我们可以从选项列表中进行选择。

ViewController.h代码如下:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITextFieldDelegate>

@property (strong, nonatomic) IBOutlet UITextField *myText;
@property (strong, nonatomic) IBOutlet UITextField *customText;
@property (strong, nonatomic) IBOutlet UIButton *button;
@property (strong, nonatomic) IBOutlet UILabel *label;

-(IBAction)showTextField;

@end

我们定义了一个自定义方法,稍后将实现该方法来处理按钮操作。
另外,我们还为UITextField添加了一个属性,该属性可以通过编程方式添加。

此时构建并运行项目。
您会看到您可以在文本字段中进行书写,但是由于未配置返回键和要关闭的外部点击,因此您将无法关闭键盘。

如果单击返回键,则协议将在我们的类中调用textFieldShouldReturn:委托方法。
我们将通过调用textfield对象上的resignFirstResponder方法来关闭键盘。

下面定义了" ViewController.m"。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  [self addTextFieldWithDifferentKeyboard];
  
  
  //Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
  [super didReceiveMemoryWarning];
  //Dispose of any resources that can be recreated.
}

- (IBAction)showTextField {
  self.label.text = self.myText.text;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
  UITouch *touch = [touches anyObject];
  if(![touch.view isMemberOfClass:[UITextField class]]) {
      [touch.view endEditing:YES];
  }
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
  NSLog(@"You entered %@",self.myText.text);
  [self.myText resignFirstResponder];
  return YES;
}

-(void) addTextFieldWithDifferentKeyboard{
  
  self.customText = [[UITextField alloc]initWithFrame:
                     CGRectMake(10, 200, 300, 30)];
  self.customText.delegate = self;
  self.customText.borderStyle = UITextBorderStyleRoundedRect;
  self.customText.keyboardType = UIKeyboardTypeNumberPad;
  self.customText.placeholder = @"Number pad keyboard";
  self.customText.returnKeyType = UIReturnKeyDone;
  self.customText.clearButtonMode=UITextFieldViewModeWhileEditing;
  self.customText.font = [UIFont systemFontOfSize:14];
  self.customText.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
  [self.view addSubview:self.customText];

}

@end

要在外面轻按时关闭键盘,请使用以下代码段。

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 UITouch *touch = [touches anyObject];
 if(![touch.view isMemberOfClass:[UITextField class]]) {
   [touch.view endEditing:YES];
 }
}

在文本字段中输入内容时,该文本字段的isEditing属性设置为YES。
endEditing:消息将传递到视图及其所有子视图。
如果我们通过YES,它将强制所有视图对象调用resignFirstResponder,从而关闭键盘。

使用[self addTextFieldWithDifferentKeyboard]以编程方式添加TextField。
CGRectMake(topX,topY,width,height)用于定义布局。
其他属性类似于从属性检查器中选择的属性。
我们使用了数字键盘输入类型的键盘。
TextField的输入类型很多,例如:

  • UIKeyboardTypeASCIICapable
  • UIKeyboardTypeNumbersAndPunctuation
  • UIKeyboardTypeURL
  • UIKeyboardTypeNumberPad
  • UIKeyboardTypePhonePad
  • UIKeyboardTypeNamePhonePad
  • UIKeyboardTypeEmailAddress
  • UIKeyboardTypeDecimalPad
  • UIKeyboardTypeTwitter

注意:在某些情况下,模拟器键盘可能不会弹出。
这是由于已经存在的硬件键盘。
转到模拟器->硬件->取消选中硬件键盘。
那就可以了

定义了按钮操作,以将标签文本更改为在ViewController中定义的TextField。