ios 使用 Swift 进行卡片视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28141021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do card view with Swift
提问by Pixel
How can i make a UITableViewlike the picture on the post ?
I want to replicate this Flat Effect, with spaces between the items.
我怎样才能让UITableView帖子上的图片点赞？
我想复制这个Flat Effect，项目之间有空格。
Result wanted :
想要的结果：
Wath i have :
我有：
回答by Omar Jacobo Mu?oz Veliz
You can use this cardview, tell me if it worked for you, it worked for me.
你可以使用这个卡片视图，告诉我它是否对你有用，对我有用。
https://github.com/aclissold/CardView/blob/master/README.md
https://github.com/aclissold/CardView/blob/master/README.md
//
// The MIT License (MIT)
//
// Copyright (c) 2014 Andrew Clissold
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import UIKit
@IBDesignable
class CardView: UIView {
@IBInspectable var cornerRadius: CGFloat = 2
@IBInspectable var shadowOffsetWidth: Int = 0
@IBInspectable var shadowOffsetHeight: Int = 3
@IBInspectable var shadowColor: UIColor? = UIColor.blackColor()
@IBInspectable var shadowOpacity: Float = 0.5
override func layoutSubviews() {
layer.cornerRadius = cornerRadius
let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
layer.masksToBounds = false
layer.shadowColor = shadowColor?.CGColor
layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight);
layer.shadowOpacity = shadowOpacity
layer.shadowPath = shadowPath.CGPath
}
}
回答by bjtitus
This looks better suited to a UICollectionView where you can set the insets of your collection view item. Alternatively, you can create a view inside of your table view cell's content view and set up constraints pinning the edges of the view a set distance from the table view's edges
这看起来更适合 UICollectionView，您可以在其中设置集合视图项的插图。或者，您可以在表格视图单元格的内容视图内创建一个视图，并设置约束将视图边缘固定在与表格视图边缘一定距离的位置
回答by Christian
You have to make a custom UITableViewCell. Then, you can add multiple UIViews to your custom cell and so you can reproduce a similar look. My attempt:
你必须制作一个自定义的 UITableViewCell。然后，您可以将多个 UIView 添加到您的自定义单元格，这样您就可以重现类似的外观。我的尝试：
The Code for my cell:
我的单元格的代码：
import UIKit
class MyCell: UITableViewCell {
@IBOutlet var nameLabel: UILabel!
@IBOutlet var startPreis: UILabel!
@IBOutlet var startPreisLabel: UILabel!
@IBOutlet var aktuellerPreis: UILabel!
@IBOutlet var aktuellLabel: UILabel!
@IBOutlet var meldenLabel: UILabel!
@IBOutlet var meldenPreisLabel: UILabel!
@IBOutlet var tagImage: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
}
override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
println("selected")
// Configure the view for the selected state
}
}
As you can see, there are different UIViews/UILabels in my CustomCell which I can access in my cellForRowAtIndexPath-method by just replacing the UITableViewCell with my Cell:
如您所见，我的 CustomCell 中有不同的 UIViews/UILabels，我可以通过将 UITableViewCell 替换为我的 Cell 来在我的 cellForRowAtIndexPath 方法中访问它们：
var cell:MyCell = tableView.dequeueReusableCellWithIdentifier(cellID) as MyCell
回答by Divyansh Jain
In the cell of the collection view, I've created another UIVIew and gave these properties.
在集合视图的单元格中，我创建了另一个 UIVIew 并提供了这些属性。
cardView.backgroundColor = .white
cardView.layer.cornerRadius = 10.0
cardView.layer.shadowColor = UIColor.gray.cgColor
cardView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
cardView.layer.shadowRadius = 6.0
cardView.layer.shadowOpacity = 0.7
The result that I have achieved is this -
我取得的结果是这样的——
