iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

iOS Junior的菜雞之路系列 第 16

TinderCard Slide 研究 - 1

  • 分享至 

  • xImage
  •  

今天是想做一個明星配對的概念,使用者可以一天滑5位與你有緣分的明星
會是像Tinder那般簡單的操作

上網查閱了資料,發現有個套件可以使用
https://github.com/nickypatson/TinderSwipeView

這是個相對小型的套件,本著研究的精神,希望借鑑這個作者的動畫之光,來完成我的專案
因為有些樣式不是跟我想像中的畫面相同,所以我會小改這個程式(也許是大改)

SlideViewController

class SlideViewController: UIViewController {

    let inset : CGFloat = 10
    var bufferSize: Int = 3 {
        didSet {
            bufferSize = bufferSize > 3 ? 3 : bufferSize
        }
    }
    public var sepeatorDistance : CGFloat = 8
    var index = 0
    fileprivate var allCards = [String]()
    fileprivate var loadedCards = [TinderCard]()
    fileprivate var currentCard : TinderCard?
    fileprivate let contentView: ContentView? = nil
    public typealias ContentView = (_ index: Int, _ frame: CGRect, _ element:String) -> (UIView)

    var data: [String] = [
        "https://m.media-amazon.com/images/M/MV5BMjUxMjI4MDEwM15BMl5BanBnXkFtZTgwNzMyODM0MTE@._V1_.jpg",
        "https://m.media-amazon.com/images/M/MV5BOTE0NzM0Y2EtN2NiNC00NzkwLWExZjYtYmYxNTY5ZDg4NzhhXkEyXkFqcGdeQXVyNDg4MjkzNDk@._V1_.jpg",
        "https://m.media-amazon.com/images/M/MV5BMTg3Njc4ODQ0M15BMl5BanBnXkFtZTgwNTczMjk5NTE@._V1_.jpg"
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        showTinderCards(with: data)
    }

Function

public func showTinderCards(with elements: [String] ,isDummyShow: Bool = true) {

        if elements.isEmpty {
            return
        }

        allCards.append(contentsOf: elements)

        for (i,element) in elements.enumerated() {

            if loadedCards.count < bufferSize {
                let cardView = self.createTinderCard(index: i, element: element)
                loadedCards.append(cardView)
            }
        }

        animateCardAfterSwiping()

        // 這個先不使用,還沒研究成
        // if isDummyShow{
        //     perform(#selector(loadAnimation), with: nil, afterDelay: 1.0)
        // }
}


// 建立一個TinderCard
fileprivate func createTinderCard(index:Int,element: String) -> TinderCard {

        let cardView = TinderCard.initXib()
        cardView.backgroundColor = .gray
        if loadedCards.isEmpty {
            self.view.addSubview(cardView)
        } else {
            self.view.insertSubview(cardView, belowSubview: loadedCards.last!)
        }

        cardView.snp.makeConstraints { make in
            make.top.equalToSuperview().offset(80)
            make.left.equalToSuperview().offset(10)
            make.right.equalToSuperview().offset(-10)
            make.bottom.equalToSuperview().offset(-150)
        }

        cardView.delegate = self
        let url = URL(string: element)!
        cardView.addContentView(element: element)
        return cardView
    }


fileprivate func animateCardAfterSwiping() {

    if loadedCards.isEmpty{
        // 作者是使用三層結構,但我希望使用兩層,所以這個還會再修正
        // self.delegate?.endOfCardsReached()
            return
    }

    for (i,card) in loadedCards.enumerated() {
        UIView.animate(withDuration: 0.5, animations: {
            card.isUserInteractionEnabled = i == 0 ? true : false
            var frame = card.frame
            frame.origin.y = self.inset + (CGFloat(i) * self.sepeatorDistance)
            card.frame = frame
        })
    }
}


fileprivate func removeCardAndAddNewCard(){

    index += 1
    let card = loadedCards.first!
    card.index = index
    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()
}

// 目前還沒使用到
@objc private func enableUndoButton(timer: Timer){

    let card = timer.userInfo as! TinderCard
    if card.index == index{
        currentCard = card
    }
}

成果展示:


有動畫的就是看得特別不懂,目前還不算完成,就是一個雛形出來了


上一篇
我現在進來了,誒,我又出去了 難道你是方唐SheetDB
下一篇
TinderCard Slide 研究 - 2
系列文
iOS Junior的菜雞之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言