The last article to scrollView four directions to add a sliding refresh, today to implement a custom PageControl, restore their hands-on ability, long time do not write things immediately feel degraded. It is not very difficult, as long as it is to clarify their ideas and solve the problem direction, calm down to write something you like. Here we go…..

  • Ideas:

**pageControl **

  • 1. First, the number of pages determines how many dot placeholders we have.
  • 2. PageControll size, we have a placeholder dot, and an animated dot is the dot that will run with the indicating effect, the size of pagecontrol activeDot and inactiveSizeDot to determine the largest.

Let’s start implementing:

Our pageControl style may require a lot, so let’s build a Base to provide data and Base data support for design choices. Other animation effects are added slowly later :(PS: later = do not write)

#pragma mark -- calculate the current contentView /** First determine the maximum size so far only depending on activeSize and inactiveSize take their maximum width and their minimum height */  - (void)setContenViewSize{ if (self.numberOfpage == 1) { return; } //: Get the width of the largest item CGFloat maxItemSizeW = minItemSizeW; CGFloat maxItemSizeH = minItemSizeH; if (_activeSize.width >= _inactiveSize.width && _activeSize.width>= minItemSizeW) { maxItemSizeW = _activeSize.width; }else if(_inactiveSize.width >= _activeSize.width && _inactiveSize.width >= minItemSizeW){ maxItemSizeW = _inactiveSize.width; Height >= _inactivesize.height && _activesize.height >= minItemSizeH) {maxItemSizeH = _activeSize.height; }else if(_inactiveSize.height >= _activeSize.height && _inactiveSize.height >= minItemSizeH){ maxItemSizeH = _inactiveSize.height; } self.maxIndicatorSize = CGSizeMake(maxItemSizeW, maxItemSizeH); CGFloat contentViewW = maxItemSizeW * self.numberOfpage + self.columnSpacing * (self.numberOfpage -1); CGFloat contentViewH = maxItemSizeH; //:contentView.frame self.contentView.frame = CGRectMake(0, 0, contentViewW, contentViewH); self.contentView.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2); }Copy the code

Now that we have the pageControlView frame, we are going to animate the activeDot transition based on the index passed in from the outside.

#pragma mark --//: pragma mark -- (void)updateCurrentPage:(NSInteger)currentIndex{NSLog(@"%d",currentIndex); if (currentIndex > self.numberOfpage - 1) { currentIndex = 0; } CGFloat firstLayerX = (self) maxIndicatorSize) width - self. ActiveSize. Width) * 0.5; CGFloat firstLayerY = (self) maxIndicatorSize) height - self. ActiveSize. Height) * 0.5; self.activeLayer.backgroundColor = [UIColor yellowColor].CGColor; if (currentIndex == 0) { self.activeLayer.frame = CGRectMake(firstLayerX + (self.maxIndicatorSize.width + self.columnSpacing)*currentIndex, firstLayerY, self.activeSize.width, self.activeSize.height); return; } //: animation starts [CATransaction begin]; [CATransaction setCompletionBlock:^{self. activelayer. frame = CGRectMake(firstLayerX + (self.maxIndicatorSize.width + self.columnSpacing)*currentIndex, firstLayerY, self.activeSize.width, self.activeSize.height); }]; [CATransaction begin]; CGFloat animaW = self. ActiveSize. Width * 0.5 + self maxIndicatorSize. Width * 1.5 + self. ColumnSpacing; self.activeLayer.frame = CGRectMake(firstLayerX + (self.maxIndicatorSize.width + self.columnSpacing)*(currentIndex - 1),  firstLayerY, animaW, self.activeSize.height); [CATransaction commit]; [CATransaction commit]; [CATransaction commit]; }Copy the code

The specific effects are as follows:

Other styles of animation will be updated gradually and hopefully added. Hahaha hiccup