UI初章--UIVIew基础部分

这里我使用的是Xcode6.32版本:

Xcode.png

序篇
了解模拟器的设定

模拟器.png
需求:了解iPhone的移动终端的各种信息.
第一部分

首先,我们要创建一个UI的工程文件,这里呢,创建的方法和OC类似,但是因为是学习基础我们这里使用空模板,步骤如图:

创建工程1
之后要给工程起一个名字,这里,名字中最好不要出现汉字,下划线,数字等,根据苹果公司的代码规范,这里尽量使用纯英文的名字.关于Organization Identifier和Organization Name 暂时不用管.
创建工程2.png
然后就是选择存储在那个文件夹,这个根据自己的分类习惯自己拟定.
然后这里生成的工程文件是在ARC的模式下生成的,如果你使用MRC开发的话需要改变编译模式.点击左侧的Test工程名->选择TARGETS目录下的Test->选择Test右侧上方的Build Settings ->在搜索框内搜auto->将搜索到的目录中的Objective-C Automatic Reference Counting 右侧的YES 改为NO.如图示:
![修改为MRC环境.png . . .]
Paste_Image.png
那么问题来了,在MRC的环境下@property的关键字还是strong么?由系统自动生成的代码中的alloc需要自己释放么?定义属性之后还要重写dalloc么?
在MRC环境下,@property的关键字要使用retain不能在使用strong了,有系统生成的方法中的alloc也需要我们自己手动释放.定义一个属性的同时为了最后一次能被准确的释放掉,防止野指针的非法访问定要重写dealloc方法.具体内容如下:
修改关键字.png 重写dealloc方法和手动释放内存.png

到了这里就算完成了一个基本的框架.
接下来我们要做什么事呢?当然是先了解一下自动生成的方法完成的工作啦.
这里我们主要看:- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions;
这个块内容.下面我给各行代码加上注释方便理解,再此不多做解释,看图:

application方法示意.png

理解了代码的含义就需要我们自己来动手完成一个UIView的代码了,在独立完成之前我们需要对UIView的属性进行了解:
UIView(视图类):代表屏幕上的一块矩形区域,在屏幕上看到的一个任何元素都是UIView或者 UIView的子类.
要画出一个矩形,要明确矩形区域的:
1.大小 -- 宽和高
2.位置 -- 视图左上角点的坐标:x(横坐标), y(纵坐标)
UIView视图相关的属性:
1.backgroundColor:背景颜色
2.hidden:控制视图的显隐性,若为YES:隐藏,若为NO:显示
3.alpha:透明度 范围:0.0-1.0
4.superview:获取一个视图的父视图.一个视图只有一个父视图
5.subviews:获取一个视图所有的子视图,返回一个数组(特点是有序的) (数组中子视图的位置和添加的子视图的顺序一致)
6.tag:视图的唯一标识,是一个指整数值,给100以上
快速创建结构体变量的方法:
CGRect -- CGRectMake() 包含位置和大小
CGPoint -- CGPointMake() 包含位置 X和Y
CGSize -- CGSizeMake() 包含大小:width和height
了解了这些,那我们是不是就可以尝试着自己创建一个View了呢?
创建一个View的四个步骤:

//1.创建视图对象
UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
//2.更改背景颜色
redView.backgroundColor = [UIColor blackColor];
//3.添加到父视图上 -- window上
[self.window addSubview:redView];
//4.释放所有权 -- 对应alloc操作
[redView release];

下面我们尝试创建一个测试图:
创建一个绿色视图,位置大小分别为(100,100,100,100)

UIView *greenView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
greenView.backgroundColor = [UIColor greenColor];
[self.window addSubview:greenView];
[greenView release];

效果如下:

测试图效果.png

那么难度加深的一点的效果图如下该怎么实现呢?

自测题.png
第二部分
通过之前的我们了解了View的一些相关的知识,第二部分则是对第一部分的补充,但同样是基础内容.在说第二部分之前我们要先了解一下内容:

管理视图的层级关系:
1.一个视图只有一个父视图,但是可以有多个子视图
2.视图subviews中的元素的位置和子视图添加的顺序一致,越晚添加的视图处在数组的最后位置
3.晚添加的视图如果和之前视图有重叠部分,会覆盖掉之前的
4.子视图永远显示在父视图的前面
5.添加子视图和调整视图的层级关系需要父视图来调用对应的方法.
6.如果要移除某个视图,直接由移除的视图调用removeFromSupview方法即可.
视图具有的和位置相关的属性:
1.frame:既包含大小,也包含位置,而位置是视图区域左上角的点的坐标,现对于父视图坐标原点的距离.
2.certer:中心点的位置.
3.bounds:既包含大小,也包含位置,而位置是视图区域左上角的点的坐标,现对于自身视图坐标原点的距离.(改变bounds中的X,Y会造成自身视图坐标原点位置发生变化,影响子视图位置)
根据上面的讲述完成如下效果图:

效果图.png
具体代码实现如下:

//红色视图
UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
redView.backgroundColor = [UIColor redColor];
[self.window addSubview:redView];
[redView release];

//黄色视图
UIView *yellowView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
yellowView.backgroundColor = [UIColor yellowColor];
[self.window addSubview:yellowView];
[yellowView release];

//绿色视图
UIView *greenView = [[UIView alloc]initWithFrame:CGRectMake(150, 250, 200, 200)];
greenView.backgroundColor = [UIColor greenColor];
[self.window addSubview:greenView];
[greenView release];

//蓝色视图
UIView *blueView = [[UIView alloc]initWithFrame:CGRectMake(20, 20, 300, 400)];
blueView.backgroundColor = [UIColor blueColor];

//将蓝色视图添加到红色视图和黄色视图之间
//[self.window insertSubview:blueView belowSubview:yellowView];
//[self.window insertSubview:blueView aboveSubview:redView];
[self.window insertSubview:blueView atIndex:0];

//该方法将视图添加到数组的最后一个位置
//[self.window addSubview:blueView];//视图的顺序由添加到数组的顺序决定,即数组下标决定
[blueView release];

//根据需求完成效果:
//需求:
//1.把蓝色视图移到最后
[self.window sendSubviewToBack:blueView];
//2.把蓝色视图移到最前
[self.window bringSubviewToFront:blueView];
//3.将蓝色视图和红色视图对调
[self.window exchangeSubviewAtIndex:0 withSubviewAtIndex:3];
//4.干掉蓝色视图
[blueView removeFromSuperview];