UI基础-UIView及其子类 UILabel

UI概述

 

UI(User Interface):⽤用户界⾯面,⽤用户能看到的各种各样的⻚页⾯面元素。

iOS App = 各种各样的UI控件 + 业务逻辑和算法。

 

什么是window？

• window是窗⼝口,每个app都需要借助window将内容展现给⽤用户看。
• 在iOS中,使⽤用UIWindow类来表⽰示窗⼝口,通常⼀一个应⽤用程序只创建 ⼀一个UIWindow对象。
• window的主要作用是呈现内容给用户，我们不会对window做太多操作。
•  

如何创建window？

通常window的大小（frame）与屏幕（UIScreen）大小一致。

代码： self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];

创建项目流程：

1. command+shift+N->iOS下的Application->Empty Application.点击Next。
2. 输入Product Name，点击Next。
3. 选择项目保存路径，点击Create。
4.  

什么是View？

view（视图）：代表屏幕上的一个矩形区域。IOS中用UIView来表示视图。

不同的控件代表不同种类的view。

创建视图的步骤如下:

1. 开辟空间并初始化视图（初始化时，给出视图位置和大小）
2. 对视图做一些设置（比如：背景颜色）
3. 将视图添加到window上进行显示。
4. 释放视图对象。

视图创建代码：

[self createView];

-(void)createView{
    UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 120, 100)];
    blueView.backgroundColor = [UIColor blueColor];
    [self.window addSubview:blueView];
    [blueView release];

}

 

frame

frame是view的重要属性，是我们做视图布局的关键，它决定了视图的大小和位置。

iOS坐标系

ios提供了用于布局的平面坐标系。左上角为坐标系的原点。

水平向右：为x的正方向。屏幕最左到最右可划分320等份。

垂直向下：为y的正方向。屏幕最上到最下可划分为480等份（3.5存屏幕）。

坐标系不是以像素作为划分依据，而是以“点”作为依据。

 

frame是一个结构体，包含2部分内容：origin和size；

origin也是一个结构体，包含2部分内容：x和y

size同样是一个结构体，包含2部分内容：width和height；

frame的origin和size是相对于俯视图来说的

CGRectMake（）函数可以帮我们快速构造一个CGRect变量。

center

center（中心点)也是view重要的属性

center是个结构体，包含2个部分：x和y。

center与frame有着密切的联系。

center.x = frame.origin.x+frame.size.width/2;

center.y = frame.origin.y+frame.size.height/2;

 

bounds

