Illusion: starting with a seemingly simple custom control

Illusion: starting with a seemingly simple custom control

Why is it so long to write this blog today? It's a winter of heavy snow ...... Then ....... Now, let's get started with today's topic. this blog is about iOS custom components. Some UI effects seem to look like this, but they are not actually like this. When doing some UI effects, we can use the illusion to let users see something. What you actually implement is something. The principle is to try to cheat the user's eyes. If combined with the UI implementation, the illusion may sometimes produce unexpected results.

1. Overview of illusion

Reference-"the illusion is that when a person observes an object, he or she may make incorrect judgments and perceptions based on experience or improper references. Incorrect view: it refers to the perception that an observer is not consistent with an objective fact under the interference of objective factors or under the control of its own psychological factors ."

The above explanation seems a bit complicated. To put it bluntly, it is to deceive your own eyes. Not necessarily true. Common examples of visual illusion: common practices such as low-to-high, virtual-to-reality, cold-to-temperature, rough-to-fine, and straight-to-face. So much, I want to use a group of images to intuitively feel the illusion. (Image source and Network)

1.This is not the starting point or the ending point.

2. A custom component using illusion

When you see the effect of this component for the first time, there is nothing special about it, that is, a common component that cannot be used. However, if you look at it carefully, you will feel different. Some details are handled very well. When I saw the component effect, I didn't know how to implement it because there was no source code. I thought about it, and then I thought of using the "illusion of vision" to implement it. Of course, this implementation scheme was developed by myself. I don't know how it was implemented by the original author. The following shows my own implementation scheme. Let's take a look at the running effect.

1. The running effect of this component is as follows, which is actually a custom SegmentControl. When I saw this component, my first impression was: "This component should be quite good ". At that time, I felt that there were several buttons, and a UIView was red. When I clicked the Button, I moved the UIView to the currently clicked Button Through animation. At most, it is encapsulated to become a custom component and then used by others.

The text (or part of the text) in the red area changes with the moving of the red area. After the red area is moved, the font color changes to the original one. When we see this effect, we feel a sense of enthusiasm for this component. In an instant, there was no solution. The brain is filled with countless question marks. What black technology does this actually use !? This NX effect is achieved. When I went home from the subway in the evening, I had been thinking about the solution. It turns out that it is the "illusion of vision ". As a result, I went home for dinner and didn't eat any food. I took out my notebook and started to implement it based on my own ideas. It's hard to get down to others, so today's blog is available. Of course, it is my own idea to achieve the above results. If there are other better implementation methods, please contact us.

Iii. Implementation Principle

1. Principles

When we achieve the above results, if we see what we see to achieve it, it is estimated that we will not be able to start. One principle: "seeing is a virtual eye", it's OK. I don't want to paste too much code in this blog today. I just want to share my ideas with you. In fact, programming is sometimes more important than code. Below I want to use the analysis layer on the Reveal tool to talk about the implementation principle.

Through the UI Layer above Reveal, we can easily see that this component is much more complicated than we think. My implementation method is as follows:

(1) first add a Label on the View. These labels are used to display the regular font color (the color when it is not selected) (black words)

(2) Add a View, animation element, highlighted font, and clicked buttons on the Label.

(3) Add a highlighted Label (White words) to this View. The font, size, and position of the Label must be consistent with the underlying Label (except for the color)

(4) The size of the upper View must be the same as that of a Label, and the Child View beyond the View is not displayed.

(5) When moving the View (red part), you must also move the White words on The View. The white Label and black label must overlap during the movement process.

In this way, when the View is moved to the label, the black Label on the back is blocked and the white Label is displayed. this is probably the principle. Once you know what is going on, it will be much easier to implement it.

1 // 2 // ZLCustomeSegmentControlView. h 3 // CustomeSegmentControl 4 // 5 // Created by ZeluLi on 15/11/19. 6 // Copyright©2015 zeluli. all rights reserved. 7 // 8 9 # import <UIKit/UIKit. h> 10 11 typedef void (^ ButtonOnClickBlock) (NSInteger tag, NSString * title); 12 13 @ interface ZLCustomeSegmentControlView: UIView14 15 @ property (nonatomic, strong) NSArray * titles; // Title array 16 @ property (nonatomic, strong) UIColor * titlesCustomeColor; // The General color of the Title 17 @ property (nonatomic, strong) UIColor * titlesHeightLightColor; // Title highlight color 18 @ property (nonatomic, strong) UIColor * backgroundHeightLightColor; // color 19 @ property (nonatomic, strong) UIFont * titlesFont; // The title Font size is 20 @ property (nonatomic, assign) CGFloat duration; // Sports Time 21 22/** 23 * click the callback button 24*25 * @ param block click the Block26 */27-(void) setButtonOnClickBlock: (ButtonOnClickBlock) block; 28 29 @ end

 

3.Call method of the custom component

 1     ZLCustomeSegmentControlView *v = [[ZLCustomeSegmentControlView alloc] initWithFrame:CGRectMake(30, 100, SCREEN_WIDTH - 60, 50)]; 2      3     v.titles = @[@"Hello", @"Apple", @"Swift", @"Objc"]; 4     v.duration = 0.7f; 5      6     [v setButtonOnClickBlock:^(NSInteger tag, NSString *title) { 7         NSLog(@"index = %ld, title = %@", (long)tag, title); 8     }]; 9     10     [self.view addSubview:v];

 

For some reason, I will not paste the code one by one in my blog today. If you have any good ideas, please feel free to contact us ~
The Demo above shares the link on GitHub as follows: https://github.com/lizelu/ZLCustomeSegmentControlView