iOS Translucent Beginner's Guide to Teaching You How to Make It

1. Effect display

[[142842]]

This type of novice guide is quite common and is used to tell users the function of a button or remind users that they can perform some interactive operations. The guide style is to add a semi-transparent guide image to the interface, and the highlighted part is the area to be highlighted.

2. How to do it?

There are many solutions, different solutions have different advantages and disadvantages, here are two common solutions

1. Solution 1: Generate the entire guide map

(1). Export guide map

Ask the designer to export guide maps of various sizes. The guide map only contains the guide part, not the background. The exported guide map style is as follows:

[[142843]]

You need to export iPhone4, iPhone5, iPhone6, iPhone6 ​​plus, a total of 4 sizes. If you want to adapt to iPad, you also need to export iPad's

(2) Coding

Because the whole picture is exported, the code part is simple. You don’t need to consider the layout problem. Just generate an imageView and put it on it, and then add a click event to it.

The code is as follows:

 - ( void )addGuideView {
    NSString *imageName = nil;
 if (DEVICE_IS_IPHONE5) {
        imageName = @ "guide-568h" ;
 } else {
        imageName = @ "guide" ;
 } 
 
    UIImage *image = [UIImage imageNamed:imageName];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = self.view.bounds;
    imageView.userInteractionEnabled = YES; 
 
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action: @selector (dismissGuideView)];
    [imageView addGestureRecognizer:tap]; 
 
    [self.view addSubview:imageView];
 }

Special attention should be paid to the following:
@3x images require iOS 8 or higher to be automatically recognized. If you want to be forward compatible, you need to determine the device type in the image name and then specify the corresponding image name.

(3) Advantages and disadvantages

The advantages of this approach are
a. Quickly As long as the designer has finished the rendering, he can export the mask into various specifications. 90% of the workload is on the designer, and the programmer only needs to simply add views and events.

b. Low maintenance cost. When the interface changes or the guide map needs to be adjusted, the designer only needs to regenerate the image and then replace it.

But this solution also has many disadvantages:
a. Images take up a lot of space. Each device has one image, and the image is full-screen in size. It may also need to be adapted to the horizontal screen, which will obviously increase the size of the app installation package.

b. Images cannot be reused. A guide image can only be used in one place and cannot be used in other places.

2. Solution 2: Image stitching

The idea of ​​image stitching is to stitch several images together into a mask layer, and then place other elements on it, as shown in the following figure

[[142844]]

(1) Prepare the image

Here you need to prepare 3 pictures
a. Hollow ellipse mask layer

[[142845]]

The middle is transparent and the surrounding is white. The white part can be modified to any color during the masking process.

b. Small arrow

[[142846]]

c. OK button

[[142847]]

#p#

(2) Coding

Here we only introduce the writing process of some codes

a. Interface Definition of interface:

• (void)showInView:(UIView )view maskBtn:(UIButton )btn;
  view: the parent view of the guide image
  btn: masked button

Implementation of the interface:

 ( void )showInView:(UIView )view maskBtn:(UIButton )btn {
 self.parentView = view;
 self.maskBtn = btn; 
 
 self.alpha = 0 ;
 [view addSubview:self];
 [UIView animateWithDuration: 0.2 animations:^{ 
 
 self.alpha = 1 ;
 } completion:nil];
 }

b. Modify the mask layer. After loading the hollow ellipse image, process the white area first and change it to black and semi-transparent.
UIImage image = [UIImage imageNamed:@"whiteMask"];
image = [image maskImage:[[UIColor blackColor] colorWithAlphaComponent:0.71]];
UIImageView imageView = [[UIImageView alloc] initWithImage:image];

 (UIImage )maskImage:(UIColor )maskColor
 {
 CGRect rect = CGRectMake( 0 , 0 , self.size.width, self.size.height); 
 
 UIGraphicsBeginImageContext(rect.size); 
 
 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextTranslateCTM(context, 0 , rect.size.height);
 CGContextScaleCTM(context, 1.0 , - 1.0 );
 CGContextClipToMask(context, rect, self.CGImage);
 CGContextSetFillColorWithColor(context, maskColor.CGColor);
 CGContextFillRect(context, rect); 
 
 UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext(); 
 
 UIGraphicsEndImageContext(); 
 
 return smallImage;
 }

