2.1 UIView基础
2.1.1 UIView基本概念
UIView是组成画面的基本元素。UIView是拥有位置属性及一定尺寸的四边形,一般有背景色。另外,UIView也可以包含字符串或者图片等内容(信息)。例如UILabel就是包含字符串的UIView,而UIImageView是包含图片的UIView。
最重要的一点是UIView可以拥有UIView类型的子元素。这样可以轻易地在UIView上追加UIView,创建各种各样的画面。在iPhone应用程序中,应用程序的UIWindow也是UIView的子类。也就是说,所有的画面都是在UIWindow中追加各种UIView而组成的,其形式如图2-1所示。
图2-1 各种UIView构成画面的过程
2.1.2 UIView的位置与尺寸
除了在调用initWithFrame:方法初始化UIView时决定UIView位置或者尺寸外,还可以通过使用frame属性或者center属性实现。frame属性中管理描绘UIView时左上角的坐标值以及宽度、长度。center属性中管理UIView的中心坐标值。上述两种属性如图2-2所示。
图2-2 frame属性与center属性的示意图
设置frame属性值时使用CGRectMake,设置center属性值时使用CGPointMake。另外,当需要取得值的情况时,其语法类似label.frame.origin.x。以下是具体的实例代码。
UILabel* label = [[[UILabel alloc] initWithFrame:CGRectZero] autorelease]; // frame的设置 label.frame = CGRectMake(0,0,200,50); // center设置 label.center = CGPointMake(160,240); // frame的参照 NSLog(@”x = %f”,label.frame.origin.x); NSLog(@”y = %f”,label.frame.origin.y); NSLog(@”width = %f”,label.frame.size.width); NSLog(@”height = %f”,label.frame.size.height); // center的参照 NSLog(@”x = %f”,label.center.x); NSLog(@”y = %f”,label.center.y);
2.1.3 隐藏UIView
使用的UIView的hidden属性,可以在隐藏或者显示UIView间进行切换。具体的是,当hidden属性为YES时隐藏UIView,为NO时显示UIView(默认为NO)。
如图2-3所示是当hidden值分别为YES和NO时UILabel的显示画面。
图2-3 通过hidden属性控制UIView的显示与隐藏
通过控制UILabel(实例变量为label_)的hidden属性,切换UILabel的显示与隐藏的代码如下。
// hidden属性的切换 label_.hidden = !label_.hidden;
2.1.4 修改背景色
通过修改UIView的backgroundColor属性,可以改变其背景颜色。在backgroundColor属性中以UIColor类型数据形式指定颜色(关于UIColor,请参考本书的第5.3节中的详细介绍)。
表2-1是在backgroundColor属性中设置不同值时的变化。
表2-1 backgroundColor属性中设置不同值时的变化
表2-1中最后的实例中,调用UIColor的initWithRed:green:blue:alpha:方法进行颜色的初始化,在红/绿/蓝中各指定0.0至1.0的数据来确定具体的颜色。另外,当alpha的值小于1.0时表示增加背景的透明性,当alpha值为0.0时表示完全透明。
2.1.5 设置透明色
第2.1.4节介绍了当alpha值小于1.0时背景将变得透明。实际上UIView也拥有alpha属性,当alpha值小于1.0时,可以使整个UIView变得透明。例如,对UILabel来说,不仅可以让其背景色透明,还可以让其中的文字也一起变得透明(如果有子元素,连子元素也一起变得透明)。
表2-2是通过控制alpha值来使UILabel(UIView的子类)变透明的实例示意表,为了更直观,这里将UILabel后母体背景设置成白色。
表2-2 alpha值控制UIView的透明度实例示意表
2.1.6 alpha属性与backgroundColor属性alpha值的区别
使UIView变得透明时,使用第2.1.5节介绍的alpha值就可以了。而第2.1.4节介绍的backgroundColor属性,通过指定其中的alpha值,只让背景变得透明。
此处比较一下,当设置这两种不同的alpha值时,对其中的子元素是如何影响的。首先,如图2-4所示,在一个大的标签上,放置两个小的标签(Child1与Child2)。此时还无法分辨,然后我们在大标签上设置图片背景,这样当各标签变得透明时,将会看见后面的图片。
图2-4 alpha值测试(测试开始前)
首先,我们将大标签的alpha值设置为“0.5”。此时如图2-5所示,包含各子元素小标签在内都变得透明了,可以看见后面的图片。
图2-5 alpha值测试(alpha=0.5)
接着,将大标签的alpha值保持为1.0,而将其backgrounColor属性的Alpha值设置为“0.5”,子元素的小标签并没有变得透明,只是大标签的背景变得透明而已,如图2-6所示。
图2-6 backgrounColor属性的alpha值(alpha=0.5)
此处,设置backgrounColor属性的Alpha值的代码如下。
// 让背景变得透明 labelParent_.backgroundColor = [labelParent_.backgroundColor colorWithAlphaComponent:0.5];