Objective-UI UIView及其子类
今天终于到学习UI的时候,也就是可以看到实质界面的时候.首先我们还是简单介绍一下iOS.
iOS是Apple公司的移动操作系统,主要用于iPhone,iPad,iPad Mini,iPod Touch等移动产品.借助iOS,我们可以开发视频类,美图类,新闻类,音乐类,团购类,电商类,阅读类,出行类,生活服务类,游戏类等应用程序.除此之外,iOS还可以与外部设备通信,开发出更多改变生活的产品,例如:只能家居(iOS App控制电视,空调等),健身产品(将人体的健康状况通过App直观的展现出来)等.
UI(User Interface):用户界面,用户能看到的各种各样的页面元素. iOS App = 各种各样的UI控件 + 业务逻辑和算法.想要开发出一款精美的应用程序,需要熟练掌握各种UI控件的用法.
iOS发展到现在,从最初的iOS2.0到现在,经历了一些变化,在UI外观上,iOS7发生了重大变革,以线条为主,倾向于扁平化,更着重与体现应用程序的内容. 在iOS7之前的UI外观是以虚拟化为主,注重立体,阴影的配搭,无形中降低了应用程序内容的地位.
那么如何将UI呈现出来呢????
iOS提供了这么多UI,如何去呈现这些UI, 有一个叫UIWindow的. window是窗口,每个App都需要借助window将内容展现给用户看.在iOS中,使用UIWindow类来表示窗口,通常一个应用程序只创建一个UIWindow对象. window的主要作用是呈现内容给用户,我们不会对window做太多操作.
现在我们来看一下如何创建window,在创建window的时候,需要制定window的大小,通常window的大小(frame)与屏幕(UIScreen)大小一致,例如代码:
self.window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
首先我们先要创建一个空工程(Empty Application)创建步骤
1. 打开x-code 6 Create a new Xcode project—>iOS下的Application—>Empty Application。点击Next。
2、输⼊入Product Name ,点击Next。
3、选择项⺫⽬目保存路径,点击Create。
现在工程创建好了,我们在来看一下,在这个工程里需要添加的一些控件,我们来一一的学习.今天主要学习UIView.
UIView(视图):代表屏幕上的一个矩形区域,iOS中用UIView来表示视图, UI的控件都属于View, iOS中所有能看到的内容都是View或其子类.我们有了window,现在还需要在创建一个view.代码如下:
1.开辟空间并初始化视图(初始化时,给出视图位置和大小);
UIView *blueView = [[UIView alloc]initWithFrame:CGRectMake(100,100,120,100)];
2.对视图做一些设置(比如:背景颜色)
blueView.backgroundColor = [UIColor blueColor];
3.将视图添加到window上进行显示
[self.window addSubview:blueView];
4.释放视图对象
[blueView release];
//属性解释
#pragma mark -- frame --
frame是view的重要属性,是我们做视图布局的关键,它决定了视图的大小和位置.对于如何掌握view的大小和位置是一个很重要的前提, iOS提供了用于布局的平面坐标系,左上角为坐标系的原点.
水平向右:为x的正方向, 屏幕最左到最有可划分320等份. 这是iPhone4 4s 和 5系列的 iphone6是375等份 iPhone6Plus 414等份
垂直向下:为y的正方向, 屏幕最上到最下可划分480等份(3.5寸屏幕).575等份(4寸屏幕). iPhone6(4.7寸屏幕)667等份, iPhone6Plus(5.5寸屏幕) 736等份
坐标系不是以像素作为划分依据,而是以"点"作为依据.
frame是一个结构体,包含2部分的内容: origin和size.
origin也是一个结构体,包含2部分的内容: x和y.
struct CGPoint
{
CGFloat x;
CGFloat y;
};
size同样也是一个结构体,包含2部分的内容:width和height.
typedef struct CGPoint CGPoint;
struct CGSize
{
CGFloat width;
CGFloat height;
};
typedef struct CGSize CGSize ;
frame的origin和size是相对于父视图来说的.
struct CGRect
{
CGPoint origin;
CGPoint size;
};
typedef struct CGRect CGRect;
CGRectMake()函数可以帮我们快速构造一个CGRect变量
#pragma mark -- 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;
#pragma mark -- bounds --
bounds(边界)也是view的重要属性,用于定义自己的边界,它和frame一样是一个CGRect结构体变量.当一个view设置bounds时,会把自己当成一个容器,定义自己的边界大小 以及 左上角的初始坐标.当子视图添加到此视图时,会根据bounds指定的原点(0,0)计算frame,并非是左上角.
frame, bounds, center三者之间有着微妙的联系, 看下图:
UIView的addSubview:方法可以添加子视图,对于同一个视图的所有子视图来讲,后添加的子视图会把前面的子视图盖在下面.
UIView除了提供添加视图的方法,还提供了管理视图层次的方法.
UIView作为其他UI控件的BaseClass,提供了很多属性
以上是View的详解, 现在我们来看一下放在view上的控件,今天我们来看UILabel.
#pragma mark -- UILabel --
UILabel(标签): 是显示文本的控件,在App中UILabel是出现频率最高的控件, UILabel是UIView的子类,作为子类一般是为了扩充父类的功能,UILabel扩展了文字显示的功能,UILabel是能显示文字的视图. 文本就是文字(字符串),文本显示就是在视图上显示出来, 下面我们来看一下如何使用UILabel.
1.开辟控件并初始化(如果本类有初始化方法,使用自己的,没有的话,就使用父类的).
UILabel *userNameLabel = [[UILabel alloc]initWithFrame:CGRectMake(30,100,100,30)];
2.设置文本控件相关的属性
userNameLabel.text = @"用户名";
3.添加到父视图上
[self.view addSubview:userNameLabel];
4.释放
[userNameLabel release];
UILabel还有一些属性,大家可以一一试试.
总结: App靠window类呈现内容,一个程序一般只创建一个window. App中能看到的元素,都是UIView及其子类.
UIView作为所有可视化控件的BaseClass,提供了许多属性和方法.显示效果控制(frame,alpha等),视图添加和移除(addSubview:等),视图层次调整(bringSubviewToFront:等)等.
UILabel属于具体的视图,有自己的侧重点.
