按钮示例
目标
掌握按钮的不同样式掌握按钮的图像的设置掌握 UIKit 坐标系掌握修改 frame 的方法通过纯代码的方式创建并使用按钮代码重构的简单演练
代码演练
按钮的几种状态
storyboard 开发
typedef enum :
NSUInteger {
CZDirectoryLeft =
100,
CZDirectoryTop =
101,
CZDirectoryRigth =
102,
CZDirectoryBottom =
103,
} CZDirectoryType;
@interface ViewController ()
@property (
weak,
nonatomic)
IBOutlet UIButton *heroButton;
@end
@implementation ViewController
- (
IBAction)clickDirectoryButton:(
UIButton *)sender {
CGRect rect = _heroButton.frame;
CGFloat distance =
10;
switch (sender.tag) {
case CZDirectoryLeft:
NSLog(
@"左");
rect.origin.x -= distance;
break;
case CZDirectoryTop:
NSLog(
@"上");
rect.origin.y -= distance;
break;
case CZDirectoryRigth:
NSLog(
@"右");
rect.origin.x += distance;
break;
case CZDirectoryBottom:
NSLog(
@"下");
rect.origin.y += distance;
break;
default:
break;
}
_heroButton.frame = rect;
}
@end
小结
不要使用魔法数字(Magic Number)
设置按钮图像时,一定注意状态
修改按钮的 frame 时,因为 frame 是结构体不是对象,因此不能直接设置
设置控件的 tag 值时,不要从 0 开始,因为整数的默认值是 0
UIKit 坐标系示意图如下:
纯代码开发
搭建设置背景界面 & 飞机按钮
#pragma mark - 准备界面
- (
void)setupUI {
UIImage *backgroundImage = [
UIImage imageNamed:
@"background"];
UIImageView *backgroundImageView = [[
UIImageView alloc] initWithImage:backgroundImage];
[
self.view addSubview:backgroundImageView];
backgroundImageView.frame =
self.view.bounds;
UIImage *heroNormalImage = [
UIImage imageNamed:
@"hero1"];
UIImage *heroHighlightImage = [
UIImage imageNamed:
@"hero2"];
UIButton *heroButton = [[
UIButton alloc] init];
[heroButton setImage:heroNormalImage forState:
UIControlStateNormal];
[heroButton setImage:heroHighlightImage forState:
UIControlStateHighlighted];
[heroButton sizeToFit];
heroButton.center =
self.view.center;
[
self.view addSubview:heroButton];
_heroButton = heroButton;
[
self setupActionButtons];
}
实现 setupActionButtons 方法添加按钮
- (
void)setupActionButtons {
CGPoint center =
self.view.center;
CGFloat width =
40;
CGRect rect =
CGRectMake(center.x - width *
0.5, center.y +
200, width, width);
[
self buttonWithImageName:
@"left" rect:rect offsetX:
-40 offsetY:
0 tag:CZDirectoryLeft];
[
self buttonWithImageName:
@"right" rect:rect offsetX:
40 offsetY:
0 tag:CZDirectoryRight];
[
self buttonWithImageName:
@"top" rect:rect offsetX:
0 offsetY:
-40 tag:CZDirectoryTop];
[
self buttonWithImageName:
@"bottom" rect:rect offsetX:
0 offsetY:
40 tag:CZDirectoryBottom];
}
- (
UIButton *)buttonWithImageName:(
NSString *)imageName rect:(
CGRect)rect offsetX:(
CGFloat)offsetX offsetY:(
CGFloat)offsetY tag:(
NSInteger)tag {
UIButton *button = [[
UIButton alloc] init];
NSString *normalName = [imageName stringByAppendingString:
@"_normal"];
NSString *highlightedName = [imageName stringByAppendingString:
@"_highlighted"];
[button setImage:[
UIImage imageNamed:normalName] forState:
UIControlStateNormal];
[button setImage:[
UIImage imageNamed:highlightedName] forState:
UIControlStateHighlighted];
[
self.view addSubview:button];
button.frame =
CGRectOffset(rect, offsetX, offsetY);
button.tag = tag;
[button addTarget:
self action:
@selector(clickDirectoryButton:) forControlEvents:
UIControlEventTouchUpInside];
return button;
}
小结
以下内容必须掌握!!!
视图相关
向视图添加子视图的方法
[
self.view addSubview:button];
CGRectOffset 可以方便基于一个已有的 CGRect 计算偏移结果
图像相关
实例化图像
[
UIImage imageNamed:normalName]
实例化图像视图
UIImageView *backgroundImageView = [[
UIImageView alloc] initWithImage:backgroundImage];
图像视图会使用给定的图像设置大小
图像 vs 图像视图
图像类似于照片,是一个二进制的数据
图像视图类似于相框,用于显示图像内容
按钮相关
创建按钮
UIButton *button = [[
UIButton alloc] init];
设置按钮图像/标题一定要指定状态
[heroButton setImage:heroNormalImage forState:
UIControlStateNormal];
addTarget 可以给按钮添加监听方法,如果要带参数,需要在方法名后面添加 :
按钮的监听事件是 UIControlEventTouchUpInsidesizeToFit 可以应用于 按钮、标签、图像视图,会根据当前的内容自动调整大小
图像视图 vs 按钮
图像视图只显示一张图像,默认不能交互,没有状态
按钮可以设置多张图像,默认可以交互,有四个状态:默认、高亮、禁用、选中,其中禁用和选中状态需要通过代码设置
转载请注明原文地址: https://ju.6miu.com/read-13965.html