测试已测试 | ✓ |
语言语言 | SwiftSwift |
许可 | 自定义 |
发布最后发布 | 2017年3月 |
SwiftSwift 版本 | 3.0 |
SPM支持 SPM | ✗ |
由 Michael Comella维护。
ScrollingCardView 是一个 iOS 的卡片视图小部件
在以下示例中,卡片视图的高度被限制为小于或等于屏幕大小。首先,内容不会填满屏幕,卡片视图也不会
随着内容的增长,卡片视图将扩展到屏幕大小,此时启用滚动,如下所示
卡片的角度半径、背景颜色和阴影是可定制的。
据我们所知,没有现有的库能满足我们描述的卡片视图要求。
我们可以重新利用现有的卡片视图库,并在其之上构建增长/滚动的功能,但这将难以扩展且容易出故障。
ScrollingCardView 最初是为在 Mozilla 的 Project Prox 项目中使用而创建的。
// 1. Create your view, enable autolayout, and add it to the view hierarchy.
let cardView = ScrollingCardView()
cardView.translatesAutoresizingMaskIntoConstraints = false
parentView.addSubview(cardView) // e.g. parent could be the ViewController's view
// 2. Constrain the card view as you would any other view.
NSLayoutConstraint.activate([
cardView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: 16),
cardView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
cardView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
// If you don't constrain the height, the card will grow to match its
// intrinsic content size.
// Or use lessThanOrEqualTo to allow your card view to grow only until a
// certain size, e.g. the size of the screen.
cardView.bottomAnchor.constraint(lessThanOrEqualTo: bottomLayoutGuide.topAnchor, constant: -16),
// Or you can constrain it to a particular height:
// cardView.bottomAnchor.constraint(equalTo: bottomLayoutGuide.topAnchor, constant: -16),
// cardView.heightAnchor.constraint(equalToConstant: 300),
])
// 3. Set your card view's content.
let content = UILabel()
content.text = "Hello world!"
content.numberOfLines = 0
cardView.contentView = content
内容可以是任何具有内在高度的视图,如果您提供了 heightAnchor
,则可以是任何视图。
您还可以自定义卡片视图的外观
cardView.backgroundColor = .white
cardView.cornerRadius = 2
cardView.layer.shadowOffset = CGSize(width: 0, height: 2)
cardView.layer.shadowRadius = 2
cardView.layer.shadowOpacity = 0.4
要查看实际效果,请运行示例项目!
ScrollingCardView 通过 CocoaPods 提供。将以下内容添加到您的 Podfile 中
pod "ScrollingCardView"
要运行示例项目
pushd Example/
pod install
popd
open Example/ScrollingCardView.xcworkspace
Xcode 将打开:从那里运行。
按照上面说明的方式打开示例项目。库文件可以在以下位置找到
Pods -> 开发Pods -> ScrollingCardView -> ScrollingCardView -> 类
如果您正在开发针对外部应用的项目,您可以从应用的podfile指定到您此库分支的相对路径
pod "ScrollingCardView", :path => "../ScrollingCardView"
在外部应用的目录中运行 pod install