iOS基础教程之界面初体验

demo源码 如果找不到,则到finish文件下找

创建项目

因为要学的是 UIwindow, 所以创建的不再是之前的Command Line Tool。 选择iOS=>Single View Application.
语言选择ObjectiveC, 项目名根据自己喜欢的取。

Hello UIwindow

main.m 入门文件不再出现在根目录上,而是在Supporting Files下。
默认引用了 <UIKit/UIKit.h>"AppDelegate.h"

点击项目文件
点击项目文件

删除 Main Interface的默认值Main
main-interface

然后打开AppDelegate.m 开始来手动来设置一下mainInterfacez

AppDelegate.m
1
2
3
4
5
6
7
8
9
10
11
12
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
// 设置大小和位置 `UIScreen mainScreen` 可以得到手机主屏幕 `bounds`是获得大小
_window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// 设置颜色为红色
_window.backgroundColor = [UIColor redColor];
// 设置根视频控制器
_window.rootViewController = [[UIViewController alloc] init];
// 将window设置为我们的主window
[_window makeKeyAndVisible];
return YES;
}

修改后按 cmd(⌘)+R或按左上角的三角形按钮来 run app。骚等片刻就可以看到 一个全屏红色的模拟器.
run-app;

UIView

新建一个项目。

  • UI的基类, 基础
  • UIView的属性
  • UIView的方法
  • UIView的自适应
ViewController.m
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
//
// ViewController.m
// UIwindow
//
// Created by Jsonz on 2017/4/27.
// Copyright © 2017年 Jsonz. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
NSLog(@"bilibili");
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 视图
UIView *view1 = [[UIView alloc] init]; // 实例化view
// 状态栏高度为20px 所以写view的时候一般会让出20px
view1.frame = CGRectMake(10, 30, 375-20, 667-20);
// 背景颜色
view1.backgroundColor = [UIColor redColor];
// 将视图加入到父视图中
[self.view addSubview: view1]; // self.view 是view1的父视图
NSLog(@"frame = x:%f y:%f w:%f h:%f", view1.frame.origin.x, view1.frame.origin.y, view1.frame.size.width, view1.frame.size.height);
// 一般叫边框大小, x && y 永远为0 w&&h 一致
NSLog(@"bounds = x:%f y:%f w:%f h:%f", view1.bounds.origin.x, view1.bounds.origin.y, view1.bounds.size.width, view1.bounds.size.height);
// center - 中心点
NSLog(@"center - x:%f y:%f", view1.center.x, view1.center.y);

// 图片 1.png
// 如果是二倍视网膜屏幕 准备 1@2x.png
// 同理还有 1@3x.png
NSLog(@"w:%f h:%f",[[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height);

// 父视图 只会有一个
UIView *superView = view1.superview;
superView.backgroundColor = [UIColor greenColor];

UIView *view2 = [[UIView alloc] init];
view2.frame = CGRectMake(10, 100, 300, 300); // 坐标全是根据自身父视图来设置的,不会跨层
// 给view设置唯一标识,方便父级视图获取辨认
view2.tag = 2;
view2.backgroundColor = [UIColor blackColor];
[view1 addSubview:view2];

UIView *view3 = [[UIView alloc] init];
view3.frame = CGRectMake(20, 50, 100, 100);
view3.tag = 3;
view3.backgroundColor = [UIColor purpleColor];
[view1 addSubview:view3];

// 子视图 会有多个
NSArray *subViewsArray = view1.subviews;
for (UIView *view in subViewsArray)
{

if (view.tag == 2)
view.backgroundColor = [UIColor whiteColor]; // view2变白色
}

// 如果知道子视图的tag 可以通过tag得到对应的子视图
UIView *subView = [view1 viewWithTag:3];
subView.backgroundColor = [UIColor greenColor];

// 修改层级 类似css 的 zIndex
// 当层交换之后, 对应的子视图的数组下标也会进行改变
// 同一个父视图中,先加入的view层级会比较低
UIView *view4 = [[UIView alloc] init];
view4.frame = CGRectMake(0, 100, 300, 300);
view4.backgroundColor = [UIColor yellowColor];
[self.view insertSubview:view4 atIndex:0]; // 这时候 view4会盖住view1的所有界面

// 交换两个层的视图
[superView exchangeSubviewAtIndex:0 withSubviewAtIndex:1];

//插入一个视图到指定层
UIView *view5 = [[UIView alloc] init];
view5.frame = CGRectMake(7, 80, 200, 200);
view5.backgroundColor = [UIColor blackColor];
[view1 insertSubview:view5 atIndex:1];

// 将一个view 放最顶层或最底层
[view1 bringSubviewToFront:view2]; // 顶层
[view1 sendSubviewToBack: view2]; // 底层

// 自适应
UIView *backView = [[UIView alloc] init];
backView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width / 2 - 25, [UIScreen mainScreen].bounds.size.height /2 - 25, 50, 50); // 自适应到屏幕中部
backView.backgroundColor = [UIColor orangeColor];
backView.tag = 1001;
// 准许子视图自适应
backView.autoresizesSubviews = YES;
[self.view addSubview: backView];

UIView *topView = [[UIView alloc] init];
topView.frame = CGRectMake(10, 10, 30, 30);
topView.backgroundColor = [UIColor greenColor];
// 再设置子视图的适应方式 左侧适应
topView.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; // 右, 左, 上, 下, 宽, 高 跟随父级自适应
[backView addSubview: topView];

// 按钮 下节课会讲到
UIButton *btn = [UIButton buttonWithType: UIButtonTypeSystem];
btn.frame = CGRectMake(10, 550, 355, 30);
btn.backgroundColor = [UIColor brownColor];
[btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview: btn];
}

