iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
1
Mobile Development

iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 系列 第 25

[Day 24] Swift UIImage繼承實現ControllerView 圖片漸變效果

簡要

上一篇完成了CABasicAnimation動畫
現在要添加進去我們的controller
一起來完成搜尋頁面吧
GOGOGO

基本設置

圖片 cell

新增一個Cell
裡面架構為
Label+遮罩View+ImageView

https://ithelp.ithome.com.tw/upload/images/20191009/201122714wVqYdLp1U.png

CABasicAnimation UIImageView

UIImageView這邊我新增一個class
因為要把動畫加在裡面
多寫一個func
然後給cell裡面image做繼承
這樣就可以使用func

import UIKit
class ImageSliderView: UIImageView {
    func setImage(_ nextImage:UIImage, animated: Bool) {
        if animated {
            let basicAnimation = CABasicAnimation(keyPath: "contents")
            basicAnimation.fromValue = image?.cgImage
            basicAnimation.toValue = nextImage.cgImage
            basicAnimation.duration = 1.5
            layer.contents = image?.cgImage
            layer.add(basicAnimation, forKey: nil)
        }
        image = nextImage
    }
}

https://ithelp.ithome.com.tw/upload/images/20191009/20112271fd30Zfng0F.png

搜尋頁面 基本設置

這邊搜尋頁面要添加一個collectionView
並且把scrollDirection設置vertical
讓他上下滑動

override func initIMUI() {
    super.initIMUI()
    self.view.backgroundColor = UIColor.white
    self.view.addSubview(self.collectionView)
}
//懶加載
lazy var collectionView: UICollectionView = {
    let layout = UICollectionViewFlowLayout()
    layout.scrollDirection = .vertical
    let collectionView = UICollectionView(frame: CGRect(x: 10, y: kSafeTopPadding + kNavBarHeight, width: KScreenWidth - 10 * 2  , height: KScreenHeight-kNavBarHeight-kTabBarHeight-kSafeTopPadding),collectionViewLayout: layout)
    collectionView.backgroundColor = UIColor.white
    collectionView.register(UINib(nibName:"SearchCell", bundle:nil),
                           forCellWithReuseIdentifier:"SearchCell")

    collectionView.delegate = self
    collectionView.dataSource = self

    return collectionView
}()

collectionView

cell高度部分給他100
cellcell的間距設置5.0
照片設置部分
利用到random (0~7數字隨機)

Int.random(in: 0...7)
// MARK: - CollectionView

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 5.0
}

func collectionView(_ collectionView: UICollectionView, layout
    collectionViewLayout: UICollectionViewLayout,
                    minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 5.0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    var cellSize = CGSize()
    cellSize.width = (KScreenWidth - 10 * 2) / 2 - 2.5
    cellSize.height = (KScreenWidth - 10 * 2) / 2 - 5
    return cellSize
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 8
}

func numberOfSectionsInCollectionView( collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell:SearchCell = collectionView.dequeueReusableCell(withReuseIdentifier: "SearchCell", for: indexPath)
        as! SearchCell
    let number = Int.random(in: 0...7)
    cell.iconImage.setImage(UIImage.init(named: "food" + String(number))!, animated: true)
    return cell
}

Timer

這邊還要設置Timer
來更新圖片
利用到剛剛的圖片繼承func
先宣告Timer

var timer = Timer()

想說在一進View的時候就開始執行
所以寫在viewDidAppear

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    timer = Timer.scheduledTimer(timeInterval: 4,target:self,selector:#selector(timeChanged),userInfo:nil,repeats:true)
    RunLoop.current.add(timer, forMode: RunLoop.Mode.common)
}

time 事件也讓他random更新
隨機的IndexPath item
讓他圖片更換

/**
 * time 事件
 */
@objc func timeChanged(){
    let number = Int.random(in: 0...7)
    let indexPath = IndexPath(item: number, section: 0)
    collectionView.reloadItems(at: [indexPath])
}

這樣就可以呼應到cellForItemAt

cell.iconImage.setImage(UIImage.init(named: "food" + String(number))!, animated: true)

來看看最終效果

Demo


上一篇
[Day 23] Swift UIImageView 淡入淡出 切換圖片效果 幻燈片 (二) - CABasicAnimation 動畫
下一篇
[Day 25] Swift UIImageView 淡入淡出 切換圖片效果 幻燈片 (三)
系列文
iOS APP 使用Swift打造一個外送平台APP (以foodpanda、Uber Eats為例) 31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言