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。


二、輸⼊入Product Name ,點擊Next。


三、選擇項⺫⽬目保存路徑,點擊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屬於具體的視圖,有本身的側重點.