IOS imitation alipay bank card interface (support Swift/OC)

A:

There are corresponding wallets in payment related apps. Although Alipay and wechat Payment are very popular now, they all need to bind their bank cards. Then how to achieve the card package page of bank cards? After searching the Internet for a long time and finding nothing suitable, they simply build their own wheels.

In order to realize the corresponding functions, the corresponding page is developed after alipay’s bank card package. The page length looks like this:

The following detailed description of the page is how to achieve, simple and practical functions, if you need to continue to read, if you do not need to spray please float.

Two: Description of the catalog

Create the WalletView container WalletView
Initialize the WalletView and load the walletHeader view walletHeader
Reload the card view in the wallet view
Implement the add card method in the wallet view
Implement card show and hide callback methods in wallet view
Create the CardView ColoredCardView inherits from CardView
Implement a click gesture in CardView to display hidden cards
Import project usage introduction

Three: concrete implementation

1. Create the WalletView container WalletView

Create a WalletView view that inherits UIView, and call contentInset to control the top, left, bottom, and right margins.

public var contentInset: UIEdgeInsets {
        set {
            scrollView.contentInset = newValue
            calculateLayoutValues()
        }
        get {
            return scrollView.contentInset
        }
    }Copy the code

Create the walletHeader method to load the walletHeader view as follows:

@IBOutlet public weak var walletHeader: UIView? {
        willSet {
            if letwalletHeader = newValue { scrollView.addSubview(walletHeader) } } didSet { oldValue? .removeFromSuperview() calculateLayoutValues() } }Copy the code

2. Initialize WalletView and load the walletHeader view walletHeader

Initialize the WalletView where the wallet needs to be loaded, and customize the head view walletHeader and card view. In the Demo, the ViewController page is used as an example, and the code is as follows:

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)  Copy the code

3. Reload the card view in the Wallet view

Reload the CardView in the wallet view. The page layout can be customized for flexible modification and convenient use. In the Demo, alipay page is designed to imitate, and in the CardView view, page interaction and other functions are realized. The UI implementation is implemented in ColoredCardView and inherits from CardView, as detailed below. The source code for the reload CardView method is as follows:

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)}}Copy the code

The code for calling the reload method in ViewController is as follows:

walletView.reload(cardViews: coloredCardViews)Copy the code

4. Implement the add card method in wallet view

In the display page, we can see that there is an Add button in the upper left corner of the page. The UI layout of this button is implemented in the header view. The specific function is to add a card.

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] inUiview. addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0, animations: {self? .insert(cardViews: [cardView] + (self? .insertedCardViews ?? [])) self? .layoutWalletView(placeVisibleCardViews:false)
                })
                
                }, completion: { [weak self] (_) inself? .reload(cardViews: self? .insertedCardViews ?? []) completion? ()})}else{ reload(cardViews: [cardView] + insertedCardViews) placeVisibleCardViews() completion? ()}}Copy the code

Call the insert method in the addCardButtonClick method on the button trigger event in the ViewController as follows:

@objc func addCardButtonClick(addCardButton:UIButton) {
        walletView.insert(cardView: ColoredCardView(), animated: true, presented: true)}Copy the code

5. Implement card show and hide callback methods in wallet view

Implement the card show and hide callback method in the wallet view. In the show state, hide the add card button, prohibit further adding cards, and display the card details and delete button. In the hidden state, you need to restore the add card button, and hide the card detailed Settings and delete button, the core source code is as follows:

public var didPresentCardViewBlock: PresentedCardViewDidUpdateBlock? public var presentedCardView: CardView? { didSet { oldValue? .presented =falsepresentedCardView? .presented =truedidPresentCardViewBlock? (presentedCardView) } }Copy the code

Implement the callback function in ViewController as follows:

walletView.didPresentCardViewBlock = { [weak self] (_) inself? .showAddCardViewButtonIfNeeded() }Copy the code

6. Create a CardView ColoredCardView inherits from CardView

ColoredCardView inherits CardView. This view mainly implements UI interface and loads content. The code for defining interface attributes is as follows:

Class ColoredCardView: CardView, UITableViewDataSource, UITableViewDelegate {// bank 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() } }Copy the code

7. Implement click gesture in CardView to display hidden cards

In the Demo, clicking anywhere in the CardView except the delete button can trigger the function of hiding the card. Here is a gesture added to the CardView to achieve this function. The code is as follows:

    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)  
    }Copy the code

8. Import project introduction

Download the Demo, import the fbyBankcard. framework file and coloredcardView. swift file into the project, and directly reference them in the page that needs to be loaded:

import FBYBankCard
class ViewController: UIViewController {
    @objc var walletView: WalletView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}Copy the code

Four: access to Demo source code

If you need interview materials, please get them in the group and add wechat: [W1661408343] to pull you into the group.

Features:
The original address