iOS开发之 UI 编程——第一讲

iOS 概述

iOS是Apple公司的移动操作系统,主要用于iPhone、iPad、iPad Mini、iPod Touch等移动产品。 借助iOS,我们可以开发视频类、美图类、新闻类、音乐类、团购类、电商类、阅读类、出行类、生活服务类、游戏类等应用程序。 除此之外,iOS还可以与外部设备通信,开发出更多改变生活的产品,比如:智能家居(iOS App控制电视、空调等)、健身产品(将人体的健康状况通过App直观的展现出来)等。

UI 概述

UI(User Interface):用户界面,用户能看到的各种各样的页面元素。
iOS App = 各种各样的UI控件 + 业务逻辑和算法。
想要开发出一款精美的应用程序,需要熟练掌握各种UI控件的用法。

---

UI Window

window是窗口,每个app都需要借助window将内容展现给用户看。
在iOS中,使用UIWindow类来表示窗口,通常一个应用程序只创建一个UIWindow对象
window的主要作用是呈现内容给用户,我们不会对window做太多操作。
在创建window的时候,需要指定window的⼤大⼩小。
通常window的⼤大⼩小(frame)与屏幕(UIScreen)⼤大⼩小⼀一致。 ⽰示例代码如下:

// 初始化 window 设置成屏幕大小
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    float red = (arc4random() % 256) / 255.0;
    float green = (arc4random() % 256) / 255.0;
    float blue = (arc4random() % 256) / 255.0;
    self.window.backgroundColor = [UIColor redColor];
    [[self window] setAlpha:0.5];
    [self.window makeKeyAndVisible];

    //UIView
    //在iOS 中，所有在屏幕上可看见的视图都是继承于 UIView 的
    // window不给颜色，默认是黑色 view 不给颜色默认是透明的
    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [aView setBackgroundColor:[UIColor blackColor]];
    [[self window] addSubview:aView];

UI View

view(视图):代表屏幕上的一个矩形区域。iOS中用UIView来表示
视图前面ppt里看到的各种UI控件都属于view。
不同的控件代表不同种类的view。 iOS中所有能看到的内容都是view或其子类。
创建视图的步骤如下:

1、开辟空间并初始化视图(初始化时,给出视图位置和大小)

2、对视图做一些设置(比如:背景颜色)

3、将视图添加到window上进行显示

4、释放视图对象

//    在iOS 中，所有在屏幕上可看见的视图都是继承于 UIView 的
//     window不给颜色，默认是黑色 view 不给颜色默认是透明的
//     frame 是相对于父视图 一个父视图可以有 N 个子视图 一个子视图只能有一个父视图
//     子视图的 alpha 的值会跟随父视图的 alpha 的值改变而改变
//    如果父视图是隐藏的，所有子视图也都会隐藏
    UIView *aView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
    [aView setBackgroundColor:[UIColor blackColor]];
    [[self window] addSubview:aView];

    UIView *bView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];
    [bView setBackgroundColor:[UIColor yellowColor]];
    [aView addSubview:bView];

    UIView *cView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    cView.backgroundColor = [UIColor greenColor];
    [aView addSubview:cView];

    UIView *dView = [[UIView alloc] initWithFrame:CGRectMake(200, 200, 100, 300)];
    dView.backgroundColor = [UIColor blueColor];
//    dView.alpha = 0.3;
//    [dView setHidden:YES];
    [dView addSubview:cView];
    [self.window addSubview:dView];

    NSLog(@"%@",[dView.superview class]);
    UIView *superView = cView.superview;
    superView.backgroundColor = [UIColor yellowColor];


    //获取某个子视图的父视图 拿到之后 我们可以对其进行任何操作
    UIView *myView1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    myView1.tag = 101;
    myView1.backgroundColor = [UIColor redColor];
    [self.window addSubview:myView1];

    NSLog(@"%@",[myView1.superview class]);
    UIView *superView = myView1.superview;
    superView.backgroundColor = [UIColor orangeColor];

    UIView *myView2 = [[UIView alloc] initWithFrame:CGRectMake(100, 0, 100, 100)];
    [myView2 setTag:100];
    myView2.backgroundColor = [UIColor yellowColor];
    [self.window addSubview:myView2];
    [self changeViewColorWithTag:self.window.subviews];
    // 将某个子视图从父视图上移除 [子视图 removeFrom Superview];
    [myView2 removeFromSuperview];

    [self initViewWithFrame:CGRectMake(200, 0, 100, 100) color:[UIColor blueColor]];




