Swift借助CocoaPods库实现UI功能上的串串烧

不要重复发明轮子!不要重复发明轮子!不要重复发明轮子!

重要的话说3遍!不过给轮子换个胎还是可以搞起的 ;)

我们要实现一个iOS上的计数器功能,随便找一下CountdownLabel库就浮现出来,这个类自然继承于UILabel,不过添加了倒计时和很酷的动画效果:

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

我只是挑了4种稍带代表性的动画,不过CountdownLabel有一个小问题:就是只能倒计时而不能当秒表用(正计时)!

我们需要一个计时器既可以当秒表又可以做倒计时用。

So我们继续寻觅一下,找到一个符合要求的库MZTimerLabel。该库既可以倒计时又可以做秒表用,但是又有点美中不足:它没有动画显示啊!!!

难道美观和使用不能兼得吗?答案显然是NO!

我们注意到CountdownLabel之所以可以显示动画,是因为其中使用了另一个库LTMorphingLabel。那么我们能不能把它和MZTimerLabel库结合起来用呢?

Let’s Try!!!

打开IB,拖一个UILabel到界面中,然后修改其class为LTMorphingLabel,同时修改module名为LTMorphingLabel。

在ViewController中,创建一个outlet,名为stubTimerLbl,然后将其和界面对应元素绑定:

@IBOutlet weak var stubTimerLbl:LTMorphingLabel!

可以看到,我们创建了一个LTMorphingLabel类型的Label,接下来我们需要将它和MZTimerLabel绑定起来:

func setupMZTimerLable(){

        stubTimerLbl.textAlignment = .center
        stubTimerLbl.morphingEffect = .scale

        stubTimerLbl.snp.makeConstraints {make in
            make.left.equalTo(timerLabel)
            make.right.equalTo(timerLabel)
            make.centerX.equalTo(view)
            make.centerY.equalTo(timerLabel).offset(150)
            make.height.equalTo(100)
        }

        mztimerLbl = MZTimerLabel(label: stubTimerLbl, andTimerType: MZTimerLabelTypeStopWatch)
        mztimerLbl.setStopWatchTime(120)

        mztimerLbl.timeLabel.font = UIFont.systemFont(ofSize: 35, weight: .heavy)
        mztimerLbl.timeLabel.textColor = .purple
        mztimerLbl.timeFormat = "HH:mm:ss"

        let tap = UITapGestureRecognizer(target: self, action: #selector(self.tapHandler2(tap:)))
        stubTimerLbl.addGestureRecognizer(tap)
    }

是滴,我用了SnapKit来layout布局,你可以直接忽略;关键是我们把动画Label作为一个子视图包容在MZTimerLabel里:

mztimerLbl = MZTimerLabel(label: stubTimerLbl, andTimerType: MZTimerLabelTypeStopWatch)

我们来看一下实际效果:

这里写图片描述

好了,我们已经优雅的把几种库的功能串烧起来了,一起来个芭比Q吧 ;)

相关文章
相关标签/搜索