UI第一课

主要内容：UIView及其子类、UILable

一、UI概述

       UI（User  Interface）：用户界面，用户能看到的各式各样的页面元素

       iOS  APP：各种各样的UI控件 + 业务逻辑和算法

       UI外观改革：

              iOS7.0以前，以虚拟化为主，注重立体、阴影的搭配

              iOS7.0以后，以线条为主，倾向于扁平化

二、UIWindow

       window是窗口，每个APP都需要借助window呈现给用户，

       iOS中，使用UIWindow类表示窗口（注意：通常一个应用程序只创建一个UIWindow对象，并且，我们不会对window做过多的操作）

       window的创建：

              在创建window的时候，需要指定window的大小，通常window的大小（frame）与屏幕（UIScreen）的大小一致

              代码示例：

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

      window的主要作用是呈现给用户看，那么如果不添加任何东西，怎么给用户看？所以

三、UIView

       View（视图）：代表屏幕上的一个矩形区域，iOS中用UIView表示视图

              注意：1、不同的控件代表不同种类的View

                         2、iOS中所能看到的内容都是View或者其子类

       创建View步骤：

              1、开辟控件并初始化视图（初始化时给出视图位置和大小）

              2、对视图做一些操作（比如北京颜色。。。）

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

              4、释放视图对象

       代码示例：

              / / 创建视图对象并给出位置大小

              UIView  *view1 = [[UIView  alloc]  initWithFrame:CGRectMake(100, 100, 100, 100)];

              / / 设置背景颜色为红色

              view1.backgroundColor = [UIColor  redColor];

              / / 将视图view1添加到window窗体上

              [self.window  addSubView :view1] ;

              / / 释放视图对象

              [view1 release] ;

       注意：因为我们一般不对window做过多的操作，所以我们一般都是首先申请一个与屏幕大小相同的view，将所以的控件都添加到view上，在view上进行操作

       frame：

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

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

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

              size也是一个结构体，包含两个部分内容：width 和 height

              CGRectMake()函数能帮助我们快速的构造一个CGRect变量

       center：

              center（中心点）同样也是view的重要属性，center包含两个部分：x 和 y

       frame和center的关系：

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

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

       bounds:

              bounds（边界）也是view的重要属性，用于定义自己的边界也是一个CGRect结构体变量

              注意：

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

                     2、当子视图添加到此视图时，会根据bounds指定的原点（0，0）计算frame，而非左上角

      frame、center、bounds的关系

       添加视图：

              系统默认添加视图是后面的视图会把已添加的视图盖在下面，系统提供了插入视图的方法

方法名	描述	示例
insertSubView:atIndex	在指定的Index处插入子视图	[superview  insertSubView:grayView  atIndex:3];
insertSubView:aboveSubView:	在指定的视图上面添加子视图	[superview  insertSubView:grayView  aboveSubView:redView];
inserSubView:belowSubView:	在指定的视图下面添加子视图	[superview  insertSubView:grayView  belowSubView:redView];

       及管理视图层次的方法：

方法名	描述	示例
bringSubViewToFront:	将指定的视图移到最前面	[superview  bringSubViewToFront:redView];
sendSubViewToBack:	将指定的视图移到最后面	[superview  sendSubViewToBack:garyView];
exchangeSubViewAtIndex: withSubViewAtIndex:	交换两个指定索引位置的视图	[superview  exchangeSubViewAtIndex:2 withSubViewAtIndex:3];
removeFromSuperview	把receiver从父视图上移除	[redView  removeFromSuperview];

       视图的重要属性：

属性名	描述	示例
hidden	控制视图的显隐	redView.hedden = YES;/ / 隐藏redView redView.hedden = NO; / / 显示redView
alpha	控制视图的不透明度（子视图也一起透明），取值范围0 - 1	redView.alpha = o.8; / / 将透明度设置为0.8
superview	获取本视图的父视图	UIView  *superview = [redView  superView];
subviews	获取本视图的所有子视图	NSArray  *subview = [redView  subViews];
tag	给视图添加标记，被加完标记的视图可以使用viewWithTag：方法取出	redView.tag = 100; UIView  *view = [superview  viewWithTag:100];

       如何确定视图在屏幕的位置呢？

       iOS平面坐标系：

             左上角为坐标系的原点

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

             水平向下：为y的正方向，屏幕从嘴上到最下课划分为568等份（5s的屏幕）

             注意：坐标系不是以像素为划分依据，而是以点为划分依据

四、UILable

       UILable（标签）：是显示文本的控件（在APP中，UILable是出现频率最高的控件）

       UILable是UIView的子类，作为子类，一般是为了扩充父类的的功能，所有UILable扩展的文字显示的功能

       UILable是能显示文字的视图

       创建UILable的步骤：

              1、开辟空间并初始化（如果本类有自己的方法，用自己的，否则用父类的）

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

              3、添加到父视图上，用以显示

              4、释放

             代码示例：

                   UILable  *lable = [[UILable  alloc]  initWithFrame:CGRectMake:(100, 100, 100, 100)];

                   lable.backgroundColor = [UIColor  redColor];

                   lable.text = @" 用户名 " ;

                   [self.window  addSubView:able];

                   [able  release];

        控制文本显示的方法：

属性名	描述	示例
text	要显示的文本内容	lable.text = @" 用户名 " ;
textColor	文本内容的颜色	lable.textColor = [UIColor  redColor];
textAlignment	文本的对齐方式（水平方向）	lable.textAlignment = NSTextAlignmentLeft; / / 左对齐 NSTextAlignmentCenter / / 居中对齐 NSTextAlignmentRight / / 右对齐
font	文本字体	lable.font = [UIFont  fontWithName:@" Helvetica-Bold " size:20] ; / / 黑体加粗，20号字
numberOfLines	行数	lable.numberOfLines = 3; / / 显示3行，注意：Lable的高度要能容纳3行， 如果3行不能显示全部信息，以省略号代替
lineBreakMode	断行模式	lable.lineBreakMode = NSLineBreakByWordWrapping; / / 以单词为单位换行
shadowColor	阴影颜色	lable.shadowColor = [UIColor redColor]; / / 红色阴影
shadowOffset	阴影大小	lable.shadowOffset = CGSizeMake(2, 1); / / 阴影向x正方向偏移2，向y正方向偏移1