//    [cView release];
//    [aView release];
//    [bView release];

    [self.window makeKeyAndVisible];

Center

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
    view1.backgroundColor = [UIColor redColor];
    [self.window addSubview:view1];

    UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    view2.backgroundColor = [UIColor yellowColor];
    [view1 addSubview:view2];

    NSLog(@"%@",NSStringFromCGPoint(view2.center));

    CGPoint point = view2.center;
    point.x = view2.frame.origin.x + view2.frame.size.width / 2;
    point.y = view2.frame.origin.y + view2.frame.size.height / 2;
    view2.center = point;
    NSLog(@"%@",NSStringFromCGPoint(view2.center));

    // 如果 center 的值改变，frame 也会改变
    view2.center = CGPointMake(60, 60);
    NSLog(@"%@",NSStringFromCGRect(view2.frame));

    // 如果 frame 的值改变，center 也会改变
    view2.frame = CGRectMake(20, 20, 100, 100);
    NSLog(@"%@",NSStringFromCGPoint(view2.center));

Bounds

 bounds 是针对自己的坐标系系统
 改变自身 bounds 的值不会影响到自身的 x，y 只会影响到子视图的坐标系
 如果 bounds 的值改为负数，它自身的原点会向右下偏移
 如果 bounds 的值改为正数，它自身的原点会向左上偏移

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    view1.bounds = CGRectMake(30, 30, 100, 100);
    view1.backgroundColor = [UIColor yellowColor];
    [self.window addSubview:view1];

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

管理视图层次

// 在指定的位置插入子视图
    [self.window insertSubview:view2 atIndex:0];
    // 在指定的视图上面插入子视图
    [self.window insertSubview:view2 aboveSubview:view1];
    // 在指定的视图下面插入子视图
    [self.window insertSubview:view2 belowSubview:view1];
    // 将指定的视图移动到最前面
    [self.window bringSubviewToFront:view2];
    // 将指定的视图移动到最后面
    [self.window sendSubviewToBack:view2];
    // 交换两个指定索引位置上的子视图
    [self.window exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
    // 将指定子视图从其父视图上移除
    [view1 removeFromSuperview];

视图的属性

hidden
控制视图的显隐
redView.hidden = YES;//隐藏redView redView.hidden = NO;
//显示redView!
alpha
控制视图的不透明度(子视图也一起透明),取值范围0~1
redView.alpha = 0.8;
superview
获取本视图的父视图
UIView *superView = [redView superView];
subviews
获取本视图的所有子视图
NSArray *subviews = [redView subviews];
tag
给视图添加标记,被加完标记的视图可以使用viewWithTag:方法取出
redView.tag = 100;
UIView *view = [superview viewWithTag:100];

UILabel

UILabel(标签):是显示文本的控件。在App中UILabel是出现频
率最高的控件。 UILabel是UIView子类,作为子类一般是为了扩充父类的功能,UILabel扩展了文字显示的功能,UILabel是能显示文字的视图。

//创建一个 UILabel
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    label.layer.borderWidth = 1.0f;
    label.layer.borderColor = [UIColor blueColor].CGColor;
    label.tag = 100;
    [label setBackgroundColor:[UIColor redColor]];
    // 给 label 赋值文本
    label.text = @"Hello World";
    // 设置字体大小
    label.font = [UIFont systemFontOfSize:40.0];
    // 设置文本对齐方式
    label.textAlignment = 1;
    // 设置字体颜色
    label.textColor = [UIColor orangeColor];
    // 设置行数
    label.numberOfLines = 0;

    [self.window addSubview:label];

    // 根据 tag 值 获取某一个类型的视图 用本类对象去接收 进行强制转换类型
    UILabel *label1 = (UILabel *)[self.window viewWithTag:100];
    label1.text = @"wqnmlgb";
    // 设置字体阴影
    label1.shadowColor = [UIColor grayColor];
    label1.shadowOffset = CGSizeMake(5, 2);


    // 创建一个圆形 View
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 220, 220)];
    view.layer.cornerRadius = 110.0;
    view.backgroundColor = [UIColor blackColor];
    [self.window addSubview:view];