A detailed introduction and application example of IOS mask Properties _ios

Objective:

In the development process, a UI development approach like Android and other platforms requires a mask diagram to display part of the UI or icon resources. iOS controls have alpha values, but this value is transparent to the entire icon or UI, and cannot be customized for transparent or hollow effects. We must draw on the mask resource map.

Introduction to Mask Properties

Mask usually use the most is Maskstobounds bar. In fact, in addition to mask use a lot of scenes, after reading you will find good really useful do not want to ...

First to understand what the next mask property is?

Mask The English explanation is the mask/mask, usually we call the mask layer. The following figure in Apple's official document means that mask is an optional layerthat can mask layer content based on transparency.

It seems that ... Still don't know what egg to use ...

Then look at the following note, meaning that the transparency of layer determines whether the layer content can be displayed, opaque content and background can be displayed, and transparent cannot be displayed.

Mask instance Use

Example 1: Gradient progress bar

First look at "face" and then talk about "connotation"

The entire animation effect can be divided into 4 main steps:

1. Create a calayer as background color progress bar

Calayer *bglayer = [Calayer layer];

  Bglayer.frame = CGRectMake (KNUMBERMARKWIDTH/2, Self.numberMarkView.bottom + 10.f, SELF.WIDTH-KNUMBERMARKWIDTH/2, KPr Ocessheight);

  Bglayer.backgroundcolor = [Uicolor colorwithhex:0xf5f5f5]. Cgcolor;

  Bglayer.maskstobounds = YES;

  Bglayer.cornerradius = KPROCESSHEIGHT/2;

  [Self.layer Addsublayer:bglayer];

2. Create a cagradientlayer gradient effect of layer

Self.gradientlayer = [Cagradientlayer layer];
  Self.gradientLayer.frame = Bglayer.frame;
  Self.gradientLayer.masksToBounds = YES;
  Self.gradientLayer.cornerRadius = KPROCESSHEIGHT/2;
Set gradient color array
  [Self.gradientlayer setcolors:[nsarray arraywithobjects:
                  (ID) [[uicolor colorwithhex:0xff6347] Cgcolor],
                  [(ID) [Uicolor colorwithhex:0xffec8b] cgcolor],
                  (ID) [[uicolor colorwithhex:0xeeee00] cgcolor],　　
                  (ID) [[[Uicolor colorwithhex:0x7fff00] cgcolor],
                  Nil]];
Sets the gradient location array
  [Self.gradientlayer setlocations:@[@0.3, @0.5, @0.7, @1]];
Set gradient start and end positions
  [Self.gradientlayer setstartpoint:cgpointmake (0, 0)];
  [Self.gradientlayer setendpoint:cgpointmake (1, 0)];

3. Create a mask Layer and set it to the mask of the Cagradientlayer gradient layer. Then you can control the progress by setting the Masklayer width. is not very simple, but seems not to feel the mask of the strong ...

Self.masklayer = [Calayer layer];
   Self.maskLayer.frame = CGRectMake (0, 0, (SELF.WIDTH-KNUMBERMARKWIDTH/2) * self.percent/100.f, kprocessheight);
  [Self.gradientlayer SetMask:self.maskLayer];

-(void) Circleanimation {//progress bar animation
  
  [catransaction begin];
  [Catransaction Setdisableactions:no];
  [Catransaction setanimationtimingfunction:[camediatimingfunction Functionwithname: Kcamediatimingfunctioneaseineaseout]];
  [Catransaction Setanimationduration:kanimationtime];
  Self.maskLayer.frame = CGRectMake (0, 0, (SELF.WIDTH-KNUMBERMARKWIDTH/2) * _percent/100.f, kprocessheight);
  [Catransaction commit];
}

4. Text gradient, this will be able to see the characteristics of mask.

First create a label to show the score, and then create an identical gradient cagradientlayer with step 2nd. set the associated layer of the label to the mask of the gradient cagradientlayer, so that's OK.

That's what it says. The Mask property is characterized in that the content is opaque and can be displayed, while transparency is hidden.

In an instance, the label is the mask of the gradient layer, the text part of the label is opaque, and the other is transparent. Then the text and the text background (this is the gradient layer) can be displayed. It's probably like a hollow text section, and then it shows up underneath the gradient layer.

Finally, just move the label position to see the effect text color gradient that we want. The bottom left figure is set to mask and the mask is not set on the bottom right.

-(void) Setnumbermarklayer {//Hint text settings gradient
  
  cagradientlayer *numbergradientlayer = [Cagradientlayer layer];
  Numbergradientlayer.frame = CGRectMake (0, Ktopspaces, Self.width, knumbermarkheight);
  [Numbergradientlayer SetColors:self.colorArray];
  [Numbergradientlayer SetLocations:self.colorLocationArray];
  [Numbergradientlayer setstartpoint:cgpointmake (0, 0)];
  [Numbergradientlayer setendpoint:cgpointmake (1, 0)];
  [Self.layer Addsublayer:numbergradientlayer];
  [Numbergradientlayer SetMask:self.numberMark.layer];
  Self.numberMark.frame = numbergradientlayer.bounds;
}

Source can enter GitHub view: Https://github.com/xl20071926/LXGradientProcessView

In addition, similar to the Sesame credit, with mask and Cashaperlayer do, interested can also look at: Https://github.com/xl20071926/LXCircleAnimationView

Example 2: Hollow effect

Novice Guide Most apps will have this function, but it is understood that a lot is directly attached to a picture on the top.

Well, this is really simple, but this is so good low and do not work well, then we have to use the hollow way of forcing a high point to achieve:

Let's start with a simple effect chart:

The implementation is also very simple, the main 3 steps:

1. Create a hollow path:

Uibezierpath has a native method-(void) Appendpath: (Uibezierpath *) Bezierpath, which is the effect of two paths with overlapping parts will be hollowed out.

The principle of this method should be the path of the FillRule default is Fillruleevenodd (Calayer has a fillrule attribute of the rule has kcafillruleevenodd), and evenodd is a parity rule, odd show, Even numbers are not displayed. The superposition is even, so it is not displayed.

2. Create Cashapelayer to shapelayer the Hollow path assignment

3. Set the Shapelayer to the background view mask

UIView *backgroundview = [[UIView alloc] init];
  Backgroundview.frame = self.view.bounds;
  Backgroundview.backgroundcolor = [Uicolor colorwithwhite:0 alpha:0.7];
  [Self.view Addsubview:backgroundview];
  Create a full screen large path
  uibezierpath *path = [Uibezierpath bezierPathWithRect:self.view.bounds];
  Create a circular path
  uibezierpath *circlepath = [Uibezierpath bezierpathwitharccenter:cgpointmake (Self.view.center.x, self.view.center.y-25)
                               radius:50
                             startangle:0
                              endangle:2 * m_pi
                              clockwise:no];
  [Path Appendpath:circlepath];
  
  Cashapelayer *shapelayer = [Cashapelayer layer];
  Shapelayer.path = path. Cgpath;
  BackgroundView.layer.mask = Shapelayer;

Incidentally, this requirement may be encountered in actual development and the novice boot is displayed when the TableView slides to a certain location.

At this point, you need to convert the coordinates on the TableView to the screen coordinates. Available native methods:

-(CGRect) Convertrect: (cgrect) Rect toview: (Nullable UIView *) view;

-(CGRect) Convertrect: (cgrect) Rect fromview: (Nullable UIView *) view;

Thank you for reading, I hope to help you, thank you for your support for this site!