iOS Objective-C UI开发入门:UIView与基础控件保姆式教程

iOS Objective-C UI开发入门:UIView与基础控件保姆式教程

一、UIView基础概念

每个UI控件都是UIView的子类,核心属性如下:

属性 说明
frame 视图在父坐标系中的位置和尺寸(CGRect: x, y, width, height)
bounds 视图在自身坐标系中的位置和尺寸(默认(0,0,width,height))
center 视图中心点在父坐标系中的坐标(CGPoint)
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController


- (void)viewDidLoad {
    [super viewDidLoad];
    // 示例:创建红色视图
    UIView *redView = [[UIView alloc] init];
    redView.frame = CGRectMake(100, 100, 200, 150); // x,y,宽,高
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView]; // 添加到主视图

    NSLog(@"Center: %@", NSStringFromCGPoint(redView.center));

}

@end

二、基础控件详解

1. UILabel(文本标签)

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 300, 200, 40)];
label.text = @"Hello Objective-C!";
label.textColor = [UIColor blueColor];
label.font = [UIFont systemFontOfSize:18];
label.textAlignment = NSTextAlignmentCenter;
[self.view addSubview:label];

2. UIButton(按钮)

- (void)viewDidLoad {
    [super viewDidLoad];
    。。。。。。
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
    button.frame = CGRectMake(50, 400, 200, 50);
    [button setTitle:@"点击我" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    button.backgroundColor = [UIColor purpleColor];

    // 添加点击事件
    [button addTarget:self
               action:@selector(buttonClicked)
     forControlEvents:UIControlEventTouchUpInside];

    [self.view addSubview:button];
    
}

// 按钮点击响应方法
- (void) buttonClicked {
    NSLog(@"按钮被点击了!");
}

3. UITextField(输入框)

UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(50, 500, 200, 40)];
textField.placeholder = @"请输入内容";
textField.borderStyle = UITextBorderStyleRoundedRect;
textField.delegate = self; // 设置代理
[self.view addSubview:textField];
// 实现UITextFieldDelegate方法
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    [textField resignFirstResponder]; // 收起键盘
    NSLog(@"输入内容: %@", textField.text);
    return YES;
}

4. UIImageView(图片视图)

用于显示图片的基础控件

// 创建并设置图片
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 200, 200)];
imageView.image = [UIImage imageNamed:@"demo_image"]; // 确保图片在Assets.xcassets中
imageView.contentMode = UIViewContentModeScaleAspectFit; // 图片缩放模式
imageView.layer.cornerRadius = 10; // 圆角半径
imageView.clipsToBounds = YES; // 裁剪超出部分
[self.view addSubview:imageView];

// 添加点击手势
imageView.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] 
                                initWithTarget:self 
                                        action:@selector(imageTapped)];
[imageView addGestureRecognizer:tap];

5. UISwitch(开关控件)

用于表示开/关状态的控件

UISwitch *toggleSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(50, 320, 0, 0)];
toggleSwitch.on = YES; // 默认开启
[toggleSwitch addTarget:self 
                 action:@selector(switchValueChanged:) 
       forControlEvents:UIControlEventValueChanged];
[self.view addSubview:toggleSwitch];

// 开关状态变化回调
- (void)switchValueChanged:(UISwitch *)sender {
    NSLog(@"开关状态: %@", sender.on ? @"开" : @"关");
    // 根据开关状态执行操作
}

6. UISlider(滑块控件)

用于选择某个范围内的值

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(50, 380, 250, 40)];
slider.minimumValue = 0;   // 最小值
slider.maximumValue = 100; // 最大值
slider.value = 50;         // 当前值
slider.minimumTrackTintColor = [UIColor blueColor];   // 左侧轨道颜色
slider.maximumTrackTintColor = [UIColor lightGrayColor]; // 右侧轨道颜色
[slider addTarget:self 
           action:@selector(sliderValueChanged:) 
 forControlEvents:UIControlEventValueChanged];
[self.view addSubview:slider];

// 滑块值变化回调
- (void)sliderValueChanged:(UISlider *)sender {
    NSLog(@"当前值: %.1f", sender.value);
}

7. UIActivityIndicatorView(加载指示器)

俗称"菊花"加载动画

// 创建加载指示器
UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] 
                                     initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleLarge];
spinner.center = self.view.center; // 居中显示
spinner.color = [UIColor purpleColor]; // 颜色设置
[self.view addSubview:spinner];

// 开始/停止动画
[spinner startAnimating]; // 显示加载动画
// [spinner stopAnimating]; // 停止动画

8. UIProgressView(进度条)

显示任务进度

UIProgressView *progressView = [[UIProgressView alloc] 
                                 initWithProgressViewStyle:UIProgressViewStyleDefault];
progressView.frame = CGRectMake(50, 450, 250, 20);
progressView.progress = 0.3; // 初始进度30%
progressView.progressTintColor = [UIColor greenColor]; // 进度条颜色
progressView.trackTintColor = [UIColor lightGrayColor]; // 背景条颜色
[self.view addSubview:progressView];

// 更新进度
[progressView setProgress:0.75 animated:YES]; // 动画更新到75%

9. UISegmentedControl(分段控件)

提供多个选项的选择器

