使用Autolayout在自定义UITableviewCell中的UILlabel上添加掩码

时间:2017-04-11 06:59:18

标签: ios iphone swift autolayout uilabel

我尝试做的是当UILabels文本太长时,添加渐变添加文本的结尾。我的自定义单元格包含2个标签和1个containerview

--------------------------------------------
| <LABEL1>  <LABEL2             > <UIVIEW> |
--------------------------------------------

Label1始终相同,UIView的宽度是可变的,因此Label2宽度也是可变的,但优先级较低。

我使用Snapkit添加约束,我的UITableviewCell类是这样的:

//Declarations of the UI components
var timeLabel: UILabel = UILabel()
var titleLabel: UILabel = UILabel()
var containerView: VerticalTVGuideIconContainerView = VerticalTVGuideIconContainerView()


required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)

    self.setup()
}

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    self.setup()
}

     func setup() {
            self.titleLabel.translatesAutoresizingMaskIntoConstraints = false
            self.containerView.translatesAutoresizingMaskIntoConstraints = false
            self.timeLabel.translatesAutoresizingMaskIntoConstraints = false

            contentView.addSubview(timeLabel)
            contentView.addSubview(titleLabel)
            contentView.addSubview(containerView)

            timeLabel.snp.makeConstraints { make in
                make.width.equalTo(VerticalTVGuideTimeBlockEventCell.timeLabelWidth)
                make.left.equalToSuperview().offset(8)
                make.top.equalToSuperview()
                make.bottom.equalToSuperview()
                make.centerY.equalToSuperview()
            }
            containerView.snp.makeConstraints { make in
                make.right.equalTo(-5)
                make.width.equalTo(0)
                make.height.equalTo(22)
                make.centerY.equalToSuperview()
            }
            titleLabel.snp.makeConstraints { make in
                make.left.equalTo(timeLabel.snp.right).offset(5)
                make.right.equalTo(containerView.snp.left).offset(0)
                make.top.equalToSuperview()
                make.bottom.equalToSuperview()
                make.centerY.equalToSuperview()
            }

            self.needsUpdateConstraints()
        }

然后我使用一些RXSwift绑定来自我的VM的属性,并有一个私有函数来检查我的标签是否应该在末尾添加渐变

private func connectViewModel(_ viewModel: VerticalTVGuideTimeBlockEventViewModel?) {
    guard let viewModel = viewModel else {
        return
    }

    styleViews(theme: viewModel.theme)

    viewModel.startTimeHHmmString.subscribe { [weak timeLabel] startTimeString in
        timeLabel?.text = startTimeString
    }?.disposable.addDisposableTo(viewModel.disposeBag)

    viewModel.title.subscribe { [weak titleLabel] title in
        titleLabel?.text = title
        }?.disposable.addDisposableTo(viewModel.disposeBag)

    viewModel.checkTruncated.subscribe { [weak titleLabel] _, _ in
        self.setNeedsUpdateConstraints()
        self.checkTruncated(for: titleLabel)
    }?.disposable.addDisposableTo(viewModel.disposeBag)

    viewModel.fakeIcons.subscribe { [weak containerView] icons in
        if icons.count > 0 {
            let images = icons.map { icon in
                return icon.image
            }
            let containerWidth = (images.count * 22) + ((images.count - 1) * 4)
            containerView?.showIcons(images: images)

            containerView?.snp.updateConstraints { make in
                make.width.equalTo(containerWidth)
            }
        }
    }?.disposable.addDisposableTo(viewModel.disposeBag)
}

private func checkTruncated(for label: UILabel?) {
    guard let label = label, let viewModel = viewModel else {
        return
    }

    if label.isTruncated() {
        label.addFadeOut(theme: viewModel.theme)
    }
}

结束我的addFadeOut方法:

func addFadeOut(theme:Theme){     self.lineBreakMode = .byClipping

let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [theme.darkJungleGreenColor().cgColor, theme.darkJungleGreenColor().withAlphaComponent(0.0).cgColor]
gradient.rasterizationScale = self.contentScaleFactor
gradient.shouldRasterize = true

//Get Height and width
let width = self.frame.size.width
let height = self.frame.size.height

//Calculate the start points and end points
let startPointX = width.subtracting(40).divided(by: width)
let startPointY = height.divided(by: 2).divided(by: height)
let endPointX = width.subtracting(10).divided(by: width)
let endPointY = height.divided(by: 2).divided(by: height)

gradient.startPoint = CGPoint(x: startPointX, y: startPointY)
gradient.endPoint = CGPoint(x: endPointX, y: endPointY)
self.layer.mask = gradient


log.debug("LABEL WIDTH = \(self.frame.size.width)")

}

问题

就像我说我的UIView有一个可变宽度,因此应该导致Label2的宽度不同。但是当我用AddFadeOut方法检查我的LOG语句时,我发现它们都是一样的。所以现在我的问题是,我的Label2何时有他的最终宽度,我什么时候需要检查我的标签是否需要添加他的渐变。

0 个答案:

没有答案