慕課網_《iOS基礎教程之介面初體驗》學習總結

妙手空空發表於2017-05-16
iOS

2017年05月15日星期一
說明：本文部分內容均來自慕課網。@慕課網：http://www.imooc.com
教學示例原始碼：無
個人學習原始碼：https://github.com/zccodere/s…

第一章：大V有話說

1-1 各種叨嘮

什麼是MVC

Model
View
Controller
MVC是一種設計模式
MVC不僅是設計模式，更是高於框架和設計模式的
MVC是一種思想

MVC優點

低耦合性
高重用性
低開發成本
高可維護性

第二章：UIWindow-介面來了

2-1 UIWindow-1

UIWindow1

我們的手機介面
UIWindow例項化
UIWindow的級別

2-1 UIWindow-2

window的作用

作為一個大容器，包含很多子view
可以轉遞觸控訊息到控制元件

程式碼演示：

// 例項化window
_window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// 給window設定背景顏色
_window.backgroundColor = [UIColor redColor];
// 指定viewcontroller
_window.rootViewController = [[UIViewController alloc] init];
// 成為主window
[_window makeKeyAndVisible];

第三章：UIView-所有控制元件的載體

3-1 UIView-1

UIView

UI的基類，基礎
UIVew的屬性
UIView的方法
UIView的自適應

程式碼演示：

// 建立檢視
UIView *view1 = [[UIView alloc] init];
// 設定邊框-位置大小
view1.frame = CGRectMake(10, 30, 394, 696);
// 背景顏色
view1.backgroundColor = [UIColor redColor];
// 將檢視加入到父檢視中
[self.view addSubview:view1];

3-2 UIView-2

檢視frame屬性

x：距左上角的水平距離
y：距左上角的垂直距離
width：寬度
height：高度

程式碼演示：

/*
 機型  螢幕尺寸 解析度 倍率  圖片解析度
 3GS  3.5寸 320*480 @1x
 4/4s 3.5寸 320*480 @2x 640*960
 5/5c/5s 4.0寸 320*568 @2x 640*1136
 6    4.7寸 375*667 @2x 750*1334
 6plus 5.5寸 414*736 @3x 1242*2208
 
 */

// 3-2
// 獲取當前螢幕

int width = [[UIScreen mainScreen] bounds].size.width;
int height = [[UIScreen mainScreen] bounds].size.height;
NSLog(@"width:%d height:%d",width,height);

3-3 UIView-3

程式碼演示：

// 狀態列高度為20px，我們在設定控制元件frame時需要讓出20px。
NSLog(@"x:%f y:%f w:%f h:%f",view1.frame.origin.x,view1.frame.origin.y,view1.frame.size.width,view1.frame.size.height);

