傳說(shuō)中生成UI界面有三種方法屋确，純代碼，xib，stroybroad攻臀，代碼編輯是一切的基礎(chǔ)焕数，我們首先學(xué)習(xí)用代碼創(chuàng)建視圖。
一刨啸、UI工程建立
1.創(chuàng)建工程（xcode6.4）
快捷鍵Shift+command+n創(chuàng)建工程
選擇ios->Application->SingleVIewApplication
創(chuàng)建后打開(kāi)工程文件列表如下圖
點(diǎn)開(kāi)左側(cè)的文件列表堡赔，進(jìn)入info.plist文件，它是一個(gè)字典设联，將key值為Main storyboard file base name善已，value值為main的一行內(nèi)容刪去，點(diǎn)擊該行會(huì)有個(gè)加號(hào)和減號(hào)离例，點(diǎn)擊減號(hào)即可刪除换团，運(yùn)行工程就不會(huì)關(guān)聯(lián)到Main.storyboard，可以刪去
接著點(diǎn)開(kāi)AppDelegate.m文件宫蛆，在下面的launch函數(shù)中添加代碼：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. return YES;}
2.添加代碼艘包，創(chuàng)建應(yīng)用程序主窗口UIWindow
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//1.創(chuàng)建window
self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
//Frame：代表視圖的大小
//[UIScreen mainScreen].bounds是整個(gè)屏幕的大小，初始化時(shí)將window大小設(shè)置為整個(gè)屏幕
//2.將window的背景顏色設(shè)置為灰色耀盗，默認(rèn)為透明
[self.window setBackgroundColor:[UIColor grayColor]];
//3.將初始化好的window設(shè)置為主window并且顯示
[self.window makeKeyAndVisible];
//如果Xcode是7.0以上版本想虎，必須添加以下代碼，創(chuàng)建視圖控制器
//4.設(shè)置根視圖控制器
[self.window setRootViewController:[[UIViewController alloc]init]];
//下面創(chuàng)建UIView
CGRect frame = CGRectMake(0, 0, 150, 150);//創(chuàng)建一個(gè)長(zhǎng)方形結(jié)構(gòu)體叛拷，用于UIView的位置和大學(xué)
UIView *myView = [[UIView alloc]initWithFrame:frame];//初始化UIView
[myView setBackgroundColor:[UIColor redColor]];//設(shè)置背景色舌厨，ios9之后，基本所有視圖默認(rèn)為透明色忿薇，為了看見(jiàn)要設(shè)置背景色
[self.window addSubview:myView];//添加子視圖
//這就是在UIWindow上面添加UIView裙椭，相當(dāng)于圖片一層層貼上去，同樣我們也可以給UIView添加UIView子視圖
return YES;
}
運(yùn)行后可以看見(jiàn)灰色背景左上角貼了一塊紅色方塊
二煌恢、UI期的基礎(chǔ)類(lèi) UIView簡(jiǎn)介
1.什么是UIView?
UIView表示屏幕上的一塊矩形區(qū)域
它在App中占有絕對(duì)重要的地位
因?yàn)閕OS幾乎所有可視化控件都是UIview的子類(lèi)
負(fù)責(zé)渲染區(qū)域的內(nèi)容
并且影響該區(qū)域內(nèi)發(fā)生的觸摸事件
2.基本使用
i.確定視圖的位置和大小骇陈，在視圖初始化的時(shí)候（initWithFrame）需要傳遞一個(gè)參數(shù)震庭，此參數(shù)為結(jié)構(gòu)體（CGRect）瑰抵，也就是一個(gè)矩形，包含矩形的左上點(diǎn)（orgin.x&orgin.y）器联，以及矩形的長(zhǎng)寬（size.width&size.height)二汛，iOS中以左上點(diǎn)為原點(diǎn)（0,0)
ii.背景顏色的設(shè)置：每一個(gè)視圖及其子類(lèi)都會(huì)有一個(gè)屬性backgroundColor，參數(shù)為UIColor類(lèi)型
iii.將初始化好的視圖呈現(xiàn)在父視圖上面：[父視圖 addSubview:子視圖]拨拓，addSubview調(diào)用越早肴颊，視圖層級(jí)越底層
#pragma mark -- 基本方法和屬性
//初始化和設(shè)置frame
UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];
UIView *redView = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 10, 10)];
//設(shè)置中心點(diǎn)
myView.center = CGPointMake(100, 100);
//背景色
myView.backgroundColor = [UIColor blueColor];
//顯示和隱藏
myView.hidden = NO;
//設(shè)置透明度0~1
myView.alpha = 1;
//獲取父視圖
UIView *mySuperView = [myView superview];
//獲得子視圖，得到一個(gè)數(shù)值
NSArray *viewArray = [myView subviews];
//標(biāo)記tag,為避免與系統(tǒng)沖突渣磷，設(shè)置1000以上
myView.tag = 1000;
#pragma mark -- 層級(jí)關(guān)系變換的方法
//添加到父視圖
[self.view addSubview:myView];
//在指定的index插入子視圖
[self.view insertSubview:myView atIndex:1];
//在指定的視圖上添加子視圖
[mySuperView insertSubview:myView aboveSubview:redView];
//在指定的視圖下面添加子視圖
[mySuperView insertSubview:myView belowSubview:redView];
```
**三婿着、示例代碼，創(chuàng)建5x8彩色貼圖**
在AppDelegate.m中l(wèi)aunch函數(shù)中寫(xiě)上如下代碼即可
-
(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];float screenWith = self.window.frame.size.width;
float screenHeight = self.window.frame.size.height;
float width = screenWith/5;
float height = screenHeight/8;
NSLog(@"width = %f,height = %f",width,height);
for (int i = 0; i < 5; i++) {
for (int j = 0; j< 8; j ++) {
UIView myView = [[UIView alloc]initWithFrame:CGRectMake(widthi, height*j, width, height)];
//產(chǎn)生隨機(jī)顏色
//給每個(gè)視圖設(shè)置數(shù)組中的顏色
[myView setBackgroundColor:[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1]];
[self.window addSubview:myView];
}
}
return YES;
}
運(yùn)行效果如下（每次不一樣）:
謝謝觀看，錯(cuò)誤之處歡迎指正竟宋，明天繼續(xù)