IOS/Swift入门开发UI篇-UIView和UILabel基
2016-09-12 本文已影响2383人
芒果微笑
[TOC]
序言
本文为入门教程：主要针对无任何编程基础或是想了解IOS/Swfit编程开发的小伙伴。
若本文让你感到任何不适，头晕想吐等症状，嘿嘿嘿···本人概不负责！！！
概述
经过前三次对Swift基础语法的讲解之后,我们来到了Swift的UI设计篇,UI设计篇我将全面的讲述UI设计的相关知识并且继续插入一些Swift常用的语法.
内容
UIView基础和父子视图的特点和方法
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//1.创建一个UIView的对象
let redView = UIView.init(frame:CGRectMake(100, 100, 200, 200))
//2.设置背景颜色
redView.backgroundColor = UIColor.redColor()
//3.添加到界面上
//self.view就是redView的父视图,redView就是self.view的子视图
self.view.addSubview(redView)
//MARK: - 父子视图的特点和方法
//再创建一个黄视图
let yellowView = UIView.init(frame:CGRectMake(0, 0, 100, 100))
yellowView.backgroundColor = UIColor.yellowColor()
//1.一个视图只有一个父视图,可以有多个子视图
//连续将同一个视图添加到两个视图上,最后一次添加有效
self.view.addSubview(yellowView)
//redView.addSubview(yellowView)
//2.获取一个视图的父视图
let superView = redView.superview
superView?.backgroundColor = UIColor.greenColor()
//3.获取一个视图的所有的子视图
redView.tag = 100
yellowView.tag = 101
let subViews = self.view.subviews
//拿到所有的子视图获得红色视图和黄色视图
for item in subViews {
if item.isKindOfClass(UILabel.self){
print(item)
}
}
for item in subViews{
if item.tag == 100{
print("红色视图")
item.backgroundColor = UIColor.orangeColor()
}
if item.tag == 101{
print("黄色视图\(item)")
}
}
//4.通过tag值拿到指定的子视图
let subView1 = self.view.viewWithTag(101)
subView1?.frame.origin.y = 100
}
}
视图的层次关系
import UIKit
class ViewController: UIViewController {
//MARK: - 生命周期的方法
override func viewDidLoad() {
super.viewDidLoad()
self.creatUI()
}
//MARK: - 创建界面
func creatUI(){
//在一个视图上,添加多个子视图的时候,子视图之间如果有公共部分.那么后添加的子视图会覆盖先添加的.
//一般情况下,如果想要将一个视图显示在最下面,就最先添加.想要显示在最上面就最后添加
//创建视图
let view1 = self.creatView(CGRectMake(50, 100, 100, 100), backColor: UIColor.redColor())
let view2 = self.creatView(CGRectMake(100, 150, 100, 100), backColor: UIColor.yellowColor())
let view3 = self.creatView(CGRectMake(150, 200, 100, 100), backColor: UIColor.greenColor())
let view4 = self.creatView(CGRectMake(180, 130, 100, 100), backColor: UIColor.purpleColor())
//2.将指定的视图放到最上层
self.view.bringSubviewToFront(view2)
//3.将指定的视图放到最下层
self.view.sendSubviewToBack(view2)
//4.将指示的视图插入到另一个视图的上面
self.view.insertSubview(view2,aboveSubview:view3)
//5.将指定的视图插入到另外一个视图的下面
self.view.insertSubview(view2,belowSubview:view1)
}
func creatView(frame:CGRect,backColor:UIColor) -> UIView{
//创建视图对象
let subView = UIView.init(frame:frame)
//设置背景颜色
subView.backgroundColor = backColor
//添加到界面上
self.view.addSubview(subView)
//将创建的视图返回
return subView
}
}
UIView动画
import UIKit
class ViewController: UIViewController {
//MARK: - 属性
let subView = UIView()
//let subview:UIView? = nil 方式二
//MARK: - 生命周期
override func viewDidLoad() {
super.viewDidLoad()
//创建视图
subView.frame = CGRectMake(0, 0, 100, 100)
subView.center = self.view.center
subView.backgroundColor = UIColor.greenColor()
self.view.addSubview(subView)
//使用动画
self.UIViewAnimation4()
//1.切圆角
//当圆角的值为正方形的宽的一半,就可以切圆角
self.layerAction()
//2.设置边框
self.subView.layer.borderWidth = 5
self.subView.layer.borderColor = UIColor.yellowColor().CGColor
}
//MARK: - Layer属性
func layerAction(){
//layer属性是负责视图的形状(显示)
//切圆角
self.subView.layer.cornerRadius = 20
}
//MARK: - 动画方法
//UIView的动画使用来动画的改变视图的frame相关属性,背景颜色,透明度
//方法4:
//参数1:动画时间
//参数2:延迟时间
//参数3:弹簧的压力系数
//参数4:弹簧初始的速度
//参数5:选项
//参数6:设置动画结束视图的状态
//参数7:动画结束后要执行的闭包
func UIViewAnimation4(){
UIView.animateWithDuration(2, delay: 1, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: [ .Repeat, .Autoreverse], animations: {
//注意:对于有圆角的视图,改变大小而不改变形状,只能通过形变去缩放,不能改变frame的size就改变大小
//self.subView.transform = CGAffineTransformRotate(CGAffineTransformMakeTranslation(0, -240), CGFloat(M_PI_2))
self.subView.transform = CGAffineTransformMakeScale(0.5, 0.5)
}, completion: nil)
}
func UIViewAnimation3(){
//参数1:动画时间
//参数2:延迟时间
//参数3:动画选项, Repeat -> 动画重复执行
// Autoreverse -> 自动回到动画开始的状态
//参数4:设置动画结束时视图状态的闭包
//参数5:整个动画过程完成后需要执行的闭包
UIView.animateWithDuration(2, delay: 1, options: [ .Repeat, .Autoreverse], animations: {
self.subView.transform = CGAffineTransformMakeTranslation(0, -200)
}, completion: nil)
}
func UIViewAnimation2(){
//参数3:整个动画完成后回自动调用这个闭包
UIView.animateWithDuration(2, animations: {
self.subView.transform = CGAffineTransformMakeTranslation(0, -200)
}) { (_) in
//写动画结束后需要执行的代码
UIView.animateWithDuration(2, animations: {
self.subView.transform = CGAffineTransformMakeTranslation(0, 0)
})
}
}
func UIViewAnimation1(){
//功能:执行这个方法前视图的状态,动画的切换到闭包里面设置的最终状态
//参数1:动画时间(单位:秒)
//参数2:闭包,设置动画结束时的视图的状态
UIView.animateWithDuration(2) {
//在这儿来设置视图动画结束时的状态
self.subView.frame.origin.y = 50
//self.subView.frame.size = CGSizeMake(50, 50)
self.subView.transform = CGAffineTransformMakeScale(0.6, 0.6)
self.subView.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4))
self.subView.transform = CGAffineTransformRotate(CGAffineTransformMakeScale(0.6, 0.6), CGFloat(M_PI_4))
//c.动画的改变视图的背景颜色
self.subView.backgroundColor = UIColor.redColor()
//d.动画的改变视图的透明度
self.subView.alpha = 0.3
}
}
}
UILable基础属性
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//MARK:生命周期
self.creatLable()
}
//MARk: - 创建Lable
func creatLable(){
//UILable:UIView -> UIView的属性和方法,UILabel都拥有
//========从UIView继承下来的属性=======
//1.创建UILabel对象
let label = UILabel.init(frame: CGRectMake(10, 100, 400, 500))
//2.添加到界面上
self.view.addSubview(label)
//3.设置背景颜色
label.backgroundColor = UIColor.yellowColor()
//=======UILabel的专属属性=======
//1.text属性
//设置label上显示的文字
label.text = "//UILable:UIView -> UIView的属性和方法,UILabel都拥有,default is NSLineBreakByTruncatingTail. used for single and multiple lines of text"
//拿到label上显示的文字
print(label.text!)
//2.设置字体
label.font = UIFont.systemFontOfSize(17)
//参数1:字体大小
//参数2:字体粗细(0~1)
label.font = UIFont.systemFontOfSize(17, weight: 0.1)
//使用系统黑体,参数:设置字体大小
label.font = UIFont.systemFontOfSize(17)
//使用系统斜体
label.font = UIFont.italicSystemFontOfSize(30)
//获取系统所有字体的字体名
print(UIFont.familyNames(),UIFont.familyNames().count)
//参数1:字体名
//参数2:字体大小
//label.font = UIFont.init(name: "HYZhuanShuF", size: 30)
//label.font = UIFont.systemFontOfSize(30, weight: 0.3)
//GET:使用自己的字体的步骤:
//1.将ttf文件拖到工程中
//2.在info.plist文件中添加键值对"Fonts provided by application",将字体添加到系统字体库中
//3.通过提供字体名的构造方法去创建字体(先要找到自己添加的字体的字体名)
//3.设置字体颜色
label.textColor = UIColor.redColor()
//4.设置阴影颜色
label.shadowColor = UIColor.grayColor()
//5.设置阴影的偏移效果
label.shadowOffset = CGSizeMake(-2, -1)
//6.设置文字的对齐模式(默认是左对齐)
//Center -> 居中
//Right -> 右对齐
label.textAlignment = .Left //.Right //.Center
//7.设置行数
label.numberOfLines = 3
//自动换行
label.numberOfLines = 0
//8.设置换行模式
//ByWordWrapping -> 以单词为单位换行
//ByCharWrapping -> 以字符为单位换行
//......
label.lineBreakMode = .ByCharWrapping
}
}
应用:根据文字设置label的大小
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//需要显示在label上的文字
let str = "你好!我的世界 事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上事实上水水水水谁谁谁水水水水水水水水水水水水水水水水水水水水水水水水水水水水"
//计算显示指定文字所需要的最小空间
//1.将swift的字符串转换成OC的字符串
let ocStr = str as NSString
//2.计算字符串的大小
//参数1:限制显示当前字符串的最大宽度和最大高度
//参数2:设置渲染方式(UsesLineFragmentOrigin)
//参数3:确定字体的字体(大小)
//NSFontAttributeName -> 字体对应的key值
//NSForegroundColorAttributeName -> 文字颜色对应的key值
let strSize = ocStr.boundingRectWithSize(CGSizeMake(200, 5000), options: .UsesLineFragmentOrigin, attributes:[NSFontAttributeName:UIFont.systemFontOfSize(30)] , context: nil).size
print(strSize)
//3.创建label显示文字
let label = UILabel.init(frame: CGRectMake(100, 100, strSize.width, strSize.height))
label.backgroundColor = UIColor.yellowColor()
label.font = UIFont.systemFontOfSize(30)
self.view.addSubview(label)
label.text = str
//自动换行
label.numberOfLines = 0
}
}
总结
本次教程主要讲的是UIView的基本内容,包括UIView的父子视图关系和特点,视图层次关系和动画;UILabel的基本属性和简单应用都非常的简单.