// bounds 邊框大小，x和y永遠為0
NSLog(@"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(@"x:%f y:%f",view1.center.x,view1.center.y);

3-4 UIView-4

程式碼演示：

// 父檢視
UIView *superView = view1.superview;
superView.backgroundColor = [UIColor greenColor];
// 座標是根據父檢視的位置來設定的，不會垮層
UIView *view2 = [[UIView alloc] init];
view2.frame = CGRectMake(10, 100, 300, 30);
view2.backgroundColor = [UIColor blackColor];
// 檢視唯一標識
view2.tag = 2;
[view1 addSubview:view2];

UIView *view3 = [[UIView alloc] init];
view3.frame = CGRectMake(20, 50, 100, 100);
view3.backgroundColor = [UIColor purpleColor];
// 檢視唯一標識
view3.tag = 3;
[view1 addSubview:view3];

// 子檢視
// 方式一：獲取全部子檢視
NSArray *subViewArray = view1.subviews;
for (UIView *viewTemp in subViewArray) {
    
    if(viewTemp.tag == 2){
        viewTemp.backgroundColor = [UIColor whiteColor];
    }
}

// 方式二：通過tag值獲取對應的子檢視
UIView *subView = [view1 viewWithTag:3];
subView.backgroundColor = [UIColor orangeColor];

3-5 UIView-5

層級的處理

1.同一個父檢視中先加入的View會被蓋在下面
2.子檢視是跟隨父檢視進行層級遮擋，如果父檢視低於其它同級檢視，則父檢視的子檢視也會被蓋住，但是子檢視和其它檢視的子檢視是沒有關係的
3.交換兩個層的檢視時需要注意必須填寫正確的層級數
4.當層交換了之後對應子檢視的陣列下標也會進行改變

程式碼演示：

// 層級的處理
/* 
 1.同一個父檢視中先加入的View會被蓋在下面
 2.子檢視是跟隨父檢視進行層級遮擋，如果父檢視低於其它同級檢視，則父檢視的子檢視也會被蓋住，但是子檢視和其它檢視的子檢視是沒有關係的
 3.交換兩個層的檢視時需要注意必須填寫正確的層級數
 4.當層交換了之後對應子檢視的陣列下標也會進行改變
 */

UIView *view4 = [[UIView alloc] init];
view4.frame = CGRectMake(10, 100, 300, 300);
view4.backgroundColor = [UIColor yellowColor];
//[self.view addSubview:view4];

// 交換兩個層的檢視
[view1 exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
// 插入一個檢視到指定層
UIView *view5 = [[UIView alloc] init];
view5.frame = CGRectMake(7, 80, 200, 200);
view5.backgroundColor = [UIColor blackColor];
//[view1 insertSubview:view5 atIndex:2];//插入一個檢視到指定層
//[view1 insertSubview:view5 aboveSubview:view3];//插入一個檢視到指定檢視的上面
[view1 insertSubview:view5 belowSubview:view2];//插入一個檢視到指定檢視的下面
// 將一個View放入最頂層或者最底層
// 最頂層
[view1 bringSubviewToFront:view3];
// 最底層
[view1 sendSubviewToBack:view3];

3-6 UIView-6

程式碼演示：

// 自適應
UIView *backView = [[UIView alloc] init];
backView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-25, 400, 50, 50);
// 准許子檢視自適應
backView.autoresizesSubviews = YES;
backView.tag = 1001;
backView.backgroundColor = [UIColor orangeColor];
[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 blackColor];
[btn addTarget:self action:@selector(bntClick) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];

本章完整程式碼：

//
//  ViewController.m
//  UIView
//
//  Created by zc on 2017/5/15.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 3-1
    // 建立檢視
    UIView *view1 = [[UIView alloc] init];
    // 設定邊框-位置大小
    view1.frame = CGRectMake(10, 30, 394, 696);
    // 背景顏色
    view1.backgroundColor = [UIColor redColor];
    // 將檢視加入到父檢視中
    [self.view addSubview:view1];
    
    /*
     機型  螢幕尺寸 解析度 倍率  圖片解析度
     3GS  3.5寸 320*480 @1x
     4/4s 3.5寸 320*480 @2x 640*960
     5/5c/5s 4.0寸 320*568 @2x 640*1136
     6    4.7寸 375*667 @2x 750*1334
     6plus 5.5寸 414*736 @3x 1242*2208
     
     */
    
    // 3-2
    // 獲取當前螢幕
    
    int width = [[UIScreen mainScreen] bounds].size.width;
    int height = [[UIScreen mainScreen] bounds].size.height;
    NSLog(@"width:%d height:%d",width,height);
    
    // 3-3
    // 狀態列高度為20px，我們在設定控制元件frame時需要讓出20px。
    NSLog(@"x:%f y:%f w:%f h:%f",view1.frame.origin.x,view1.frame.origin.y,view1.frame.size.width,view1.frame.size.height);
    
    // bounds 邊框大小，x和y永遠為0
    NSLog(@"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(@"x:%f y:%f",view1.center.x,view1.center.y);
    
    // 3-4
    // 父檢視
    UIView *superView = view1.superview;
    superView.backgroundColor = [UIColor greenColor];
    // 座標是根據父檢視的位置來設定的，不會垮層
    UIView *view2 = [[UIView alloc] init];
    view2.frame = CGRectMake(10, 100, 300, 30);
    view2.backgroundColor = [UIColor blackColor];
    // 檢視唯一標識
    view2.tag = 2;
    [view1 addSubview:view2];
    
    UIView *view3 = [[UIView alloc] init];
    view3.frame = CGRectMake(20, 50, 100, 100);
    view3.backgroundColor = [UIColor purpleColor];
    // 檢視唯一標識
    view3.tag = 3;
    [view1 addSubview:view3];
    
    // 子檢視
    // 方式一：獲取全部子檢視
    NSArray *subViewArray = view1.subviews;
    for (UIView *viewTemp in subViewArray) {
        
        if(viewTemp.tag == 2){
            viewTemp.backgroundColor = [UIColor whiteColor];
        }
    }
    
    // 方式二：通過tag值獲取對應的子檢視
    UIView *subView = [view1 viewWithTag:3];
    subView.backgroundColor = [UIColor orangeColor];
    
    //3-5
    // 層級的處理
    /* 
     1.同一個父檢視中先加入的View會被蓋在下面
     2.子檢視是跟隨父檢視進行層級遮擋，如果父檢視低於其它同級檢視，則父檢視的子檢視也會被蓋住，但是子檢視和其它檢視的子檢視是沒有關係的
     3.交換兩個層的檢視時需要注意必須填寫正確的層級數
     4.當層交換了之後對應子檢視的陣列下標也會進行改變
     */
    
    UIView *view4 = [[UIView alloc] init];
    view4.frame = CGRectMake(10, 100, 300, 300);
    view4.backgroundColor = [UIColor yellowColor];
    //[self.view addSubview:view4];
    
    // 交換兩個層的檢視
    [view1 exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
    // 插入一個檢視到指定層
    UIView *view5 = [[UIView alloc] init];
    view5.frame = CGRectMake(7, 80, 200, 200);
    view5.backgroundColor = [UIColor blackColor];
    //[view1 insertSubview:view5 atIndex:2];//插入一個檢視到指定層
    //[view1 insertSubview:view5 aboveSubview:view3];//插入一個檢視到指定檢視的上面
    [view1 insertSubview:view5 belowSubview:view2];//插入一個檢視到指定檢視的下面
    // 將一個View放入最頂層或者最底層
    // 最頂層
    [view1 bringSubviewToFront:view3];
    // 最底層
    [view1 sendSubviewToBack:view3];
    
    //3-6
    // 自適應
    UIView *backView = [[UIView alloc] init];
    backView.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-25, 400, 50, 50);
    // 准許子檢視自適應
    backView.autoresizesSubviews = YES;
    backView.tag = 1001;
    backView.backgroundColor = [UIColor orangeColor];
    [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 blackColor];
    [btn addTarget:self action:@selector(bntClick) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
}

- (void)bntClick {
    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

第四章：UILable-千變萬幻的文字

4-1 UILable-1

UILable

文字標籤
UIColor顏色類

程式碼演示：

UILabel *lable = [[UILabel alloc] init];
lable.frame = CGRectMake(10, 100, 350, 300);
lable.backgroundColor = [UIColor yellowColor];
// 文字
lable.text = @"網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視訊教程等課程資源。它富有互動性及趣味性,並且你.網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視訊教程等課程資源。它富有互動性及趣味性,並且你.網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視訊教程等課程資源。它富有互動性及趣味性,並且你.";
// 文字佈局模式
lable.textAlignment = NSTextAlignmentCenter;
// 文字的顏色
//lable.textColor = [UIColor clearColor];//clearColor 透明色
lable.textColor = [UIColor colorWithRed:0.1 green:0.8 blue:0.2 alpha:1];
// alpha 透明度
//lable.alpha = 0.5;

4-2 UILable-2

多文書處理

1.Label要有足夠的大小
2.設定換行模式
3.設定顯示行數（0或-1不限制行數）

程式碼演示：

// 字型的設定
lable.font = [UIFont systemFontOfSize:25];
// 加粗或傾斜
lable.font = [UIFont boldSystemFontOfSize:25];
lable.font = [UIFont italicSystemFontOfSize:25];
// 遍歷系統已安裝的字型
for(NSString *name in [UIFont familyNames]){
    NSLog(@"fontName:%@",name);
}
// 設定字型和大小
lable.font = [UIFont fontWithName:@"Bodoni 72" size:20];
// 設定陰影
//lable.shadowColor = [UIColor redColor];
//lable.shadowOffset = CGSizeMake(-2, -2);

// 處理多文字
// 1.Label要有足夠的大小
// 2.設定換行模式
lable.lineBreakMode = NSLineBreakByCharWrapping;
// 3.設定顯示行數（0或-1不限制行數）
lable.numberOfLines = 0;

4-3 UILable-3

程式碼演示：

// 根據字串大小計算Label的大小
CGSize size = [lable.text sizeWithFont:lable.font constrainedToSize:CGSizeMake(355, 10000) lineBreakMode:NSLineBreakByCharWrapping];
lable.frame = CGRectMake(lable.frame.origin.x, lable.frame.origin.y, lable.frame.size.width, size.height);

[self.view addSubview:lable];

本章完整程式碼：

//
//  ViewController.m
//  UILable
//
//  Created by zc on 2017/5/15.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //self.view.backgroundColor = [UIColor redColor];
    
    //4-1
    UILabel *lable = [[UILabel alloc] init];
    lable.frame = CGRectMake(10, 100, 350, 300);
    lable.backgroundColor = [UIColor yellowColor];
    // 文字
    lable.text = @"網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視訊教程等課程資源。它富有互動性及趣味性,並且你.網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視訊教程等課程資源。它富有互動性及趣味性,並且你.網提供了豐富的移動端開發、php開發、web前端、html5教程以及css3視訊教程等課程資源。它富有互動性及趣味性,並且你.";
    // 文字佈局模式
    lable.textAlignment = NSTextAlignmentCenter;
    // 文字的顏色
    //lable.textColor = [UIColor clearColor];//clearColor 透明色
    lable.textColor = [UIColor colorWithRed:0.1 green:0.8 blue:0.2 alpha:1];
    // alpha 透明度
    //lable.alpha = 0.5;
    
    //4-2
    // 字型的設定
    lable.font = [UIFont systemFontOfSize:25];
    // 加粗或傾斜
    lable.font = [UIFont boldSystemFontOfSize:25];
    lable.font = [UIFont italicSystemFontOfSize:25];
    // 遍歷系統已安裝的字型
    for(NSString *name in [UIFont familyNames]){
        NSLog(@"fontName:%@",name);
    }
    // 設定字型和大小
    lable.font = [UIFont fontWithName:@"Bodoni 72" size:20];
    // 設定陰影
    //lable.shadowColor = [UIColor redColor];
    //lable.shadowOffset = CGSizeMake(-2, -2);
    
    // 處理多文字
    // 1.Label要有足夠的大小
    // 2.設定換行模式
    lable.lineBreakMode = NSLineBreakByCharWrapping;
    // 3.設定顯示行數（0或-1不限制行數）
    lable.numberOfLines = 0;
    
    //4-3
    // 根據字串大小計算Label的大小
    CGSize size = [lable.text sizeWithFont:lable.font constrainedToSize:CGSizeMake(355, 10000) lineBreakMode:NSLineBreakByCharWrapping];
    lable.frame = CGRectMake(lable.frame.origin.x, lable.frame.origin.y, lable.frame.size.width, size.height);
    
    [self.view addSubview:lable];
    
    
}


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


@end

第五章：UIImageView-圖片顯示的利器

5-1 UIImageView-1載入圖片

UIImage&UIImageView

UIImage
UIImage載體
UIImageView

程式碼演示：

// UIImage png jpg
// 圖片資源路徑
NSString *path = [[NSBundle mainBundle] resourcePath];
NSString *imagePath = [NSString stringWithFormat:@"%@/1.jpg",path];
// 以路徑形式載入 每一次使用時載入該資源，效率低，但佔用記憶體少
UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];
// 以名稱形式載入 第一次使用時載入進記憶體，效率高，但佔用記憶體多
//UIImage *image1 = [UIImage imageNamed:@"1.jpg"];

// 載體
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// 圖片顯示在螢幕上的大小是有載體控制
//imageView.frame = CGRectMake(0, 30, image.size.height, image.size.width);
imageView.frame = CGRectMake(0, 20, 240, 320);
[self.view addSubview:imageView];

5-2 UIImageView-2內容模式

程式碼演示：

// 內容模式
//imageView.contentMode = UIViewContentModeCenter;//居中
//imageView.contentMode = UIViewContentModeScaleToFill;//拉伸-充滿整個載體
imageView.contentMode = UIViewContentModeScaleAspectFill;//拉伸-不改變比例，充滿最大的邊
//imageView.contentMode = UIViewContentModeScaleAspectFit;//拉伸-不改變比例，充滿最小的邊

5-3 UIImageView-3

程式碼演示：

// UIImageView動畫 播放序列圖
NSMutableArray *imageArray = [[NSMutableArray alloc] init];
for(int i=1;i<=13;i++){
    UIImage *imageTemp = [UIImage imageNamed:[NSString stringWithFormat:@"png%d.png",i]];
    [imageArray addObject:imageTemp];
}

UIImageView *imageView2 = [[UIImageView alloc] init];
imageView2.frame = CGRectMake((self.view.frame.size.width-407)/2, 100, 407, 217);
// 設定動畫陣列
imageView2.animationImages = imageArray;
// 設定全部圖片播放週期時間（單位：秒）
imageView2.animationDuration = 2;
// 播放多少次 執行次數（0：不限制次數）
imageView2.animationRepeatCount = 10;
// 開始播放動畫
[imageView2 startAnimating];
// 停止播放動畫
//[imageView2 stopAnimating];
[self.view addSubview:imageView2];

本章完整程式碼：

//
//  ViewController.m
//  UIImageView
//
//  Created by zc on 2017/5/15.
//  Copyright © 2017年 com.zccoder. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
#if 0
    // 5-1
    // UIImage png jpg
    // 圖片資源路徑
    NSString *path = [[NSBundle mainBundle] resourcePath];
    NSString *imagePath = [NSString stringWithFormat:@"%@/1.jpg",path];
    // 以路徑形式載入 每一次使用時載入該資源，效率低，但佔用記憶體少
    UIImage *image = [[UIImage alloc] initWithContentsOfFile:imagePath];
    // 以名稱形式載入 第一次使用時載入進記憶體，效率高，但佔用記憶體多
    //UIImage *image1 = [UIImage imageNamed:@"1.jpg"];
    
    // 載體
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    // 圖片顯示在螢幕上的大小是有載體控制
    //imageView.frame = CGRectMake(0, 30, image.size.height, image.size.width);
    imageView.frame = CGRectMake(0, 20, 240, 320);
    [self.view addSubview:imageView];
    
    // 5-2
    // 內容模式
    //imageView.contentMode = UIViewContentModeCenter;//居中
    //imageView.contentMode = UIViewContentModeScaleToFill;//拉伸-充滿整個載體
    imageView.contentMode = UIViewContentModeScaleAspectFill;//拉伸-不改變比例，充滿最大的邊
    //imageView.contentMode = UIViewContentModeScaleAspectFit;//拉伸-不改變比例，充滿最小的邊
#endif
    // 5-3
    // UIImageView動畫 播放序列圖
    NSMutableArray *imageArray = [[NSMutableArray alloc] init];
    for(int i=1;i<=13;i++){
        UIImage *imageTemp = [UIImage imageNamed:[NSString stringWithFormat:@"png%d.png",i]];
        [imageArray addObject:imageTemp];
    }
    
    UIImageView *imageView2 = [[UIImageView alloc] init];
    imageView2.frame = CGRectMake((self.view.frame.size.width-407)/2, 100, 407, 217);
    // 設定動畫陣列
    imageView2.animationImages = imageArray;
    // 設定全部圖片播放週期時間（單位：秒）
    imageView2.animationDuration = 2;
    // 播放多少次 執行次數（0：不限制次數）
    imageView2.animationRepeatCount = 10;
    // 開始播放動畫
    [imageView2 startAnimating];
    // 停止播放動畫
    //[imageView2 stopAnimating];
    [self.view addSubview:imageView2];
}


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


@end

第六章：總結與預告

6-1 總結

總結

MVC
UIWindow
UIView
UILable
UIImage
UIImageView

預告

UIButton
UITextField
UITextView
UINavigationController
UIViewController
UISlider等

相關文章