iOS 仿支付寶銀行卡界面(支持Swift/OC)

一：簡介

在有支付相關的APP中，都有對應的錢包，雖然如今的支付寶，微信支付很流行，可是都是須要綁定本身的銀行卡，那麼這個銀行卡的卡包頁面該怎麼實現呢？在網上找了許久也沒有找到合適的，那就索性本身造輪子。

爲了實現相應的功能，仿照支付寶的銀行卡卡包開發出相應的頁面，頁面長這個樣子：

下面詳細說明頁面是如何實現的，功能簡單實用，若有需求請繼續閱讀，如不須要勿噴請飄過。

二：說明目錄

1. 建立錢包視圖容器WalletView

2. 初始化WalletView並加載錢包頭部視圖walletHeader

3. 在錢包視圖中從新加載卡片視圖

4. 在錢包視圖中實現添加卡片方法

5. 在錢包視圖中實現卡片展現和隱藏回調方法

6. 建立卡片視圖ColoredCardView繼承於CardView

7. 在CardView中實現點擊手勢展現隱藏卡片

8. 導入項目使用介紹

三：具體實現

1. 建立錢包視圖容器WalletView

建立繼承UIView的WalletView視圖， 經過調用contentInset方法來控制top、left、bottom、right四個方向的邊距，代碼以下：

public var contentInset: UIEdgeInsets {
        set {
            scrollView.contentInset = newValue
            calculateLayoutValues()
        }
        get {
            return scrollView.contentInset
        }
    }
複製代碼

建立walletHeader方法，用來加載錢包的頭部視圖，代碼以下：

@IBOutlet public weak var walletHeader: UIView? {
        willSet {
            if let walletHeader = newValue {
                scrollView.addSubview(walletHeader)
            }
        }
        didSet {
            oldValue?.removeFromSuperview()
            calculateLayoutValues()
        }
    }
複製代碼

2. 初始化WalletView並加載錢包頭部視圖walletHeader

在須要加載錢包的地方初始化WalletView，並自定義頭部視圖walletHeader和卡片視圖，Demo 中以ViewController頁面爲例，代碼以下：

walletView = WalletView(frame: CGRect(x: 10, y: 0, width: screenw - 20, height: screenh - 20))
self.view.addSubview(walletView)
walletView.walletHeader = walletHeaderView
walletView.useHeaderDistanceForStackedCards = true
walletView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)  
複製代碼

3. 在錢包視圖中從新加載卡片視圖

在錢包視圖中從新加載卡片視圖，在這裏爲了靈活修改方便使用，頁面佈局能夠自定義，Demo中模仿支付寶頁面進行設計，在CardView視圖中，主要實現頁面的交互等功能，具體的UI實如今ColoredCardView中實現並繼承於CardView，下面會詳細說明，從新加載卡片視圖方法源碼以下：

open func reload(cardViews: [CardView]) {
        
        insert(cardViews: cardViews)
        calculateLayoutValues()   
}
func insert(cardViews: [CardView]) {
        
        self.insertedCardViews = cardViews
        
        if insertedCardViews.count == 1 {
            presentedCardView = insertedCardViews.first
        }
}
public var insertedCardViews = [CardView]()    {
        didSet {
            calculateLayoutValues(shouldLayoutWalletView: false)
        }
}
複製代碼

在ViewController中調用reload方法代碼以下：

walletView.reload(cardViews: coloredCardViews)
複製代碼

4. 在錢包視圖中實現添加卡片方法

在展現頁面中咱們能夠看到，在頁面的左上角有一個添加按鈕，這個按鈕的UI佈局在頭部視圖中實現，具體的功能是，添加一個卡片，具體的實現方法以下：

open func insert(cardView: CardView, animated: Bool = false, presented: Bool = false, completion: InsertionCompletion? = nil) {
        
        presentedCardView = presented ? cardView : self.presentedCardView
        
        if animated {
            
            let y = scrollView.convert(CGPoint(x: 0, y: frame.maxY), from: self).y
            cardView.frame = CGRect(x: 0, y: y, width: frame.width, height: cardViewHeight)
            cardView.layoutIfNeeded()
            scrollView.insertSubview(cardView, at: 0)
            
            UIView.animateKeyframes(withDuration: WalletView.insertionAnimationSpeed, delay: 0, options: [.beginFromCurrentState, .calculationModeCubic], animations: { [weak self] in
                
                UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0, animations: {
                    self?.insert(cardViews: [cardView] + (self?.insertedCardViews ?? []))
                    self?.layoutWalletView(placeVisibleCardViews: false)
                })
                
                }, completion: { [weak self] (_) in
                    
                    self?.reload(cardViews: self?.insertedCardViews ?? [])
                    completion?()
                    
            })
            
            
        } else {
            reload(cardViews: [cardView] + insertedCardViews)
            placeVisibleCardViews()
            completion?()
        }
}
複製代碼