-(void)btnClick
{
UIView *view = [self.view viewWithTag:1001];
view.frame = CGRectMake(view.frame.origin.x - 5, view.frame.origin.y -5, view.frame.size.width + 10, view.frame.size.height + 10);
}


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


@end

UILabel

  • 文本标签
  • UIColor 颜色类

新建一个项目

ViewController
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 文本标签
UILabel *label = [[UILabel alloc] init];
label.frame = CGRectMake(10, 100, 300, 30);
label.backgroundColor = [UIColor yellowColor];

// 文本
label.text = @"我是一个IOS FONT";
// 文字布局 NSTextAlignmentCenter NSTextAlignmentLeft NSTextAlignmentRight 等等
label.textAlignment = NSTextAlignmentCenter;
// 文字颜色
// clearColor透明色
// colorWithRed green blue alpha 类似css的rgba
label.textColor = [UIColor colorWithRed:.1 green:.8 blue:.2 alpha:1];
// label的透明度
label.alpha = .9;

// 字体设置 label.font里面
label.font = [UIFont systemFontOfSize: 25]; // 字号
// 加粗或倾斜
label.font = [UIFont boldSystemFontOfSize:25];// 加粗和25号字,会覆盖前面设置
label.font = [UIFont italicSystemFontOfSize:25]; // 倾斜

// 看系统有哪些字体
for (NSString *name in [UIFont familyNames])
{
NSLog(@"font = %@", name);
}

// 设置字体
label.font = [UIFont fontWithName:@"Bodoni 72 Smallcaps" size:25];
// 文字阴影
// label.shadowColor = [UIColor redColor];
// label.shadowOffset = CGSizeMake(1, 1);

// 多文字处理 会自动出现...
label.text = @"topView.autoresizingMask = UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; // 右, 左, 上, 下, 宽, 高 跟随父级自适应[backView addSubview: topView]";
// 如果要换行
// 1. 首先label要足够大
// 2. 设置换行模式
// 3. 设置显示行数
label.frame = CGRectMake(20, 20, [UIScreen mainScreen].bounds.size.width - 40, [UIScreen mainScreen].bounds.size.height - 40);
label.lineBreakMode = NSLineBreakByCharWrapping;
label.numberOfLines = 2; // 如果设置到-1或0 就不会限制行数,能显示多少行就显示多少行


[self.view addSubview:label];

}


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

UIImageView 图片view

新建一个项目,添加自己喜欢的照片到项目里。 比如我 肯定是添加GAKKI

add-files

ViewController.m
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

// 首先 随便加载几张图片到项目中

// 获取图片路径
NSString *path = [[NSBundle mainBundle] resourcePath]; // 工程目录
NSString *imgPath = [NSString stringWithFormat: @"%@/2.jpg", path]; // 拼接图片路径
// 后面参数为图片路径
UIImage *image = [[UIImage alloc] initWithContentsOfFile: imgPath]; // 加载完会释放,不会存在内存中,不过每次都会去加载
// image = [UIImage alloc] initWithData:<#(nonnull NSData *)#> 2进制格式图片加载
// UIImage *image1 = [UIImage imageNamed:@"2"]; // 这种直接写文件名,如果是png格式的,可以省略后缀名 这种方式直接把图片放到内存中,占用内存但是下次调用会很快。 比如qq表情,可以放到缓存(内存)中

// 图片显示必须要有载体
UIImageView *imageView = [[UIImageView alloc] initWithImage: image];
// image.size.width image.size.height
imageView.frame = CGRectMake(10, 100, 400, 400);

// 内容模式 居中: UIViewContentModeCenter
// 默认为UIViewContentModeScaleToFill 拉伸充满整个载体
// UIViewContentModeScaleAspectFit 拉伸但不改变比例,充满小的边框
// UIViewContentModeScaleAspectFill 拉伸但不改变比例,充满大的边框
// 学过css的 应该都很容易理解 background-size模式
imageView.contentMode = UIViewContentModeScaleAspectFit;

// UIImageView 动画 - 播放序列图 略!


// 图片显示在屏幕上的大小是载体来控制的
[self.view addSubview: imageView];


}


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