Swift版CardView实现

Cards是MaterialDesign的一个数据集展示设计方案，也是现在很多Android应用所使用的列表展示方案。

今天介绍一个Swift版IOS的CardView实现库，轻松实现响应迅速、支持滑动动画和点击动画的Cards

先上地址：https://github.com/icaksama/CardViewList

Cocoapods集成方式：

pod 'CardViewList'

集成完成后在项目中导入：

import CardViewList

初次导入时XCode可能会报错找不到模块，Build一下即可消除错误

使用方法：

1.新建一个CardViewController作为子视图控制器，在CardViewController中设置每个Card的内容并为Cards添加手势识别器

import UIKit

class CardViewController: UIViewController {
    // MARK: - 懒加载需要的View
    var image: UIImageView = {
        let image = UIImageView()
        image.frame = CGRect.init(x: 10, y: 10, width: 100, height: 100)
        image.image = UIImage.init(named: "1")
        return image
    }()
    var label : UILabel = {
        let label = UILabel.init(frame: CGRect(x: 120, y: 10, width: 100, height: 40))
        label.text = "Label"
        label.textAlignment = .center
        return label
    }()
    // MARK: - 系统回调函数
    override func viewDidLoad() {
        super.viewDidLoad()
        //将Views添加到主视图
        view.addSubview(label)
        view.addSubview(image)
        //设置主视图（Card）背景色和Size
        view.backgroundColor = .white
        view.frame = CGRect(origin: .zero, size: CGSize(width: UIScreen.main.bounds.width, height: 140.0))
        //为Card添加单击手势识别器
        addTapGesture()
        
        // Do any additional setup after loading the view.
        //setData()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
//MARK: - 扩展CardViewController
extension CardViewController {
    //设置Card内容和Tag的方法
    public func setData(image: String = "1" , text: String = "Card 0", tagID: Int = 0){
        self.image.image = UIImage.init(named: "\(image)")
        self.label.text = "\(text)"
        self.view.tag = tagID
        //print("initDone + \(label.text)")
    }
    //添加手势识别器
    private func addTapGesture(){
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(clickView))
        self.view.addGestureRecognizer(tapGesture)
    }
    //单击手势事件
    @objc private func clickView(sender : UITapGestureRecognizer){
        print(self.view.tag)
    }
}

2.在ViewController中实现CardViewListDelegete协议，选择需要的方法实现

// Response when CardView will Display.
func cardView(willDisplay scrollView: UIScrollView, identifierCards identifier: String) {}

// Response when every single of CardView from UIView will attach.
func cardView(_ scrollView: UIScrollView, willAttachCardView cardView: UIView, identifierCards identifier: String, index: Int) {}

// Response when every single of CardView from UIViewController will attach.
func cardView(_ scrollView: UIScrollView, willAttachCardViewController cardViewController: UIViewController, identifierCards identifier: String, index: Int) {}

// Response when CardView from UIView did finish attached.
func cardView(_ scrollView: UIScrollView, didFinishDisplayCardViews cardViews: [UIView], identifierCards identifier: String) {}

// Response when CardView from UIViewController did finish attached.
func cardView(_ scrollView: UIScrollView, didFinishDisplayCardViewControllers cardViewsController: [UIViewController], identifierCards identifier: String) {}

// Response when CardView is selected.
func cardView(_ scrollView: UIScrollView, didSelectCardView cardView: UIView, identifierCards identifier: String, index: Int) {}

3.实例化一个CardViewList，为其设置Delegete

fileprivate var cardViewList:CardViewList = CardViewList()
cardViewList.delegete = self

4.实例化一个CardViewController的集合，并调用setData方法设置CardView的内容和Tag

  var cardViewControllers = [UIViewController]()

for i in 1...25 {
   cardViewController = CardViewController()
   cardViewController.setData(image: "1", text: "Card\(i)", tagID: i)
   print("forinViewTag + \(cardViewController.view.tag)")
   cardViewControllers.append(cardViewController)
}

5.设置CardViewList的属性

        /** Set disable/enable shadow of CardView. Default is true */
        cardViewList.isShadowEnable = true

        /** Set disable/enable click of CardView. Default is false */
        cardViewList.isClickable = false

        /** Set multiple touch of CardView. Default is false */
        cardViewList.isMultipleTouch = true

        /** Set corner radius of card view in pixel. Default is 12.0 */
        cardViewList.cornerRadius = 5.0

        /** Set shadow size of card view in pixel. Default is 5.0 */
        cardViewList.shadowSize = 5.0

        /** Set shadow opacity of card view in 0 - 1. Default is 0.9 */
        cardViewList.shadowOpacity = 0.5

        /** Set shadow color of card view. Default color is black */
        cardViewList.shadowColor = UIColor.black

        /** Set CardView margin in percent(%) of containerView. Default is 5 */
        cardViewList.margin = 4

        /** Set margin between CardView in percent(%) of containerView. Default is 5 */
        cardViewList.marginCards = 4

        /** Set list type horizontal, vertical, horizontalVertical. Default is vertical */
        cardViewList.listType = .vertical

        /** Set grid List of CardView. Default is 1 */
        cardViewList.grid = 1

        /** Set size of CardView. Default is autoSize */
        cardViewList.cardSizeType = .autoSize

        /** Set max width of CardView in percent(%) of containerView. Default is 100 */
        cardViewList.maxWidth = 100

        /** Set max height of CardView in percent(%) of containerView. Default is 100 */
        cardViewList.maxHeight = 100

        /** Set animation when CardView showing. Default is none */
        cardViewList.animationScroll = .scaleBounce

        /** Set animation click for CardView. Default is none */
        cardViewList.clickAnimation = .none

6.将CardViewList添加到父视图

cardViewList.generateCardViewList(containerView: self.view, viewControllers: cardViewControllers, listType: .vertical, identifier: "CardWithUIViewController")

7.Run    Success~