慕课网_《iOS基础教程之界面初体验》学习总结

时间 2021-02-14

标签 php css html 前端 html5 ios css3 git github web 栏目 PHP 繁體版

原文原文链接

2017年05月15日星期一
说明：本文部份内容均来自慕课网。@慕课网：http://www.imooc.com
教学示例源码：无
我的学习源码：https://github.com/zccodere/s...php

第一章：大V有话说

1-1 各类叨唠

什么是MVCcss

Model
View
Controller
MVC是一种设计模式
MVC不只是设计模式，更是高于框架和设计模式的
MVC是一种思想

MVC优势html

低耦合性
高重用性
低开发成本
高可维护性

第二章：UIWindow-界面来了

2-1 UIWindow-1

UIWindow1前端

咱们的手机界面
UIWindow实例化
UIWindow的级别

2-1 UIWindow-2

window的做用html5

做为一个大容器，包含不少子view
能够转递触摸消息到控件

代码演示：ios

// 实例化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

UIViewcss3

UI的基类，基础
UIVew的属性
UIView的方法
UIView的自适应

代码演示：git

// 建立视图
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属性github

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

代码演示：web

/*
 机型  屏幕尺寸 分辨率 倍率  图片分辨率
 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等