bounds(边界）也是view的重要属性，用于定义自己的边界。它同frame一样是一个CGRect结构体变量。

当一个view设置bounds时，会把自己当成一个容器，定义自己的边界大小以及左上角的初始坐标。

当子视图添加到此视图时，会根据bounds指定的原点(0,0)计算frame，而非左上角。

 

bounds、frame、center关系

 

 

 

 

 

 

 

添加视图

 

管理视图层次

 

视图重要属性

 

UILabel

UILabel（标签）：是显示文本的控件。在App中UILabel是出现频率最高的空间。

UILabel是UIView子类，作为子类一般是为了扩充父类的功能，UILabel扩展了文字显示的功能，UILabel是能显示文字的视图。

 

 

 

 

实例讲解：

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
    self.window.backgroundColor = [UIColor grayColor];
    [self.window makeKeyAndVisible];
   
//    [self createView];
//    [self createView1];
//    [self createView2];
//    [self createLabel];

      [self createView3];

    return YES;
}
-(void)createView{
   
    UIView *View1 = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 150, 150)];
    View1.backgroundColor = [UIColor redColor];
   
    [self.window addSubview:View1];
   
    UIView *View2 = [[UIView alloc]initWithFrame:CGRectMake(120, 120, 150, 150)];
    View2.backgroundColor = [UIColor purpleColor];
   
    [self.window addSubview:View2];
   
    UIView *view3 = [[UIView alloc]initWithFrame:CGRectMake(130, 130, 140, 140)];
    view3.backgroundColor = [UIColor grayColor];
    [self.window addSubview:view3];
}
-(void)createView1{
    UIView *aview = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
    aview.backgroundColor = [UIColor redColor];
   
    UIView *bview = [[UIView alloc]initWithFrame:CGRectMake(20, 20, 100, 100)];
    bview.backgroundColor = [UIColor grayColor];
   
    UIView *cview = [[UIView alloc]initWithFrame:CGRectMake(40, 40, 100, 100)];
    cview.backgroundColor = [UIColor greenColor];
   
    UIView *dview = [[UIView alloc]initWithFrame:CGRectMake(60, 60, 100, 100)];
    dview.backgroundColor = [UIColor purpleColor];
    UIView *eview = [[UIView alloc]initWithFrame:CGRectMake(80, 80, 100, 100)];
    eview.backgroundColor = [UIColor yellowColor]; 

    [self.window addSubview:aview];
    [self.window addSubview:bview];
    [self.window insertSubview:cview atIndex:1];
    [self.window insertSubview:dview aboveSubview:aview];
    [self.window insertSubview:eview belowSubview:bview];
    [self.window  bringSubviewToFront:aview];
    [self.window sendSubviewToBack:aview];
    [self.window exchangeSubviewAtIndex:0  withSubviewAtIndex:3];

    [self.window removeFromSuperview];

-(void)createView2{
    UIView *view4= [[UIView alloc]initWithFrame:CGRectMake(50, 50, 200, 200)];
    view4.backgroundColor = [UIColor purpleColor];
    UIView *view5 = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
    view5.backgroundColor = [UIColor blueColor];
    [self.window addSubview:view4];
    [view4 addSubview:view5];
    view4.hidden = YES;
    view4.hidden = NO;
    view4.alpha = 1;
    UIView *superView = [view4 superview];
    NSLog(@"%@",superView);
   
    NSArray *subViews = [view4 subviews];
   
    NSLog(@"%@",subViews);
    view4.tag = 105;

    UIView *view = [superView viewWithTag:105];

    NSLog(@"%@",view); 

}
-(void)createLabel{
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(50, 50, 150, 150)];
    label.backgroundColor = [UIColor redColor];
    [self.window addSubview:label];
    label.text = @"I love you my love yanyan";
    label.textColor = [UIColor purpleColor];
    label.textAlignment = NSTextAlignmentCenter;
    label.font = [UIFont fontWithName:@"Helvetica-Bold" size:25];
    label.numberOfLines = 4;
    label.lineBreakMode = NSLineBreakByWordWrapping;
    label.shadowColor = [UIColor yellowColor];

    label.shadowOffset = CGSizeMake(2,1);

}
-(void)createView3{
    UIView *V1 = [[UIView alloc]initWithFrame:CGRectMake(35, 190, 100 ,35 )];
    V1.backgroundColor = [UIColor redColor];
    UIView *V2 = [[UIView alloc]initWithFrame:CGRectMake(160, 190, 180, 35)];

    V2.backgroundColor = [UIColor blueColor];

    UIView *V3 = [[UIView alloc]initWithFrame:CGRectMake(35, 250, 100 ,35 )];
    V3.backgroundColor = [UIColor redColor];
    UIView *V4 = [[UIView alloc]initWithFrame:CGRectMake(160, 250, 180, 35)];

    V4.backgroundColor = [UIColor blueColor];

    UIView *V5 = [[UIView alloc]initWithFrame:CGRectMake(35, 310, 85, 35)];
    V5.backgroundColor = [UIColor greenColor];
    UIView *V6 = [[UIView alloc]initWithFrame:CGRectMake(145, 310, 85, 35)];
    V6.backgroundColor = [UIColor greenColor];
    UIView *V7 = [[UIView alloc]initWithFrame:CGRectMake(255, 310, 85, 35)];

    V7.backgroundColor = [UIColor greenColor];

    [self.window addSubview:V1];
    [self.window addSubview:V2];
    [self.window addSubview:V3];
    [self.window addSubview:V4];
    [self.window addSubview:V5];
    [self.window addSubview:V6];

    [self.window addSubview:V7]; 

}

@end