iT邦幫忙

2022 iThome 鐵人賽

DAY 18
0
自我挑戰組

iOS Junior的菜雞之路系列 第 18

顯示你所愛的,以及愛你的

  • 分享至 

  • xImage
  •  

動畫看是短時間內還在Debug中
後來發現使用Xib建立,並使用Gesture可能也會有點問題@@
總而言之 先搞下一步

這次希望用上Tinder的配對頁面
但是API還沒搞好還有一些東西沒有配置完全...
所以先來簡單分享我認為這部分可以怎麼做,當然還有很多改進空間

SlideViewController

首先現在我的SlideViewController內部新增一個var叫matchIndex跟一個var是MatchView

var matchIndex = 1


// 建立一個lazy屬性的變數
// 需要的話再召喚這個參數就可以了
lazy var matchView: MatchView = {
    let matchView = MatchView.initXib()
    self.view.addSubview(matchView)
    matchView.snp.makeConstraints { make in 
        make.top.equalTo(self.view.snp.top)
        make.left.equalTo(self.view.snp.left)
        make.right.equalTo(self.view.snp.right)
        make.bottom.equalTo(self.view.snp.bottom)                             
    }
    matchView.ishidden = true
    return mathchView
}()

.
.
.
.

// 之前的程式碼內有寫到的Remove Function
 fileprivate func removeCardAndAddNewCard(){

        index += 1
        let card = loadedCards.first!
        card.index = index
     
        // 當我的Index等於matchIndex時,我想要出現我設定的MatchView
        // 當然如果可以這個由後端控制會是最好
        if index == matchIndex {
            matchView.configure(imageURL: data[index-1])
            matchView.isHidden = false
            // 因為MatchView只是暫時的,所以我讓他出現3秒後就自動消失
            DispatchQueue.main.asyncAfter(deadline: .now() + 3, execute: { [weak self] in
                guard let self = self else { return }
                self.matchView.isHidden = true
            })
        }
        Timer.scheduledTimer(timeInterval: 1.01, target: self, selector: #selector(enableUndoButton), userInfo: card, repeats: false)
        loadedCards.remove(at: 0)

       if (index + loadedCards.count) < allCards.count {
           let tinderCard = createTinderCard(index: index + loadedCards.count, element: allCards[index + loadedCards.count])
           self.view.insertSubview(tinderCard, belowSubview: loadedCards.last!)
           loadedCards.append(tinderCard)
       }

        animateCardAfterSwiping()
    }

MatchView

class MatchView: UIView {

    @IBOutlet weak var backgroundImageview: UIImageView!

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    static func initXib() ->  MatchView {
        let view = UINib(nibName: "MatchView", bundle: nil).instantiate(withOwner: nil, options: nil).first as! MatchView
        return view
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    // 之後這邊可以加一個按鈕,來跟對象對話
    func configure(imageURL: String) {
        let url = URL(string: imageURL)!
        backgroundImageview.kf.setImage(with: url)
    }
}

這邊是我的Xib文件,狠簡陋但我很愛

成果展示


上一篇
TinderCard Slide 研究 - 2
下一篇
空畫面的Handler
系列文
iOS Junior的菜雞之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言