天天看點

swift學習筆記-UI篇之UIImageView

1.基本使用

将要使用的圖檔拖入到項目裡,我這裡使用的是名為“1.jpg”的圖檔,然後建立UIImageView,并設定要顯示的圖檔為”1.jpg”

//1. 基本使用
let imageView = UIImageView(frame: CGRectMake(, , , ))
imageView.image = UIImage(named:"1.jpg")
self.view.addSubview(imageView)
           

2.UIImageView的使用者互動

UIImageView的使用者互動預設是關閉的,也就是說添加到ImageView上的事件都不會響應,需要我們手動設定userInteractionEnabled屬性為真,我們給UIImageVIew添加一個點選手勢來測試一下,如果注釋掉第一行,點選就會失去反應

// 使用者互動
imageView.userInteractionEnabled = true
let tap = UITapGestureRecognizer(target: self, action: Selector("tapAction:"))
imageView.addGestureRecognizer(tap)

func tapAction(tap :UITapGestureRecognizer) {
    let scale :CGFloat = 
    var frame = tap.view!.frame
    frame = CGRectMake(frame.origin.x * scale, frame.origin.y * scale, frame.size.width * scale, frame.size.height * scale)
    tap.view!.frame = frame
}
           

3.圖檔拉伸

  1. 整張圖檔拉伸

    為了便于區分,我們給self.view一個紅色背景,imageView為綠色,同時改變imageView的高度為300。原圖尺寸為136 × 94

//) 圖檔整體拉伸
self.view.backgroundColor = UIColor.redColor()
imageView.backgroundColor = UIColor.greenColor()
var frame = imageView.frame
frame = CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, )
imageView.frame = frame
// 設定拉伸模式
/*
ScaleToFill: 填充模式,圖檔不會保持原來的比例
ScaleAspectFit: 圖檔保持原來的比例,寬度填充,高度自适應
ScaleAspectFill: 圖檔保持原來的比例,高度填充,寬度自适應
*/
imageView.contentMode = UIViewContentMode.ScaleAspectFit
           
swift學習筆記-UI篇之UIImageView

2. 部分拉伸

部分拉伸的原理:通過UIEdgeInsets設定拉伸區域,通過減去top、left、bottom、right的距離,得到的中間區域就是拉伸區域。通過平鋪拉伸區域或者拉伸拉伸區域來實作部分拉伸。具體計算請看resizableImageWithCapInsets:方法的探析

//) 部分拉伸
let imageView2 = UIImageView(frame: CGRectMake(, , , ))
//        imageView2.image = UIImage(named: "qipao.png")
imageView2.backgroundColor = UIColor.greenColor()
self.view.addSubview(imageView2)

// 設定拉伸
// stretch:通過拉伸來填充
imageView2.image = UIImage(named: "qipao.png")!.resizableImageWithCapInsets(UIEdgeInsetsMake(, , , ), resizingMode: UIImageResizingMode.Stretch)
// tile:通過重複來填充
//        imageView2.image = UIImage(named: "qipao.png")!.resizableImageWithCapInsets(UIEdgeInsetsMake(, , , ), resizingMode: UIImageResizingMode.Tile)
           

4.圖檔動畫

先把動畫素材導入到項目,建立數組讀取圖檔,再指派給imageView的animationImages屬性,分别設定好動畫時間和循環次數後開啟動畫

//4. 圖檔動畫
// 建立UIimage數組,數組每個元素為一幀
let animationImages = NSMutableArray()
for var i = ; i <= ; i++ {
    let image = UIImage(named: "v\(i).jpg")
    animationImages.addObject(image!)
}
let array = animationImages as Array as? [UIImage]
// 設定animationImages
imageView.animationImages = array
// 設定動畫時間
imageView.animationDuration = 
// 設定動畫循環次數,0為無限循環
imageView.animationRepeatCount = 
// 開啟動畫
imageView.startAnimating()
           

5.源碼下載下傳

https://github.com/ljcoder2015/SwiftStudyNote/tree/master/swift-UIImageView

參考文檔

UITapGestureRecognizer Class Reference

UIGestureRecognizer Tutorial: Getting Started

How can I cast an NSMutableArray to a Swift array of a specific type?

resizableImageWithCapInsets:方法的探析