f2da63e17923fd0a18be1c90b948eb43.jpg
序言
本文為入門教程：主要針對無任何編程基礎或是想了解IOS/Swfit編程開發的小伙伴。
若本文讓你感到任何不適，頭暈想吐等癥狀，嘿嘿嘿···本人概不負責！！！
傳送門
由于本教程是連載類型，為了各位看客老爺跟加直觀的欣賞。
第一課：http://www.lxweimin.com/p/8e8ff60121c4
第二課：http://www.lxweimin.com/p/8cdabd470f6f
第四課: http://www.lxweimin.com/p/55ca9d54a610
概述
經過前三次對Swift基礎語法的講解之后,我們來到了Swift的UI設計篇,UI設計篇我將全面的講述UI設計的相關知識并且繼續插入一些Swift常用的語法.
內容
1.打開Xcode新建一個項目,步驟如下:
1.png
2.png
2.了解AppDelegate.swift中的函數和方法作用和意義
想要學習一門語言就必先了解它.新建一個iOS的項目之后我們發現會自動生成很多文件,我現在來一個一個的了解它的作用和使用的方法.先打開項目的第一個文件AppDelegate.swift
如圖:
A9205C0B-5DFE-49F8-B465-8FC282B12BF8.png
文件中的內容:
//import是導入文件的/庫的關鍵字
//UIKit是iOS中所有的控件的所在庫文件
import UIKit
@UIApplicationMain //調用了OC中的UIApplicationMain函數;
//UIApplicationMain是IOS應用程序的入口
//UIApplacationMain:1.創建了一個UIApplication對象,代表當前應用程序.作用是用來檢測當前應用程序狀態的改變
// 2.創建一個遵守UIApplicationDelegate的協議的子類對象作為UIApplication的代理,作用是處理應用程序狀態的改變(創建AppDelegate對象并且設置為UIApplication對象的代理)
class AppDelegate: UIResponder, UIApplicationDelegate {
//屬性:
var window: UIWindow?
//方法:
//一.當應用程序已經啟動成功后,會自動調用這個方法
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
// Override point for customization after application launch.
//1.在這個方法中來搭建應用程序中的所有的界面
//2.獲取應用程序需要展示的數據
//3.使用界面展示數據
//注意:如果不再做這個方法中去創建window,那么程序會通過Main.stroyboard去創建應用程序的界面
print("程序啟動成功")
return true
}
//二.當應用程序將要成為非活躍狀態的時候會自動調用這個方法.
//活躍狀態:程序在屏幕上可見
//非活躍狀態:程序沒有顯示在屏幕上(按home鍵進入后臺,來電打斷,在當前應用程序中打開其他的應用程序)
func applicationWillResignActive(application: UIApplication) {
//按下home鍵:command + shift + h
//在這個方法中一般去暫停視頻/音頻播放;游戲需要暫停;保存數據
print("將要成為非活躍狀態")
}
//三.應用程序已經進入后臺的時候會自動調用
//進入后臺:按home鍵
func applicationDidEnterBackground(application: UIApplication) {
print("進入后臺")
}
//四.應用程序將要進入前臺的時候會自動調用
//進入前臺:
func applicationWillEnterForeground(application: UIApplication) {
print("將要進入前臺")
}
//五.應用程序已經變成活躍狀態的時候會自動調用
//1.程序啟動成功后
//2.程序從后臺重新進入前臺
//3.來電打斷結束...
func applicationDidBecomeActive(application: UIApplication) {
print("已經變成活躍狀態")
}
//六.應用程序將要終止的時候會調用這個方法
func applicationWillTerminate(application: UIApplication) {
print("應用程序將要終止")
}
}
我對AppDelegate.swift文件中的每一行代碼都做了詳細的解釋,然后書寫一個幾個print函數幫助我們理解.
3.創建一個最簡單的UIWindow對象
import UIKit
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
//UIWindow:UIView
//window:窗口,一個應用想要展示在屏幕上,至少要有一個window,一個手機應用程序一般只有一個window
//應用程序中的所有的界面全部是展示在window上的
var window: UIWindow?
//1.程序已經啟動完成
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
//1.創建UIWindow對象
//self.window = UIWindow.init()
//frame是UIView中的屬性,確定視圖顯示在屏幕上的位置和大小
//UIScreen.mainScreen() 拿到手機屏幕
self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
//2.設置根視圖控制器
self.window?.rootViewController = UIViewController()
//3.設置背景顏色
self.window?.backgroundColor = UIColor.yellowColor()
return true
}
}
4.現在介紹項目的第二個文件ViewController.swift,這個翻譯成中文:視圖控制器,從名字就知道關于視圖(界面)的主要代碼都寫在這個文件下,我們先打開這個文件把不需要的注釋刪除.然后我們來添加幾個視圖到界面上.
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//UIView:是IOS中所有視圖(控件)直接/間接的父類;所以UIView的屬性和方法,對于其他類型的視圖都有效
//視圖:在屏幕上能看到的所有的東西都屬于視圖
//一.創建UIView的對象
let redView = UIView.init()
//想要將視圖展示在屏幕上的兩個必要條件
//1.必須設置坐標的大小(默認坐標是(0,0),大小(0,0,))
//2.將視圖添加到已經展示在屏幕上的視圖上
//二.設置frame屬性(由坐標(x,y)和大小(width,height)兩個部分組成)
redView.frame = CGRect(x: 10, y: 10, width: 100, height: 100)
//IOS中所有的結構體都有一個對應的Make方法用來快速的創建一個結構體變量
redView.frame = CGRectMake(10, 10, 100, 100)
//三.將視圖添加到界面上
self.view.addSubview(redView)
//四.設置背景顏色
//視圖的背景顏色默認是透明色
//顏色的創建方式:
//1.通過類型方法創建指定顏色
//
redView.backgroundColor = UIColor.redColor()
//通過三原色來創建顏色
//CGFloat就是UI中的浮點型
//參數1,2,3:紅,綠,藍的值(0~1)-(0/255~255/255)
//參數4:透明度
//redView.backgroundColor = UIColor(red: 149/255.0, green: 106/255.0, blue: 55/255.0, alpha: 1)
//設置不同程度的灰色
//redView.backgroundColor = UIColor(white: 0.2, alpha: 1)
//練習:創建一個黃色的矩形,顯示在紅色視圖的中心位置,大小(50,50)
//方式1:
//創建視圖對象并且設置frame屬性
/*
let yellowView = UIView.init()
yellowView.frame = CGRectMake(35, 35, 50, 50)
//添加到界面上
self.view.addSubview(yellowView)
//設置背景顏色
yellowView.backgroundColor = UIColor.yellowColor()
*/
//方式2:
let yellowView = UIView(frame: CGRectMake(25,25,50,50))
redView.addSubview(yellowView)
yellowView.backgroundColor = UIColor.yellowColor()
//GET:計算視圖的坐標的時候,注意相對性.當前視圖被添加到那個視圖上,那么當前視圖的坐標就是相對于誰來算的
}
}
5.講解一個視圖對象的基本屬性.創建一個視圖對象,就應該將代碼寫入ViewController.swift文件中,因為ViewController.swift是視圖控制器,屬于視圖的對象或方法都應該寫入視圖控制器中.
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//創建一個視圖對象
let redView = UIView.init()
//添加到界面上
self.view.addSubview(redView)
//設置背景顏色
redView.backgroundColor = UIColor.redColor()
//1.frame(坐標和大小)
redView.frame = CGRectMake(100, 100, 100, 100)
//2.center(中心點坐標)
//通過frame和確定視圖的中心點坐標
print(redView.center)
print(redView.frame)
redView.center = CGPointMake(200, 200)
print(redView.frame)
//3.bounds(坐標和大小)
//默認情況下bounds的坐標(0,0),大小和視圖的frame大小一樣
print(redView.bounds)
//了解:
//如果改變bounds的大小,不改變center的坐標,改變frame的坐標和大小
/*
redView.bounds = CGRectMake(0, 0, 200, 200)
print(redView.frame)
print("center\(redView.center)")
*/
//如果改變bounds的坐標,不影響當前視圖的位置.但是影響添加到當前視圖上的子視圖的坐標,不建議修改bounds
redView.bounds = CGRectMake(0, 0, 100, 100)
let yellowView = UIView.init(frame:CGRectMake(10, 10, 40, 40))
yellowView.backgroundColor = UIColor.yellowColor()
redView.addSubview(yellowView)
//4.transform(形變)
// 當前視圖發生形變,那么添加到當前視圖上的所有的視圖會跟著一起形變
//1). 縮放
//參數1:x方向上的縮放比例
//參數2:y方向上的縮放比例
redView.transform = CGAffineTransformMakeScale(0.5, 0.5)
//2).旋轉
//參數:旋轉角度(圓周率對應的角度)
redView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4))
//3).平移
//參數1:在x方向上平移的距離
//參數2:在y方向上平移的距離
redView.transform = CGAffineTransformMakeTranslation(0, 300)
//4).多個形變同時進行
//在另外一個形變的前提下旋轉
//參數1:另外一個形變
//在擁有縮放這個形變的前提下旋轉(既可以縮放又可以旋轉)
redView.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.5, 0.5), CGFloat(M_PI_4 / 2))
//在另外一個形變的前提下平移(既可以縮放和旋轉又可以平移)
redView.transform = CGAffineTransformTranslate(redView.transform, 0, 100)
//既可以平移又可以縮放
redView.transform = CGAffineTransformScale(CGAffineTransformMakeTranslation(100, 0), 0.5, 2)
//組合兩個形變
//旋轉形變
let rotate = CGAffineTransformMakeRotation(0.2)
//平移形變
let transLation = CGAffineTransformMakeTranslation(100, 100)
//將旋轉形變和平移形變組合
redView.transform = CGAffineTransformConcat(rotate, transLation)
}
}
練習:你可以嘗試在創建一個視圖對象如下圖所示:
B6512EC1-6A2F-4EE1-A22B-91946C568230.png
總結
本次教程因為首次講解關于UI設計的內容,所以代碼非常簡單,都是一些簡單關于視圖控制器和視圖對象屬性和方法的講解.
