f2da63e17923fd0a18be1c90b948eb43.jpg

[TOC]

序言

本文為入門教程：主要針對(duì)無任何編程基礎(chǔ)或是想了解IOS/Swfit編程開發(fā)的小伙伴。
若本文讓你感到任何不適，頭暈想吐等癥狀，嘿嘿嘿···本人概不負(fù)責(zé)?。。?

12.jpg

概述

經(jīng)過前三次對(duì)Swift基礎(chǔ)語法的講解之后,我們來到了Swift的UI設(shè)計(jì)篇,UI設(shè)計(jì)篇我將全面的講述UI設(shè)計(jì)的相關(guān)知識(shí)并且繼續(xù)插入一些Swift常用的語法.本章教程為UI設(shè)計(jì)篇中的UIImageView和UIbutton一些基本基礎(chǔ)和簡(jiǎn)單應(yīng)用.

內(nèi)容

1.UIImageView的基本屬性

UIimageView繼承UIView擁有UIView的一切屬性,UIImageView就是圖片視圖,在我們看到的app上有關(guān)圖片的一切都屬于UIImageView.
//MARK - (注意:代碼中所有的圖片名eg:"back2.jpg","luffy2.png" 都是我提前將這個(gè)名字的圖片加載到項(xiàng)目中的,如果需要運(yùn)行代碼區(qū)的代碼,需要自行加載圖片或修改圖片名!!!)

//MARK - (注意:代碼中所有的圖片名eg:"back2.jpg","luffy2.png" 都是我提前將這個(gè)名字的圖片加載到項(xiàng)目中的,如果需要運(yùn)行代碼區(qū)的代碼,需要自行加載圖片或修改圖片名!!!)
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //========UIView的屬性=========
        //UIImageView:UIView
        //1.創(chuàng)建UIImageView對(duì)象
        let imageView = UIImageView.init(frame: CGRectMake(100, 100, 300, 300))
        //2.添加到界面上
        self.view.addSubview(imageView)
        //3.設(shè)置背景顏色
        imageView.backgroundColor = UIColor.yellowColor()
        
        
        //=======UImageView專有屬性======
        //1.image屬性
        //通過圖片名去創(chuàng)建一個(gè)圖片對(duì)象(注意:如果圖片的格式是png,那么圖片名的后綴可以省略.但是其他格式的圖片的圖片名的后綴不能省略)
        imageView.image = UIImage.init(named: "back2.jpg")
        imageView.image = UIImage.init(named: "luffy2.png")
        
        //通過圖片路徑去創(chuàng)建一個(gè)圖片對(duì)象
        //將文件(除了swift文件)放到工程中,實(shí)質(zhì)是放到了當(dāng)前應(yīng)用程序的包文件中
        //想要拿到工程中的圖片路徑先要獲取包文件;
        //拿到包中的指定的文件的路徑
        
        let imagePath =  NSBundle.mainBundle().pathForResource("luffy4", ofType: "png")
        imageView.image = UIImage.init(contentsOfFile: imagePath!)
    
        //比較通過圖片名和通過圖片地址創(chuàng)建圖片對(duì)象的兩種方法:
        //1).通過圖片名創(chuàng)建的圖片對(duì)象在程序結(jié)束后才會(huì)銷毀,只會(huì)創(chuàng)建一次;通過圖片地址創(chuàng)建的圖片對(duì)象是當(dāng)前圖片對(duì)象不再使用的時(shí)候就銷毀
        //2).使用圖片名創(chuàng)建圖片的情況:創(chuàng)建小圖標(biāo)的時(shí)候;在工程中會(huì)重復(fù)使用的圖片
        //3).使用圖片地址創(chuàng)建圖片對(duì)象的情況:不會(huì)頻繁的在多個(gè)界面出現(xiàn)的大圖
        
        
        
        
        //2.內(nèi)容
        imageView.contentMode = .ScaleAspectFill
        
    }
    
    
  

}

2.UIImageView幀動(dòng)畫

幀動(dòng)畫的實(shí)質(zhì)就是重復(fù)的在一段時(shí)間內(nèi)連續(xù)播放一定數(shù)量的圖片.主要的實(shí)現(xiàn)原理就是創(chuàng)建一個(gè)計(jì)時(shí)器和將一系列的圖片放在數(shù)組中.

import UIKit

class ViewController: UIViewController {
    
    var imageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
       self.creatImageView()
        
