iOS基本UI元素示例教程

最新推荐文章于 2021-06-15 20:06:05 发布

cunchi4221

最新推荐文章于 2021-06-15 20:06:05 发布

阅读量267

点赞数

原文链接：https://www.journaldev.com/10550/ios-basic-ui-elements-example-tutorial

版权

In this tutorial we’re going to discuss and implement the basic UI elements such as text fields, labels and buttons.

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

总览 (Overview)

Labels as we had seen in the first tutorial itself, are used for displaying static content.
TextFields are UI elements that enable user input.
Buttons are used for handling user actions.
Buttons and Labels we had implemented at a basic level in the first tutorial. Let’s look into UITextField.

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

iOS UITextField (iOS UITextField)

UITextField supports the use of a delegate object to handle editing-related event handling. When certain actions occur, the UITextField will call delegate methods that allow its behaviour to be customised and controlled. For this to occur we need to add the UITextFieldDelegate Protocol.

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

Some delegate methods include :

一些委托方法包括：

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

We can customise the UITextField from the attributes inspector as shown in the image below.

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

The Placeholder attribute needs the hint text as the input.
Clear button attribute is set to Appears while editing. On clicking the button on the right of the textfield it deletes all the characters from the TexField. The Keyboard type can be chosen from the numerous options available in the dropdown. These attributes can also be set programmatically. We’ll add a UITextField programmatically too.

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

实作 (Implementation)

We’ll add a Label, Button and TextField onto the ViewController. Drag the TextField to the ViewController dock file’s owner button. And choose delegate. Open up the assistant editor and drag the three outlets onto the header file and name them accordingly. Your screen should look like the one given below.

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

The Main.storyboard ViewController should look like the one given below

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

The red lines you see are the margins between the UI elements on the screen. They’re set by holding control button and dragging the line from one UI element to the other. We can then chose from the list of options.

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

The ViewController.h code is given below:

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

We’ve defined a custom method that would be implemented later to handle the button action. Also we’ve added a property for a UITextField that would be added programmatically.

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

Building and run the project at this point. You’ll see that you’re able to write in the textfields but you’ll be unable to dismiss the keyboards since the return key and the tap outside to dismiss are not configured.

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

If the return key is clicked the protocol will call textFieldShouldReturn: delegate method in our class. We’ll dismiss the keyboard by calling the resignFirstResponder method on the textfield object.

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

The ViewController.m is defined below.

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

To dismiss the keyboard when tapped outside, the following code snippet is used.

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

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

When we’re typing in a text field, the isEditing property of the text field is set to YES. The endEditing: message is passed to a view and all of its subviews. If we pass YES, it forces any and all view objects to call resignFirstResponder, in turn dismissing the keyboard.

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

A TextField is added programmatically using [self addTextFieldWithDifferentKeyboard]
CGRectMake(topX, topY, width, height) is used to define the layout. The other attributes are similar to the one chosen from the attributes inspector. We’ve used a Number pad input type keyboard. There are many input types of the TextFields such as :

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

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

Note: The simulator keyboard may not pop up in some cases. This is due to an an already present hardware keyboard. Go to Simulator->Hardware-> Uncheck hardware keyboard. It would work fine then

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

The button action is defined to change the label text to the TextField that was defined in the ViewController.

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

The output of the application in action is shown below.

实际应用程序的输出如下所示。

This brings an end to this tutorial. You can download the BasicUI XCode Project from the link given below.

本教程到此结束。您可以从下面给出的链接下载BasicUI XCode项目 。

Download iOS Basic UI Elements Project 下载iOS Basic UI Elements Project

翻译自: https://www.journaldev.com/10550/ios-basic-ui-elements-example-tutorial

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS基本UI元素示例教程

In this tutorial we’re going to discuss and implement the basic UI elements such as text fields, labels and buttons. 在本教程中，我们将讨论和实现基本的UI元素，例如文本字段，标签和按钮。总览 (Overview)Labels as we had seen in the fi...
复制链接

扫一扫