NSArray *segments = @[@"选项1", @"选项2", @"选项3"];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:segments];
segmentedControl.frame = CGRectMake(50, 500, 250, 40);
segmentedControl.selectedSegmentIndex = 0; // 默认选中第一个
[segmentedControl addTarget:self 
                     action:@selector(segmentChanged:) 
           forControlEvents:UIControlEventValueChanged];
[self.view addSubview:segmentedControl];

// 分段选择变化回调
- (void)segmentChanged:(UISegmentedControl *)sender {
    NSLog(@"选中了: %@", [sender titleForSegmentAtIndex:sender.selectedSegmentIndex]);
}

三、控件使用技巧总结

1. 通用属性

view.backgroundColor = [UIColor whiteColor]; // 背景色
view.alpha = 0.8;                          // 透明度
view.hidden = NO;                           // 显示/隐藏
view.userInteractionEnabled = YES;          // 是否接受交互

调试助手

// 添加临时边框
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.borderWidth = 1.0;

// 打印控件信息
NSLog(@"Frame: %@", NSStringFromCGRect(view.frame));

布局建议

  • 使用CGRectMake(x, y, width, height)设置位置尺寸
  • 对于居中元素:view.center = self.view.center;
  • 使用[UIScreen mainScreen].bounds获取屏幕尺寸

四、完整示例:登录界面组合

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 背景图
    UIImageView *bgImage = [[UIImageView alloc] initWithFrame:self.view.bounds];
    bgImage.image = [UIImage imageNamed:@"login_bg"];
    bgImage.contentMode = UIViewContentModeScaleAspectFill;
    [self.view addSubview:bgImage];
    
    // 登录框容器
    UIView *loginBox = [[UIView alloc] initWithFrame:CGRectMake(30, 150, self.view.frame.size.width-60, 300)];
    loginBox.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.8];
    loginBox.layer.cornerRadius = 10;
    
    // 标题
    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, loginBox.frame.size.width, 40)];
    titleLabel.text = @"用户登录";
    titleLabel.textAlignment = NSTextAlignmentCenter;
    titleLabel.font = [UIFont boldSystemFontOfSize:24];
    
    // 用户名输入框
    UITextField *userField = [[UITextField alloc] initWithFrame:CGRectMake(20, 80, loginBox.frame.size.width-40, 40)];
    userField.placeholder = @"请输入用户名";
    userField.borderStyle = UITextBorderStyleRoundedRect;
    
    // 密码输入框
    UITextField *passField = [[UITextField alloc] initWithFrame:CGRectMake(20, 130, loginBox.frame.size.width-40, 40)];
    passField.placeholder = @"请输入密码";
    passField.secureTextEntry = YES; // 密码模式
    passField.borderStyle = UITextBorderStyleRoundedRect;
    
    // 记住密码开关
    UISwitch *rememberSwitch = [[UISwitch alloc] initWithFrame:CGRectMake(20, 180, 0, 0)];
    UILabel *switchLabel = [[UILabel alloc] initWithFrame:CGRectMake(70, 180, 100, 30)];
    switchLabel.text = @"记住密码";
    
    // 登录按钮
    UIButton *loginBtn = [UIButton buttonWithType:UIButtonTypeSystem];
    loginBtn.frame = CGRectMake(50, 230, loginBox.frame.size.width-100, 44);
    [loginBtn setTitle:@"登 录" forState:UIControlStateNormal];
    loginBtn.backgroundColor = [UIColor systemBlueColor];
    [loginBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    loginBtn.layer.cornerRadius = 6;
    
    // 组装登录框
    [loginBox addSubview:titleLabel];
    [loginBox addSubview:userField];
    [loginBox addSubview:passField];
    [loginBox addSubview:rememberSwitch];
    [loginBox addSubview:switchLabel];
    [loginBox addSubview:loginBtn];
    
    [self.view addSubview:loginBox];
}
// 按钮点击响应方法
- (void) buttonClicked {
    NSLog(@"登录成功!");
}

相关推荐

为何要学习Objective-C?从环境搭建开始-CSDN博客文章浏览阅读746次,点赞26次,收藏28次。在Objective-C开发中,你会频繁遇到以"NS"开头的类名和函数名,比如NSLog、NSString、NSArray等。这个"NS"前缀其实有着重要的历史渊源和技术含义。https://shuaici.blog.csdn.***/article/details/148535298【iOS初体验】Hello, UIKit! - 第一个iOS App保姆式教程-CSDN博客文章浏览阅读600次,点赞14次,收藏17次。本文系统梳理了Objective-C核心数据类型与操作,分为三大部分:1)回顾C语言基础(数据类型、运算符、控制流);类:对象的蓝图(定义属性和方法)对象:类的实例(内存中的具体实体)方法:对象的行为(实例方法 - / 类方法 +)(iOS 13+)负责管理应用窗口场景。Objective-C面向对象编程:类、对象、方法详解(保姆级教程)-CSDN博客。我们将创建一个简单的应用,点击按钮可以改变标签上的文字。https://shuaici.blog.csdn.***/article/details/148588751

转载请说明出处内容投诉
CSS教程网 » iOS Objective-C UI开发入门:UIView与基础控件保姆式教程

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买