UIButton更换图片或者文字闪动的解决

UIButton更换图片或者文字闪动的解决

在我们做开发的时候,或多或少的会使用UIButton,且可能会较频繁的更换图片或者文字
简单的举几个例子,
1.在我们写登录或者注册等页面的时候,可能会需要些一个倒计时的按钮,不断的更新时间,
2.在某一个tableview或者collectionView中,某些cell中会有按钮控件
3.我们写某些支付界面,可能选择某一个金额的时候,对应下面的支付按钮就会更换文字,比如支付XXX元…
…
所以,对于这些小需求的实现,我们其实会有很多的实现方式,
无论是使用UIButton,或者是UILabel,… 亦或者是使用自定义的继承UIView,或者UIControl等控件,其实都可以很轻松的完成

在这里我们只说使用UIButton的情况
那么细心的同学是否会发现,在我们使用UIButton的时候,我们会发现更换图片或者文字的时候图片或者文字会发生闪动的情况?
类似这样的

这种情况很容易复现,
1.UIButton的样式是system样式(不是custom)
2.已经有文字或者图片的情况下更换文字或者图片

比如我们的写一个倒计时按钮,无非就是使用一个按钮,然后不停的间隔1秒钟更换button的文字即可.
这里我们如果使用UIButton的话我们需要有取舍,
1.使用system的样式的话,在我们点击的情况下会有点击的变灰的效果,会让我们有一个按下的反馈的感觉,而使用custom则不会有这样的情况,你按下不会有什么反应,除非你定义按下的效果,这样的话代码相对会很多.且不容易达到system样式的按下效果.
2.使用system样式的我们却会纠结于每秒更换一次文字的时候按钮的闪动效果,
这是我们特别不想看到的.使用custom则没有闪动的效果,

所以,我们能否很简单简单的结合呢?
既有按钮点击的按下变暗的反馈效果,也有更换文字不闪动的效果.且使用最小的代码量?

三个方案
1.使用system样式,解决闪动
2.使用custom样式,解决按下反馈效果
3.使用自定义控件替代

这里简单的构思一下,使用自定义控件替代的话,等于完全抛弃UIButton,这样我们既要实现按钮的效果,也要实现按钮的点击….复杂难度最高
使用custom样式的话,跟上面说的一样,按钮的点击效果,我们通过nomal,select等状态来修改不同的样式,我们可能会需要写很多冗余的代码,只是为了实现点击的效果,而且还没有system的自然
所以最终,我还是选择system的样式,我们仅仅需要让他不闪动就好了

达到不闪动的效果其实类似这样

其实代码很简单
仅仅需要一行即可

self.button.titleLabel.text = string;

是的,仅仅需要一行即可
但是并不是在任何地方添加都可以
该行代码仅仅能添加在一个位置才有效果

self.button.titleLabel.text = string;
[self.button setTitle:string forState:UIControlStateNormal];

是的就是这样,在我们通常设置按钮文字的方法上加上这一行即可,必须要在其前一行,

同样的,如果我们的按钮上面有图片,图片也发生闪动的话,原理也是一样,防止闪动,只需要

self.button.imageView.image = image;
[self.button setImage:image forState:UIControlStateNormal];

基础这两行代码不能分开写,如果分开比如这样写

self.button.titleLabel.text = string;
self.button.imageView.image = image;

[self.button setTitle:string forState:UIControlStateNormal];
[self.button setImage:image forState:UIControlStateNormal];

就不会有效果!!!!

必须要连载一起写,且写在各自的设置的前面

//防止文字闪动
self.button.titleLabel.text = string;
[self.button setTitle:string forState:UIControlStateNormal];
//防止图片闪动
self.button.imageView.image = image;
[self.button setImage:image forState:UIControlStateNormal];

是的就是这么简单,就能处理闪动的效果

你可能会不屑一顾,感觉这个没有什么有用的效果.

下面是我最近的一个项目,
首页是一个collectionView 内部的cell因为某些原因就是一个按钮(这里不解释).,然后我就会在刷新collectionView的时候发生闪动的情况,

这里某些经历过collectionView的reloadData的坑的开发者都会说,这是因为刷新造成的,只要使用隐式动画刷新即可

[UIView performWithoutAnimation:^{
    [self.collectionView reloadData];
}];

刚开始我也这么认为,也这么做了,但是结果是我失望了,刷新的时候仍然有闪动,
而当我将上面的cell用原来的button的部分更换成imageView和lable的组合的时候则不会闪动了,
所以闪动的情况就是因为按钮造成的,
我们不能因为按钮闪动而放弃按钮,或者这里可能适合,但是某些地方我们仍然可能需要按钮的使用,所以

只需要巧妙的添加两行代码即可,也就是上面介绍的防止闪动的代码

瞬间,一切都好了

在这里我也就把这个小技巧分享给大家,或许你没有遇到过这样的问题,但是当你遇到的时候,如果你知道简单的两行即可解决,不是更好吗?