        //創(chuàng)建一個(gè)定時(shí)器,并且自動(dòng)開啟
        //參數(shù)1:定時(shí)時(shí)間
        //參數(shù)2:調(diào)用方法的對(duì)象
        //參數(shù)3:存儲(chǔ)定時(shí)時(shí)間到了以后需要調(diào)用的方法
        //參數(shù)4:給當(dāng)前的NSTimer的userInfo屬性賦值的值
        //參數(shù)5:是否重復(fù)
        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{
            //暫停計(jì)時(shí)器
            timer.fireDate = NSDate.distantFuture()
            //讓計(jì)時(shí)器繼續(xù)
            //timer.fireDate = NSDate.distantPast()
            
            
        }
        
    }
    
    func creatImageView(){
        //1.創(chuàng)建一個(gè)UIIamgeView對(duì)象
        //通過圖片去創(chuàng)建一個(gè)imageView;UIImageView的大小是圖片的大小,坐標(biāo)(0,0)
        imageView = UIImageView.init(image: UIImage.init(named: "DOVE 1.png"))
        //顯示在界面上
        self.view.addSubview(imageView)
        
        //3.使用UIImageView播放幀動(dòng)畫
        //a.設(shè)置幀動(dòng)畫數(shù)組
        
        //創(chuàng)建一個(gè)空的數(shù)組
        var imageArray = [UIImage]()
        //通過for循環(huán)創(chuàng)建18張圖片
        for item in 1...18{
            //拼接圖片名
            let imageName = "DOVE \(item).png"
            //創(chuàng)建對(duì)應(yīng)的圖片
            let image = UIImage.init(named:imageName)
            //將圖片保存到數(shù)組中
            imageArray.append(image!)
        }
        imageView.animationImages = imageArray
        //b.設(shè)置動(dòng)畫時(shí)間,單位秒
        imageView.animationDuration = 1
        //c.設(shè)置動(dòng)畫的重復(fù)次數(shù) 值0的意思是一直重復(fù)
        imageView.animationRepeatCount = 0
        //c.開始動(dòng)畫
        imageView.startAnimating()
        
        
    }

3.UIButton的基本屬性

