UI第一节:UIView及其子类

UI: 用户界面,用户能看到的各种各样的页面元素.

IOS App = 各种各样的UI控件 + 业务逻辑算法.

UIVindeow : 在iOS 中,使用UIWindow类来表示窗口,通常一个应用程序只创建一个UIWindow对象.

window的主要作用是呈现内容给用户,我们不会对对它做太多的操作

创建window:

通常window的大小(frame)与屏幕(UIScreen)的大小一致.

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

view (视图) : 代表屏幕上的一个矩形区域. ios中用UIView来表示视图

iOS 中所有能看到的内容都是 view 或其子类.

创建view:

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

2.对视图做一些设置 (eag: 背景颜色)

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

4.释放视图对象

代码:

     
     

      
      

       
       

        
        

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

        
        
       
       
       
       

        
        

         
         
blueView.backgroundColor = [UIColor blueColor];
[self.window addSubview:blueView];
[blueView release];
         
         

         
         
frame:
         
         
frame 是 view 的重要属性,是我们做视图布局的关键,它决定视图的大小和位置.
         
         
frame 是一个结构体,包含 :origin和size
         
         
origin 也是一个结构体,包含 :x 和 y
         
         
size 同样也是一个结构体,包含 width 和 height
         
         
frame 的 origin 和 size 是相对于父视图来说的
         
         
CGRectMake()函数可以帮我们快速的构造一个CGRect变量
        
        
       
       
      
      
     
     

IOS 坐标系

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

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

垂直向下: 为 y 的正方向. 屏幕最上道最下可划分为480 等份 (3.5寸屏幕).

坐标系不是以像素作为划分依据,而是以"点"作为依据.

center :

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

center 是个结构体,包含: x 和 y

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 关系

frame: 参考系:父视图 ;  origin:到父视图原点的距离;  size:自身的宽高

bounds:参考系:自身;  origin:到自身原点的距离;   size: 自身的宽高

两者之间的关系 :  bounds.size 改变时, frame.size也会发生改变; frame.size 改变时,  bounds.size也会发生变化

frame: 参考系 :父视图;  center:参考系:父视图;

两者联系: frame.origin发生变化时, center 也会发生变化; center发生变化,frame.origin也会发生变化.

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

center : 参考系 :父视图;     bounds :参考系 : 自身;

两者联系 : center 发生变化 bounds.origin 不变, bounds.origin发生变化,center不变.

添加视图 :

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

添加视图的方法:

方法名:insertSubview:atIndex:     在指定的index处插入子视图    eg: [superview  insertSubview:grayView  atIndex:1];

方法名:insertSubview:aboveSubview:      在指定的视图上添加子视图    eg:[superview   insertSubview:grayView    aboveSubview:redView];

方法名:insertSubview:belowSubview:      在指定的视图下面添加子视图  eg:[superview    insertSubview:grayView  belowSubview:redView];    

管理视图层次

方法名:bringSubviewToFront:      把指定的子视图移动到最前面    eg:[superview  bringSubviewToFront:redView];

方法名:sendSubviewToBack:      把指定的子视图移动到最后面   eg:[superview  sendSubviewToBack:redView];

方法名:exchangeSubviewAtIndex:withSubviewAtIndex:      交换两个指定索引位置的子视图     eg:[superview exchangeSubviewAtIndex:0  withSubviewAtIndex:2];

方法名:removeFromSuperview    把receiver从父视图移除    eg:[redView removeFromSuperview];

视图重要属性

属性名: hidden    控制视图的显隐    eg.:redView.hidden = YES;// 隐藏redView    redView.hidden = NO;//显示

属性名:alpha    控制视图的不透明度(子视图也一起透明),取值范围是0~1    eg:redView.alpha = 0.8;

属性名:superview   获取本视图的父视图    eg:UIView *superView = [redView superView];

属性名:subviews    获取本视图的所有子视图   eg:NSArray  *subviews = [redView  subviews];

属性名:tag         给视图添加标记,被加完标记的视图可以使用viewWithTag:方法取出    eg:redView.tag = 100;

UIView  *view  = [superview  viewWithTag:100];

优化登录界面

实际App 中的登陆界面并非是由一个一个色块组成,而是由标签(UILabel),输入框(UITextField)和按钮(UIButton)组成.

UILabel

UILabel(标签:):是显示文件的控件. (文本就是文字(字符串)),  文本显示(文本内容,文本字体).

UILabel是UIView子类,它一般是为了扩充父类的功能.UILabel扩展了文字显示的功能,UILabel是能显示文字的视图.

创建UILabel与创建UIView的步骤很相似。
1、开辟空间并初始化(如果本类有初始化⽅方法,使⽤用⾃自⼰己的;否则使⽤用⽗父类的)。

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

3、添加到⽗父视图上,⽤用以显⽰示

4、释放 

   UILabel *userNameLabel = [[UILabel alloc]
initWithFrame:CGRectMake(30, 100, 100, 30)];

userNameLabel.text=@"⽤用户名";[containerViewaddSubview:userNameLabel];[userNameLabelrelease];

控制文本显示

属性名: text       要显示的文本内容    eg:label.text=@"用户名";

属性名: textColor  文本内容的颜色      eg:label.textColor = [UIColor  redColor];

属性名: textAlignment  文本对齐方式(水平方向)  eg:label.textAlignment =NSTextAlignmentLeft;

属性名:  font        文本字体     eg:label.font = [UIFont fontWithName:@"Helvetica-Bold "  size:20];//黑体加粗.20号字

属性名:numberOfLines   行数  eg:label.numberOfLines =3;//显示3行,注意label的高度要能容纳3行.如果3行没能显示完信息,没显示的信息以省略号代替.

属性名:lineBreakMode   断行模式    eg:label.lineBreakMode =NSLineBreakByWordWrapping;//以单词为单位换行.

属性名:shadowColor   阴影颜色    eg:label.shadowColor = [UIColor yellowColor]//阴影颜色

属性名:shadowOffset  阴影大小   eg:label.shadowOffset = CGSizeMake(2,1);//阴影向x 正方向偏移2,向y正方向偏移1.

UIView  是所有可视化控件的基类

UILabel 是具有特定外观特定功能的视图

UILabel 侧重于文本的呈现