ios 使用Swift进行卡片查看

inkz8wg9  于 2022-12-30  发布在  iOS
关注(0)|答案(5)|浏览(296)

我怎样才能做一个像帖子上图片一样的UITableView
我想复制这个Flat Effect,项目之间留有空格。

所需结果:

我拥有的

70gysomp

70gysomp1#

你可以用这个卡片视图,告诉我它是否对你有效,对我有效。
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.black
@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
}

}

xmq68pz9

xmq68pz92#

在集合视图的单元格中,我创建了另一个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

我的成果是-

kupeojn6

kupeojn63#

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

f2uvfpb9

f2uvfpb94#

你必须创建一个自定义的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中有不同的UIView/UILabel,我可以在cellForRowAtIndexPath方法中访问它们,只需将UITableViewCell替换为Cell即可:

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

mepcadol5#

简单的UIView扩展调用此函数,如yourView.cardView()

extension UIView{
    func cardView() -> Void {
        self.layer.cornerRadius = 10
        self.layer.shadowColor = UIColor.gray.cgColor
        self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
        self.layer.shadowRadius = 4.0
        self.layer.shadowOpacity = 0.5
    }
}

相关问题