f2da63e17923fd0a18be1c90b948eb43.jpg
[TOC]
序言
本文为入门教程：主要针对无任何编程基础或是想了解IOS/Swfit编程开发的小伙伴。
若本文让你感到任何不适，头晕想吐等症状，嘿嘿嘿···本人概不负责！！！
12.jpg
概述
经过前三次对Swift基础语法的讲解之后,我们来到了Swift的UI设计篇,UI设计篇我将全面的讲述UI设计的相关知识并且继续插入一些Swift常用的语法.本章教程为UI设计篇中的UIImageView和UIbutton一些基本基础和简单应用.
内容
1.UIImageView的基本属性
UIimageView继承UIView拥有UIView的一切属性,UIImageView就是图片视图,在我们看到的app上有关图片的一切都属于UIImageView.
//MARK - (注意:代码中所有的图片名eg:"back2.jpg","luffy2.png" 都是我提前将这个名字的图片加载到项目中的,如果需要运行代码区的代码,需要自行加载图片或修改图片名!!!)
//MARK - (注意:代码中所有的图片名eg:"back2.jpg","luffy2.png" 都是我提前将这个名字的图片加载到项目中的,如果需要运行代码区的代码,需要自行加载图片或修改图片名!!!)
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//========UIView的属性=========
//UIImageView:UIView
//1.创建UIImageView对象
let imageView = UIImageView.init(frame: CGRectMake(100, 100, 300, 300))
//2.添加到界面上
self.view.addSubview(imageView)
//3.设置背景颜色
imageView.backgroundColor = UIColor.yellowColor()
//=======UImageView专有属性======
//1.image属性
//通过图片名去创建一个图片对象(注意:如果图片的格式是png,那么图片名的后缀可以省略.但是其他格式的图片的图片名的后缀不能省略)
imageView.image = UIImage.init(named: "back2.jpg")
imageView.image = UIImage.init(named: "luffy2.png")
//通过图片路径去创建一个图片对象
//将文件(除了swift文件)放到工程中,实质是放到了当前应用程序的包文件中
//想要拿到工程中的图片路径先要获取包文件;
//拿到包中的指定的文件的路径
let imagePath = NSBundle.mainBundle().pathForResource("luffy4", ofType: "png")
imageView.image = UIImage.init(contentsOfFile: imagePath!)
//比较通过图片名和通过图片地址创建图片对象的两种方法:
//1).通过图片名创建的图片对象在程序结束后才会销毁,只会创建一次;通过图片地址创建的图片对象是当前图片对象不再使用的时候就销毁
//2).使用图片名创建图片的情况:创建小图标的时候;在工程中会重复使用的图片
//3).使用图片地址创建图片对象的情况:不会频繁的在多个界面出现的大图
//2.内容
imageView.contentMode = .ScaleAspectFill
}
}
2.UIImageView帧动画
帧动画的实质就是重复的在一段时间内连续播放一定数量的图片.主要的实现原理就是创建一个计时器和将一系列的图片放在数组中.
import UIKit
class ViewController: UIViewController {
var imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
self.creatImageView()
//创建一个定时器,并且自动开启
//参数1:定时时间
//参数2:调用方法的对象
//参数3:存储定时时间到了以后需要调用的方法
//参数4:给当前的NSTimer的userInfo属性赋值的值
//参数5:是否重复
NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: "timerAction:", userInfo: "aaa", repeats: true)
}
func timerAction(timer:NSTimer){
self.imageView.frame.origin.x += 3
if self.imageView.frame.origin.x >= self.view.bounds.width - self.imageView.bounds.width{
//暂停计时器
timer.fireDate = NSDate.distantFuture()
//让计时器继续
//timer.fireDate = NSDate.distantPast()
}
}
func creatImageView(){
//1.创建一个UIIamgeView对象
//通过图片去创建一个imageView;UIImageView的大小是图片的大小,坐标(0,0)
imageView = UIImageView.init(image: UIImage.init(named: "DOVE 1.png"))
//显示在界面上
self.view.addSubview(imageView)
//3.使用UIImageView播放帧动画
//a.设置帧动画数组
//创建一个空的数组
var imageArray = [UIImage]()
//通过for循环创建18张图片
for item in 1...18{
//拼接图片名
let imageName = "DOVE \(item).png"
//创建对应的图片
let image = UIImage.init(named:imageName)
//将图片保存到数组中
imageArray.append(image!)
}
imageView.animationImages = imageArray
//b.设置动画时间,单位秒
imageView.animationDuration = 1
//c.设置动画的重复次数 值0的意思是一直重复
imageView.animationRepeatCount = 0
//c.开始动画
imageView.startAnimating()
}
3.UIButton的基本属性
简单和必须的控件基础吧,没有什么重点,因为全都是重点,唯一需要注意的是设置按钮上的文字对齐吧,因为不常用我一直以为是这句代码:
//titleBtn.titleLabel?.textAlignment = .Left //--此方法错误
很多大神和高手都潜意识的认为是这句代码,我也一直这么认为,然而我以为的仅仅只是我以为,经过数十次测试这句代码本没有卵用,看起来很正确但是必不会把按钮上的文字居左对齐!正确的代码是这句:
titleBtn.contentHorizontalAlignment = .Left
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.titleButton()
self.imageButton()
self.imageTitleBtn()
//let a = Double(arc4random()%256)/255
//print(a)
}
//MARK: - 图片文字按钮
func imageTitleBtn(){
//同时设置title和image属性,显示是图片在左,文字在右
//1.创建一个按钮对象
let btn1 = UIButton.init(frame: CGRectMake(100, 300, 200, 50))
self.view.addSubview(btn1)
//2.设置title
btn1.setTitle("标题", forState: .Normal)
btn1.setTitleColor(UIColor.redColor(), forState: .Normal)
//3.设置图片
btn1.setImage(UIImage.init(named: "luffy1"), forState: .Normal)
//btn1.setBackgroundImage(UIImage.init(named: "luffy2"), forState: .Normal)
//4.添加事件
btn1.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
}
//MARK: - 图片按钮
func imageButton(){
//1.创建一个按钮对象
let imageBtn = UIButton.init(frame: CGRectMake(100, 200, 80, 80))
//2.添加到界面上
self.view.addSubview(imageBtn)
//3.设置图片
//参数1:图片
//参数2:状态(正常/高亮/选中/不可用)
imageBtn.setImage(UIImage.init(named: "luffy1"), forState: .Normal)
//4.添加按钮点击的事件
imageBtn.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
}
//MARK: - 文字按钮
func titleButton(){
//UIButton:UIControl:UIView
//UIButton上有一个titleLable专门负责按钮上文字的显示;有一个imageView专门负责按钮上图片的显示
//=========UIView的属性和方法=========
//1.创建UIButton对象
let titleBtn = UIButton.init(frame: CGRectMake(100, 100, 100, 50))
//2.添加到界面上
self.view.addSubview(titleBtn)
//3.设置背景颜色
titleBtn.backgroundColor = UIColor.redColor()
//========UIButton专有的属性和方法========
//1.设置按钮上显示的文字
//参数1:想要在按钮上显示的文字
//参数2:状态
//Normal -> 正常状态(按钮正常显示,没有被点击或者按下的时候)
//Highligthed -> 高亮(按钮被按下,没有弹起来的时候的状态)
//Selected -> 选中状态
//Disabled -> 不可用状态(按钮不能被点击)
titleBtn.setTitle("确定", forState: .Normal)
titleBtn.setTitle("高亮", forState: .Highlighted)
titleBtn.setTitle("选中", forState: .Selected)
titleBtn.setTitle("不可用", forState: .Disabled)
//2.设置当前按钮是否选中(默认是false)
titleBtn.selected = false
//3.设置当前按钮是否可用(默认是true)
titleBtn.enabled = true
//4.设置文字颜色
titleBtn.setTitleColor(UIColor.yellowColor(), forState: .Normal)
titleBtn.setTitleColor(UIColor.lightGrayColor(), forState: .Disabled)
//注意:按钮上的文字和文字颜色,必须通过对应的set方法去根据状态去设置.其他和文字相关的属性可以通过拿到titleLabel去设置
//5.设置按钮上的文字字体
titleBtn.titleLabel?.font = UIFont.systemFontOfSize(12)
//6.设置按钮上的文字的对齐方式
//titleBtn.titleLabel?.textAlignment = .Left //--此方法错误
//MARK: 这是正确的方法
titleBtn.contentHorizontalAlignment = .Left
//KEY:===========7.给按钮添加事件=============
//参数1:调用方法的对象
//参数2:指定事件发生后参数1要去调用的方法
//参数3:事件
titleBtn.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
}
//MARK: - 按钮点击
func btnAction (btn:UIButton){
btn.backgroundColor = UIColor.init(red: CGFloat(arc4random()%256)/255, green: CGFloat(arc4random()%256)/255, blue: CGFloat(arc4random()%256)/255, alpha: 1)
}
}
4.简单的UIButton应用,定制一个图片高度是整个按钮高度的4/5;文字高度是整个按钮高度的1/5的按钮
新建一个类继承UIButton,取名LGButton.
import UIKit
class LGButton: UIButton {
//图片高度是整个按钮高度的4/5;文字高度是整个按钮高度的1/5
//功能:设置button上的imageView的坐标和大小
//参数1:当前按钮的范围(只需要大小)
//返回值:重新设置的图片的坐标和大小
override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
let x: CGFloat = 0
let y: CGFloat = 0
let w: CGFloat = contentRect.size.width
let h: CGFloat = contentRect.size.height * 4 / 5
return CGRectMake(x, y, w, h)
}
//功能:设置button上的imageView的坐标和大小
//参数1:当前按钮的范围(只需要大小)
//返回值:重新设置的图片的坐标和大小
override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
let x: CGFloat = 0
let y: CGFloat = contentRect.size.height * 4 / 5
let w: CGFloat = contentRect.size.width
let h: CGFloat = contentRect.size.height / 5
return CGRectMake(x, y, w, h)
}
使用上面定制的按钮
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//1.创建按钮对象
let btn = LGButton(frame:CGRectMake(100,100,100,120))
//2.设置文字和
btn.setTitle("文字", forState: .Normal)
btn.setTitleColor(UIColor.redColor(), forState: .Normal)
btn.titleLabel?.textAlignment = .Center
//3.设置图片
btn.setImage(UIImage.init(named: "luffy4"), forState: .Normal)
//4.添加到界面上
self.view.addSubview(btn)
//5.添加按钮点击事件
btn.addTarget(self, action: "btnAction", forControlEvents: .TouchUpInside)
}
func btnAction(){
print("O(∩_∩)O哈哈哈~")
}
总结
本次教程是UI阶段使用最多的控件之一的UIimageView和UIbutton控件,需要反复的练习和掌握.这些基础属性也非常的简单.可以试着定制属于自己的控件.