At the beginning

  • This is a sub-chapter. For the whole article, see the Learning Diary of Zero-based iOS development

UIScrollView

The actual use

  • The picture by

– Images are zoomed in and out

Basic usage

  • useUIScrollViewThere are two dimensions to be aware of themselvesframeAnd the content ofcontentSize
  • frameRefers to theUIScrollViewIts own position and size, understood as a box, is visible to the user
  • contentSizeIt means put inUIScrollViewThe content size is the maximum range that the user can move
  • UIScrollViewZoom display, need to use proxy method, and proxy method, in the use of the process can be understood as the control of the listening method, when the control in a state need to call the method in this function has realized some requirements
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"WechatIMG8793"]]; UIScrollView *scrollView = [UIScrollView new]; self.imageView = imageView; self.scrollView = scrollView; // Set the delegate scrollView.delegate = self; scrollView.backgroundColor = [UIColor redColor]; scrollView.frame = [UIScreen mainScreen].bounds; imageView.frame = scrollView.frame; [imageView sizeToFit]; / / scrollView scaling scrollView. MaximumZoomScale = 2.0; ScrollView. MinimumZoomScale = 0.1; // ScrollView. contentSize = imageView.frame.size; / / scrollView bearing indicator scrollView. ShowsVerticalScrollIndicator = NO. scrollView.showsHorizontalScrollIndicator = NO; [scrollView addSubview:imageView]; [self.view addSubview:scrollView];Copy the code
  • Scale the proxy method to return the control that needs to be changed,UIScrollViewIt will automatically scale according to the maximum and minimum scaling ratio
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { NSLog(@"zooming..." ); return self.imgView; }Copy the code
  • But in the actual development, often need to image in the middle of the screen, you need to offset the content coordinates, you need toUIScrollViewEnd the scaling state to operate. In the functionviewforscrollViewThe contents of the
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale { CGFloat OffsetY = (scrollView. Bounds. Size. Height - the frame. The size, height) * 0.5; offsetY = offsetY < 0 ? 0 : offsetY; CGFloat offsetX = (scrollView. Bounds. Size. Width - the frame. The size, width) * 0.5; offsetX = offsetX < 0 ? 0 : offsetX; Scrollview. contentInset = UIEdgeInsetsMake(offsetY, offsetX, 0, 0); }Copy the code

Picture rotator

  • useUIScrollViewThe idea of realizing the picture roater is considered from the following aspects
  1. How to achieve content through image Mosaic asscrollViewcontent
  2. How to achieve round seeding, utilizationUIScrollViewthepagingEnabledPerform a page-turning display, that is, when the content reaches the next pagescrollViewThe scope of their own, will produce a page-turning effect
  3. How to get page number, utilizedUIpageControlDisplay page number
  4. How to implement automatic scrolling using timer SettingsscrollViewOffset for automatic scrolling
UIScrollView *scrollView = [UIScrollView new]; // indicator UIPageControl *pageControl = [UIPageControl new]; / / the number of indicator pageControl numberOfPages = 6; // set the currentPage number pagecontrol. currentPage = 0; / / the color of the indicator pageControl. PageIndicatorTintColor = [UIColor redColor]; / / indicator. The color of the current pageControl currentPageIndicatorTintColor = [UIColor blueColor]; // Fix imageView width/height CGFloat imgW = 336; CGFloat imgH = 448; ImageView (int I = 0; i < 6; i++) { UIImageView *imageView = [UIImageView new]; NSString *imageName = [NSString stringWithFormat:@"img_%02d", i]; imageView.image = [UIImage imageNamed:imageName]; CGFloat imgX = I * imgW; imageView.frame = CGRectMake(imgX, 0, imgW, imgH); imageView.contentMode = UIViewContentModeScaleAspectFit; [scrollView addSubview:imageView] [scrollView addSubview:imageView]; } scrollView.backgroundColor = [UIColor blackColor]; Scrollview. frame = CGRectMake(50, 50, imgW, imgH); Scrollview. contentSize = CGSizeMake(imgW * 6, 0); Scrollview. pagingEnabled = YES; / / hide the scroll indicator scrollView. ShowsHorizontalScrollIndicator = NO; // Set the delegate scrollView.delegate = self; [self.view addSubview:scrollView]; Pagecontrol. frame = CGRectMake(100, 498, 200, 20); pagecontrol. frame = CGRectMake(100, 498, 200, 20); [self.view addSubview:pageControl]; self.pageControl = pageControl; self.scrollView = scrollView;Copy the code
  • As for page number acquisition, in normal use, users want to see the change of page number in the process of swiping, so that it does not appear stiff
  1. UIscrollViewThe concept of offset refers to where the contents of a scrollView move relative to where they were originally displayed
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { //1. Gets the current rolling direction of the offset value CGFloat offsetX = scrollView. ContentOffset. X. / / optimization, has been offset value, plus half the width of the page, in the process of switching, just drag the half a page, will change a pageControl offsetX = offsetX + (scrollView. Frame. The size, width * 0.5); / / 2. The offset value of x direction/every page width, take, is the current page number (index) int page = offsetX/scrollView. Frame. The size. The width; self.pageControl.currentPage = page; }Copy the code
  • There are three main types of timers in OC, which are used hereNSTimer, the use ofscheduledTimerWithTimeInterval...The created timer is automatically added to the message loop in the default modeNSDefaultRunLoopMode
  • usingpageControlThe number of pages is calculated as offset, and then set
The self. The timer = [NSTimer scheduledTimerWithTimeInterval: 2.0 target: self selector: @ the selector (scrollImage) the userInfo: nil repeats:YES]; // Timer method - (void)scrollImage {//1. Get the current page number NSInteger page = self. PageControl. CurrentPage; //2. If the page number is the last, set the page number to 0. If does not arrive, the page number + 1 if (page = = self. PageControl. NumberOfPages - 1) {page = 0; } else { page++; } / / 3. The use of each page * (page number + 1) = = calculate the contentOffset on the next page. X CGFloat offsetX = page * self scrollView. Frame. The size. The width; / / 4. Set the scrollView new offset value [self. The scrollView setContentOffset: CGPointMake (offsetX, 0) animated: YES]; }Copy the code
  • Due to timerNSTimerThe priority problem affects the timer effect when other controls are used. Therefore, you need to change the priority of the timer to be consistent with the control priority
NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
[runLoop addTimer:self.timer forMode:NSRunLoopCommonModes];
Copy the code
  • And then I start draggingscrollViewWillBeginDraggingWhen, to turn the timer off at the end of the dragscrollViewDidEndDragging“, turn on the timer again
- (void) scrollViewWillBeginDragging: (scrollView UIScrollView *) {/ / stop the timer / / calls to stop the timer, the timer can't reuse again, Next time you must create a new timer object [self.timer invalidate]; // Initialize the timer pointer self.timer = nil; } - (void) scrollViewDidEndDragging: (UIScrollView *) scrollView willDecelerate: (BOOL) decelerate {/ / open the timer self again. The timer = [NSTimer scheduledTimerWithTimeInterval: 2.0 target: self selector: @ the selector (scrollImage) the userInfo: nil repeats: YES]; NSRunLoop *runLoop = [NSRunLoop currentRunLoop]; [runLoop addTimer:self.timer forMode:NSRunLoopCommonModes]; }Copy the code

conclusion

  • In conclusion,UIScrollViewWe need to pay special attention to a few points
  1. One’s ownframeThe size andcontentSizeSize, the former determines the visible range, the latter determines the mobile range
  2. Offset value, which determines the relative display range
  3. UIScrollViewProxy functions for each state