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

Xcode.png

序篇
了解模拟器的设定

模拟器.png

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

创建工程1

创建工程2.png

Paste_Image.png

修改关键字.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

管理视图的层级关系:
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];