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吧 ;)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值