UI --UIView 及其子类

一 > UIView 

1> iOS 概述:

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

2> UI 概述:

• UI ( User  Interfance ) : 用户界面,用户能看到的各种各样的页面元素 .
• iOS App = 各种各样的UI控件 + 业务逻辑 和算法 .
• 熟练掌握UI控件 .

3> UIWindow 

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

————>如何创建window呢??

• 在创建window的时候,需要指定window的大小
• 通常window的大小( frame ) 与屏幕( UIScreen ) 大小 一致 .—>screen [skriːn] 屏幕
• 示例代码如下:
• self.window =[ [UIWindow alloc ]  initWith Frame: [[UIScreen  mainScreen] bounds] ] ;

 

 

练习 1 > 建立一个Empty Application 项目,并将window的背景颜色改为红色.

————>创建项目流程 :

• 1> command +shift +N ——>iOS 下的Application ——>Empty Application .点击Next .
• 2> 输入Product Name .点击Next .
• 3>选择项目保存路径 ,点击Create.  create [kriː'eɪt]  创建
•  

//1>创建一个window窗口( 开辟空间) ,并将其初始化( 也就是初始化它的一个范围) ,给定window屏幕的大小与我们的main screen 一样大 ,做都 bounds 

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

//2>给window窗口背景添加颜色——>调用它的颜色类的 颜色方法

self.window.backgroundColor = [UIColor  redColor ];

//3>使我们创建的window窗口可见( 显示到 window上)

[self.window  makeKeyAndVisible ] ;

 

4>UIView :

• view (视图) :代表屏幕上的一个矩形区域,ios中用UIView 来表示视图.
• PPT里看到的各种UI控件都属于view
• 不同的控件代表不同种类的view
• iOS中所有能看到的内容都是view 或其子类

———> 创建视图的步骤如下:

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

//  UIView *view = [ [ UIView  alloc ]initWithFrame:CGRect ( 100, 100,120,100 ) ] ;

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

// view.backgroundColor = [ UIColor   blueColor] ;

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

// [self.window  addSubview : view] ;

• 4>释放视图对象

/// [ view  release ] ;

 

a>frame : 框架 ( 形容一个view 的 范围 ) 

• frame 是view的重要属性 ,是我们做图布局的关键,它决定了视图的大小和位置 .
• 根据ios坐标系 来掌控view的大小和位置 .

——>iOS 提供了用于布局的平面坐标系.

• 左上角为坐标系的原点 ,
• 水平向右 :为x的正方向, 屏幕最左到最右可划分320 等份
• 垂直向下:为Y的正方向 ,屏幕最上到最下可划分480等份 ( 3.5 inch 屏幕 )
• 坐标系不是以像素作为划分依据的,而是以”点" 作为依据

——>frame 是一个结构体,包含2部分内容:origin ['ɔridʒin, 'ɔ:-] ( 起源 ,开端 ) 和 size ;

——>origin 也是一个结构体,包含2部分内容 : X ,Y .

——>size 也是一个结构体 ,包含2部分内容 : width 和 height .

——>frame 的origin 和size 是相对于父视图来说的.

——>CGRectMake( ) 函数可以帮我们快速构造一个CGRect 变量

 

b> center 

• center ( 中心点 ) 也是view 重要的属性
• center 是一个结构体 ,包含2个部分 : X,Y.
• center 与 frame 有着密切的联系
• center.x = frame.origin.x + frame.size.with/2 ;
• center.y = frame.origin.y +frame.size.height/2 ;
• //改变greenview的center值,那么greenview位置也会跟着改变//
      [greenView setCenter:CGPointMake(100, 100)];
      //或者
      //greenView.center = CGPointMake(100, 100)//

c> bounds  : 边界 

• bounds (边界) 也是view 的重要属性 ,用于定义自己的边界,它同frame一样是一个CGRect 结构体变量
• 当一个view 设置 bounds 时,会把自己当成一个容器,定义自己的边界大小以及左上角的初始坐标.例如:view.bounds  = CGRectMake( 0,0,100,100  ) ;
• 当子视图添加到此视图时,会根据bounds 指定的原点( 0,0 ) 计算frame,而非左上角

———> *总结: setBounds 属性 ,父视图不会变化,子视图会随着变化;bounds 是相对于自身来说的 ,它的X,Y 永远不会发生变化 ,但是它的宽高改变之后,宽高就会发生改变....Frame是相对于父视图来说的,改变任何的长度(X,Y,宽,高)就会变化;

/2>设置redView的bounds 属性,将bounds.origin改为(0 ,30) 查看结果

    redView.bounds =CGRectMake(0,30, 130,130);//redView视图没变化,而它的子视图会随着redView的 (origin.X,origin.y)而变化 ,但是子视图的 Y 会减30
    //3>2>设置redView的bounds 属性,将bounds.origin改为(10 ,30) 查看结果

    redView.bounds = CGRectMake(10, 30, 130, 130);//redView视图没变化,而它的子视图会随着redView的 (origin.X,origin.y)而变化 ,但是子视图的 X 会减10, Y 会减30

 

———>frame center bounds  之间的关系 见下图 ...

 

 

 

              

 

 

 

 

 

 

4>添加视图

• UIView 的 addSubview : 方法可以添加子视图,对于同一个视图的所有子视图来讲,后添加的子视图会把已加的子视图盖在下面
• UIView 提供了其他添加视图的方法.

 

 

5>管理视图层次

• UIView 除了提供添加视图的方法 ,还提供了管理视图层次的方法

 

6>视图重要属性

• UIView 作为其他UI控件的BaseClass( 基类 ) ,提供了很多属性

 

 

 

 

hidden :  [‘hɪdn] 隐藏    一般不用隐藏,一旦隐藏,那么它的子视图也跟着隐藏了;

 

alpha [‘ælfə]  控制视图的不透明度 默认为1( 不亮 ) 设置范围( 0~1.0 ) 越小越透名; 控制视图的透明度,默认是1.0 ,其值范围在(0~1.0)之间;设置透明度会将其子视图也会带着一起设置

 

superview : 获取本视图的父视图 需要打印 它的信息 才能看到 

 

subviews : 获取本视图的所有子视图 需要打印 它的信息 才能看到

 

tag : 给视图添加标记 被加完标记的视图可以使用view.With.Tag: 方法取出 一般是从100 开始 通常用于循环.. 见下面代码

[self.window viewWithTag:101].backgroundColor = [UIColor yellowColor];

 

二 > UILabel

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

1> 文本显示

• 文本: 就是我们的文字 (字符串)
• 文本显示 : 在视图上显示文字
• 文本显示都有哪些方面?—> 文本内容,文本字体

2> 如何创建使用UILabel

• 1> 开辟空间并初始化 ( 如果本类有初始化方法 , 使用自己的,否则使用父类的 )

// self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
   
    self.window.backgroundColor = [UIColor whiteColor];
   
    [self.window makeKeyAndVisible];
   

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(100, 100, 150, 50)];

• 2>设置文本控制相关的属性

// label.backgroundColor = [UIColor blueColor];

• 3>添加到父视图上,用于显示

// [self.window addSubview:label];

• 4>释放

//  [label   release] ;

 

3> UILabel 的作用 : 主要作用是显示一段文本,因此提供了很多与显示文本相关的API 

 

总结 :

• UIView 是所有可视化控件的基类
• UILabel 是具有特定外观,特定功能的视图 (能显示文字 )
• UILabel 侧重于文本的呈现
• APP 靠window 来呈现内容,一个呈现一般只创建一个window
• APP 中能看的到的元素,都是UIView 及其子类
• UIView 作为所有可视化控件的baseclass ,提供了许多属性和方法,能显示效果控制 (frame .alpha .. )视图添加和移除 (addSubview: .. ) ,视图层次调整 ( bringSubviewToFront: … ) .
• UILabel 属于具体的视图,有自己的侧重点