使用Swift进行卡片查看

我怎样才能像post上的图片一样制作UITableView ？
我想复制这个Flat Effect ，项目之间有空格。

想要的结果：

我有：

Answer 1

您可以使用此cardview，告诉我它是否适合您，它对我有用。

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 } } 

Answer 2

你必须制作一个自定义的UITableViewCell。 然后，您可以将多个UIView添加到自定义单元格中，这样您就可以重现类似的外观。 我的尝试：

我的手机代码：

 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 } } 

正如您所看到的，我的CustomCell中有不同的UIViews / UILabel，我可以在我的cellForRowAtIndexPath方法中访问，只需用我的Cell替换UITableViewCell：

 var cell:MyCell = tableView.dequeueReusableCellWithIdentifier(cellID) as MyCell 

Answer 3

这看起来更适合于UICollectionView，您可以在其中设置集合视图项的插入。 或者，您可以在表格视图单元格的内容视图中创建一个视图，并设置约束视图边缘与表格视图边缘的设定距离