• Here we will change the white part of the image to any color. We want to change the hollow ellipse image to this

  [[142848]]

  c. Generate 4 black semi-transparent views on the top, bottom, left and right sides

  Place them on the top, bottom, left, and right of the hollow oval image.

•  (UIView *)topMaskView {
   if (!_topMaskView) { 
   
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent: 0.71 ];
   _topMaskView = view;
   }
   return _topMaskView;
   }

•  (UIView *)bottomMaskView {
   if (!_bottomMaskView) { 
   
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent: 0.71 ];
   _bottomMaskView = view;
   }
   return _bottomMaskView;
   }

•  (UIView *)leftMaskView {
   if (!_leftMaskView) { 
   
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent: 0.71 ];
   _leftMaskView = view;
   }
   return _leftMaskView;
   }

•  (UIView *)rightMaskView {
   if (!_rightMaskView) { 
   
    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent: 0.71 ];
   _rightMaskView = view;
   }
   return _rightMaskView;
   }

d. View layout There are several things to note here:
c-1. The x, y, width, and height values ​​of the stitched views need to be rounded, because floating point numbers may cause white edges to appear at the joints, especially on iPhone 6 plus due to the resolution of the phone, so integers are best used here.

c-2. Perform layout in the layoutSubviews function. The advantage of this layout is that it can smoothly transition between horizontal and vertical screen adaptation, and does not require manual updates.

The layout code is as follows:

 ( void )layoutSubviews {
 [ super layoutSubviews];
 self.frame = _parentView.bounds;
 _maskBg.frame = self.bounds;
 _btnMaskView.center = [_maskBtn.superview convertPoint:_maskBtn.center toView:_maskBtn.superview]; 
 
 CGRect btnMaskRect = _btnMaskView.frame;
 btnMaskRect.size = CGSizeMake(floor(btnMaskRect.size.width), floor(btnMaskRect.size.height));
 btnMaskRect.origin = CGPointMake(floor(btnMaskRect.origin.x), floor(btnMaskRect.origin.y));
 _btnMaskView.frame = btnMaskRect; 
 
 _topMaskView.left = 0 ;
 _topMaskView.top = 0 ;
 _topMaskView.height = _btnMaskView.top;
 _topMaskView.width = self.width; 
 
 _bottomMaskView.left = 0 ;
 _bottomMaskView.top = _btnMaskView.bottom;
 _bottomMaskView.width = self.width;
 _bottomMaskView.height = self.height - _bottomMaskView.top; 
 
 _leftMaskView.left = 0 ;
 _leftMaskView.top = _btnMaskView.top;
 _leftMaskView.width = _btnMaskView.left;
 _leftMaskView.height = _btnMaskView.height; 
 
 _rightMaskView.left = _btnMaskView.right;
 _rightMaskView.top = _btnMaskView.top;
 _rightMaskView.width = self.width - _rightMaskView.left;
 _rightMaskView.height = _btnMaskView.height; 
 
 _arrwoView.right = _btnMaskView.left + 24 ;
 _arrwoView.bottom = _btnMaskView.top - 8 ;
 _tipsLabel.right = _arrwoView.left - 6 ;
 _tipsLabel.bottom = _arrwoView.top + 10 ; 
 
 _okBtn.centerX = self.width/ 2 ;
 _okBtn.bottom = _btnMaskView.top - 80 ;
 }

(3) Advantages and disadvantages

advantage:
a. To save space, you only need a few small pictures, and then you can assemble them into a guide map.

b. Reusable images. Images such as buttons, ellipses, and small arrows may be used by other guide images.

shortcoming:
a. Coding takes a long time. Every interface element needs to be implemented through coding, and every change also requires adjusting the code.

Conclusion

The first solution is more suitable for small projects, mainly because it is fast and suitable for rapid iteration. The second solution is suitable for long-term updated projects and saves app space.
Demo address:
https://github.com/sunljz/demo/tree/master/GuideDemo

【Editor's recommendation】

1. Basic knowledge of iOS development: Core Animation
2. Some of the best tricks for iOS development
3. Some ingenious tricks for iOS development 2
4. iOS development knowledge system
5. Regarding iOS multithreading, it is enough for you to look at me

[Editor: Ni Ming TEL: (010) 68476606]