簡(jiǎn)單和必須的控件基礎(chǔ)吧,沒有什么重點(diǎn),因?yàn)槿际侵攸c(diǎn),唯一需要注意的是設(shè)置按鈕上的文字對(duì)齊吧,因?yàn)椴怀Ｓ梦乙恢币詾槭沁@句代碼:
//titleBtn.titleLabel?.textAlignment = .Left //--此方法錯(cuò)誤
很多大神和高手都潛意識(shí)的認(rèn)為是這句代碼,我也一直這么認(rèn)為,然而我以為的僅僅只是我以為,經(jīng)過數(shù)十次測(cè)試這句代碼本沒有卵用,看起來很正確但是必不會(huì)把按鈕上的文字居左對(duì)齊!正確的代碼是這句:
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(){
        //同時(shí)設(shè)置title和image屬性,顯示是圖片在左,文字在右
        //1.創(chuàng)建一個(gè)按鈕對(duì)象
        let btn1 = UIButton.init(frame: CGRectMake(100, 300, 200, 50))
        self.view.addSubview(btn1)
        
        //2.設(shè)置title
        btn1.setTitle("標(biāo)題", forState: .Normal)
        btn1.setTitleColor(UIColor.redColor(), forState: .Normal)
        
        //3.設(shè)置圖片
        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.創(chuàng)建一個(gè)按鈕對(duì)象
        let imageBtn = UIButton.init(frame: CGRectMake(100, 200, 80, 80))
        //2.添加到界面上
        self.view.addSubview(imageBtn)
        //3.設(shè)置圖片
        //參數(shù)1:圖片
        //參數(shù)2:狀態(tài)(正常/高亮/選中/不可用)
        imageBtn.setImage(UIImage.init(named: "luffy1"), forState: .Normal)
        //4.添加按鈕點(diǎn)擊的事件
        imageBtn.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
        
        
    }
    
    
    //MARK: - 文字按鈕
    
    func titleButton(){
        //UIButton:UIControl:UIView
        //UIButton上有一個(gè)titleLable專門負(fù)責(zé)按鈕上文字的顯示;有一個(gè)imageView專門負(fù)責(zé)按鈕上圖片的顯示
        //=========UIView的屬性和方法=========
        //1.創(chuàng)建UIButton對(duì)象
        let titleBtn = UIButton.init(frame: CGRectMake(100, 100, 100, 50))
        //2.添加到界面上
        self.view.addSubview(titleBtn)
        //3.設(shè)置背景顏色
        titleBtn.backgroundColor = UIColor.redColor()
        
        //========UIButton專有的屬性和方法========
        //1.設(shè)置按鈕上顯示的文字
        //參數(shù)1:想要在按鈕上顯示的文字
        //參數(shù)2:狀態(tài)
        //Normal -> 正常狀態(tài)(按鈕正常顯示,沒有被點(diǎn)擊或者按下的時(shí)候)
        //Highligthed -> 高亮(按鈕被按下,沒有彈起來的時(shí)候的狀態(tài))
        //Selected -> 選中狀態(tài)
        //Disabled -> 不可用狀態(tài)(按鈕不能被點(diǎn)擊)
        titleBtn.setTitle("確定", forState: .Normal)
        titleBtn.setTitle("高亮", forState: .Highlighted)
        
        titleBtn.setTitle("選中", forState: .Selected)
        titleBtn.setTitle("不可用", forState: .Disabled)
        //2.設(shè)置當(dāng)前按鈕是否選中(默認(rèn)是false)
        titleBtn.selected = false
        //3.設(shè)置當(dāng)前按鈕是否可用(默認(rèn)是true)
        titleBtn.enabled = true
        
        //4.設(shè)置文字顏色
        titleBtn.setTitleColor(UIColor.yellowColor(), forState: .Normal)
        titleBtn.setTitleColor(UIColor.lightGrayColor(), forState: .Disabled)
        //注意:按鈕上的文字和文字顏色,必須通過對(duì)應(yīng)的set方法去根據(jù)狀態(tài)去設(shè)置.其他和文字相關(guān)的屬性可以通過拿到titleLabel去設(shè)置
        //5.設(shè)置按鈕上的文字字體
        titleBtn.titleLabel?.font = UIFont.systemFontOfSize(12)
        //6.設(shè)置按鈕上的文字的對(duì)齊方式
        //titleBtn.titleLabel?.textAlignment = .Left //--此方法錯(cuò)誤
        //MARK: 這是正確的方法
        titleBtn.contentHorizontalAlignment = .Left
        
        
        //KEY:===========7.給按鈕添加事件=============
        //參數(shù)1:調(diào)用方法的對(duì)象
        //參數(shù)2:指定事件發(fā)生后參數(shù)1要去調(diào)用的方法
        //參數(shù)3:事件
        titleBtn.addTarget(self, action: "btnAction:", forControlEvents: .TouchUpInside)
        
        
    
    }
    
    //MARK: - 按鈕點(diǎn)擊
    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.簡(jiǎn)單的UIButton應(yīng)用,定制一個(gè)圖片高度是整個(gè)按鈕高度的4/5;文字高度是整個(gè)按鈕高度的1/5的按鈕

新建一個(gè)類繼承UIButton,取名LGButton.

import UIKit

class LGButton: UIButton {
    //圖片高度是整個(gè)按鈕高度的4/5;文字高度是整個(gè)按鈕高度的1/5
    
    //功能:設(shè)置button上的imageView的坐標(biāo)和大小
    
    //參數(shù)1:當(dāng)前按鈕的范圍(只需要大小)
    //返回值:重新設(shè)置的圖片的坐標(biāo)和大小
    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)
    }
    
    
    
    //功能:設(shè)置button上的imageView的坐標(biāo)和大小
    
    //參數(shù)1:當(dāng)前按鈕的范圍(只需要大小)
    //返回值:重新設(shè)置的圖片的坐標(biāo)和大小
    
    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.創(chuàng)建按鈕對(duì)象
        let btn = LGButton(frame:CGRectMake(100,100,100,120))
        //2.設(shè)置文字和
        btn.setTitle("文字", forState: .Normal)
        btn.setTitleColor(UIColor.redColor(), forState: .Normal)
        btn.titleLabel?.textAlignment = .Center
        //3.設(shè)置圖片
        
        btn.setImage(UIImage.init(named: "luffy4"), forState: .Normal)
        //4.添加到界面上
        self.view.addSubview(btn)
        //5.添加按鈕點(diǎn)擊事件
        btn.addTarget(self, action: "btnAction", forControlEvents: .TouchUpInside)
        
    }

    
    func btnAction(){
        print("O(∩_∩)O哈哈哈~")
    }

總結(jié)

本次教程是UI階段使用最多的控件之一的UIimageView和UIbutton控件,需要反復(fù)的練習(xí)和掌握.這些基礎(chǔ)屬性也非常的簡(jiǎn)單.可以試著定制屬于自己的控件.