在ViewController中按鈕的觸發事件addCardButtonClick方法中調用insert方法代碼以下：

@objc func addCardButtonClick(addCardButton:UIButton) {
        walletView.insert(cardView: ColoredCardView(), animated: true, presented: true)
    }
複製代碼

5. 在錢包視圖中實現卡片展現和隱藏回調方法

在錢包視圖中實現卡片展現和隱藏回調方法，在展現狀態下，須要隱藏掉添加卡片按鈕，禁止繼續添加卡片，而且顯示卡片詳細設置內容和刪除按鈕。在隱藏狀態下，須要恢復添加卡片按鈕，而且隱藏卡片詳細設置內容和刪除按鈕，核心源碼以下：

public var didPresentCardViewBlock: PresentedCardViewDidUpdateBlock?

public var presentedCardView: CardView? {
        
        didSet {
            oldValue?.presented = false
            presentedCardView?.presented = true
            didPresentCardViewBlock?(presentedCardView)
        }
 }
複製代碼

在ViewController中實現回調功能，代碼以下：

walletView.didPresentCardViewBlock = { [weak self] (_) in
            self?.showAddCardViewButtonIfNeeded()
}
複製代碼

6. 建立卡片視圖ColoredCardView繼承於CardView

建立卡片視圖ColoredCardView繼承於CardView，這個視圖主要實現UI界面以及加載內容，定義界面屬性代碼以下：

class ColoredCardView: CardView, UITableViewDataSource, UITableViewDelegate {
    // 銀行logo
    @objc var cardLogo: UIImageView!
    // 開戶行名稱
    @objc var cardName: UILabel!
    // 卡片類型
    @objc var cardAddress: UILabel!
    // 銀行卡號
    @objc var cardNumber: UILabel!
    // 設置列表
    @objc var cardTableView: UITableView!
    // 卡片視圖
    @objc var bankCardView: UIView!
    // 刪除按鈕
    @objc var removeCardViewButton: UIButton!
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubViews()
    }
}
複製代碼

7. 在CardView中實現點擊手勢展現隱藏卡片

在Demo中實如今CardView中點擊除了刪除按鈕外任何位置，均可以觸發隱藏卡片的功能，這裏是在CardView中添加了手勢來實現該功能，代碼以下：

public let tapGestureRecognizer    = UITapGestureRecognizer()
    public let panGestureRecognizer    = UIPanGestureRecognizer()
    public let longGestureRecognizer   = UILongPressGestureRecognizer()
    
    // MARK: Private methods
    
    func setupGestures() {
        
        tapGestureRecognizer.addTarget(self, action: #selector(CardView.tapped))
        tapGestureRecognizer.delegate = self
        addGestureRecognizer(tapGestureRecognizer)
        
        panGestureRecognizer.addTarget(self, action: #selector(CardView.panned(gestureRecognizer:)))
        panGestureRecognizer.delegate = self
        addGestureRecognizer(panGestureRecognizer)
        
        longGestureRecognizer.addTarget(self, action: #selector(CardView.longPressed(gestureRecognizer:)))
        longGestureRecognizer.delegate = self
        addGestureRecognizer(longGestureRecognizer)  
    }
複製代碼

8. 導入項目使用介紹

最後介紹一下該如何在項目中導入該功能，下載Demo，將Demo中的FBYBankCard.framework文件和ColoredCardView.swift文件導入項目中，在須要加載的頁面中直接引用便可：

import FBYBankCard
class ViewController: UIViewController {
    @objc var walletView: WalletView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}
複製代碼

四：獲取Demo源碼方法

若是須要demo源碼請進羣領取，添加微信：【FBY-fan】拉你進羣。

---

歡迎關注公衆號【網羅開發】，網羅天下方法，方便你我開發，全部文檔會持續更新，歡迎關注一塊兒學習進步