#UIButton replace image or text flash solution

When we do development, we will use UIButton more or less, and we may change pictures or text frequently. To give a few simple examples, 1. When we write a login or registration page, we may need to have a countdown button, constantly update the time, 2. So in a tableView or in a collectionView, some of the cells will have a button control 3. We write some payment interface, may select a certain amount of time, corresponding to the following payment button will change the text, such as pay XXX yuan… . So, there are many ways to implement these small requirements, whether using UIButton, or UILabel… Or you can use custom inherited UIView, or UIControl controls, and you can do that very easily

Here we only talk about the situation of using UIButton. Will careful students find that when we use UIButton, we will find that the picture or text will flash when we change the picture or text? Something like this

UIButton style is System style (not custom) 2. Replace text or picture when text or picture already exists

For example, to write a countdown button, we simply use a button and change the text of the button every 1 second. So here we have to have a trade-off if we use UIButton, 1. Use the system style, in the case of our click will have the effect of the click gray, will let us have a feeling of feedback, and the use of custom will not have such a situation, you will not have any reaction, unless you define the effect of the press, so the code will be relatively a lot. 2. We who use the System style will struggle with the flashing effect of the button when the text is changed every second, which we especially do not want to see. If custom is used, there is no flashing effect.

So, can we do something simple and simple? There is a feedback effect that darkens when the button is clicked, as well as a non-flashing effect when the text is replaced. And use the minimum amount of code?

Three solutions: 1. Use system style to solve flash 2. Use custom style to solve press feedback effect 3. Use custom controls instead

Here’s a simple idea: using custom controls instead of UIButton completely, we want to achieve both the effect of the button and the button click…. The highest complexity of the use of custom style, as said above, button click effect, we through nomal, SELECT and other states to modify different styles, we may need to write a lot of redundant code, just to achieve the effect of the click, and there is no natural system So in the end, I’ll stick with the System style, and we just need to keep it from flashing

To achieve the effect of not flashing is something like this

self.button.titleLabel.text = string;
Copy the code

Yeah, it’s just one line but you can’t just add it everywhere and this line of code has to be added in one place for it to work

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

Yeah, that’s it, just add this line to the way we normally set button text, it has to be on the first line,

Similarly, if our button has a picture on it and the picture flashes, the principle is the same, to prevent the flash, just need to

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

You can’t write these two lines of code separately, if you write them separately like this

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

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

There will be no effect!!!!

They must be serialized together and written in front of their respective Settings

/ / prevent words flashing self. Button. TitleLabel. Text = string; [self.buttonsetTitle:string forState:UIControlStateNormal]; / / prevent images flashing self. Button. ImageView. Image = image; [self.buttonsetImage:image forState:UIControlStateNormal];
Copy the code

Yeah, it’s that simple. It handles the flash effect

You may be dismissive, feeling that this has no useful effect.

The first page was a cell inside the collectionView that for some reason was just a button. And then WHEN I refreshed the collectionView, it flashed.

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

I thought so and did so at first, but I was disappointed. When I refreshed the cell, it still flashed, but when I replaced the cell with the combination of imageView and Lable with the original button, it did not flash, so the flash was caused by the button. We can’t get rid of buttons just because they flash, or it might work here, but there are some places where we might still need buttons, so

All you need to do is subtly add two lines of code, the anti-flash code described above

In an instant, everything was fine

I’m going to share this tip with you. Maybe you don’t have this problem, but when you do, wouldn’t it be nice if you knew how to solve it in two simple lines?