IOS 05 UIScrollView

IOS 05 UIScrollView

 

• The screen size of a mobile device is extremely limited, so the content displayed directly in front of a mobile user is quite limited.

• When there is a large amount of content displayed in the exhibition, when the screen is exceeded, the consumer user can view the content outside the screen by rolling the preview gesture.

• A normal UIView does not have the scroll function and cannot display too much content.

• UIScrollView is a view control that can be rolled. It can be used to display a large amount of contents in the display, and all contents can be viewed through rolling.

• In IOS, The UIScrollView control is quite common and important.
• Most of the time, we want to perform some specific operations when UIScrollView is rolling or rolling to a certain position or stopping rolling.

• To complete the preceding functions, you must be able to monitor the entire Rolling Process of UIScrollView.

  • When UIScrollView sends a batch of rolling operations, it will automatically notify its proxy (delegate) object

  Its proxy sends the corresponding message to let the proxy know its rolling status
  • In other words, to listen to the UIScrollView rolling process, you must first set a callback proxy for UIScrollView

  And then the scrolling process of UIScrollView is known through the proxy.

  // Call the volume when the volume user starts to drag and drop
  -(Void) scrollViewWillBeginDragging :( UIScrollView *) scrollView;
  // Call seek when rolling to a certain position
  -(Void) scrollViewDidScroll :( UIScrollView *) scrollView;
  // Call the timer when the user finishes dragging
  -(Void) scrollViewDidEndDragging :( UIScrollView *) scrollView willDecelerate :( BOOL) decelerate;

   

  Common attributes of UIScrollView are described in attributes.

  • @ Property (nonatomic) CGPointcontentOffset; specify this attribute to indicate the scroll position of UIScrollView.

  • @ Property (nonatomic) CGSizecontentSize;
  The limit attribute indicates the size of UIScrollView content and the rolling range (how far can it be rolled)

  • @ Property (nonatomic) UIEdgeInsetscontentInset; this property can add an additional scrolling area in the four weeks of UIScrollView

  2. After introducing the basic attributes of UIScrollView, we will create a small program for image carousel: 2.1, for example. 2.2 this program has five pictures. When sliding the screen, the pictures on the screen will also change, and the navigation buttons will also change. If the screen is not sliding, every two seconds, the screen image also changes. The program is such a function, which can be seen in many apps. The following code is used. 2.3 design the View. The View is relatively simple. There is only one Scroll View and one page control, as shown below: 2.4 After the View is designed, import the image to the project, here we simply put the image in the project Imagees. xcassets. 2.5 After this is done, you need to write the code to implement the function. Step 2: Create the attributes of Scroll View and page control.

  // Scroll View attributes

  @ Property (weak, nonatomic) IBOutlet UIScrollView * ScllView;

  // PageControl attributes

  @ Property (weak, nonatomic) IBOutlet UIPageControl * PageControl;

  2.6 After the attributes of the two controls on the View are created, read the image and save it to the Scroll View. The Code is as follows: // create the position of UIImageView in Scrool view // W. H and Y values are the same, but the X values of each UIImageView are different. CGFloat FloatW = self. scllView. frame. size. width; CGFloat FloatH = self. scllView. frame. size. height; CGFloat FloatY = 0; // five images are written to death. loop through all the images. // create a UIimageView and set the position of each UIimageView. for (int I = 0; I <imageCont; I ++) {UIImageView * imageView = [[UIImageView alloc] init]; // calculate the X value, CGFloat FloatX = I * FloatW; imageView. frame = CGRectMake (FloatX, FloatY, FloatW, FloatH); NSString * imagename = [NSString stringWithFormat: @ "img_0% I", I + 1]; imageView. image = [UIImage imageNamed: imagename]; // Add UIImageView to Scroll View [self. scllView addSubview: imageView];}View Code

  The most important thing here is to calculate the X value of each UIiamgeView. In fact, the X value is also simple because the W value of each image is the same as that of Scroll View, therefore, the X value of each UIiamgeView can be * ScllView. frame. size. the width value is enough.

  2.7 so that we can add all the images to the Scroll View on the View. Then, we need to make the images in the Scrool View slide.The image in the Scrool View can be slide. We need to use a proxy and import the image using the proxy.UIScrollViewDelegate, as follows:

  @ Interface ViewController () <UIScrollViewDelegate>

  After importing UIScrollViewDelegate, set the attributes of the Scrool View:

  The PagingEnabled paging attribute is that each slide is a whole image, so that only one complete image can be displayed on the screen,

  At the same time, set the number of page control controls in the view. Of course, this number is the same as the number of images.

  // 2. the size of the content of the scroll view self. scllView. contentSize = CGSizeMake (FloatW * imageCont, 0); // remove the level indicator self. scllView. showsHorizontalScrollIndicator = NO; // set the page self. scllView. pagingEnabled = YES; // set the number of pages displayed by pageControl self. pageControl. numberOfPages = imageCont;

  2.8 After this is done, the images on the screen may slide freely, but there is a small problem that the page control on the screen will not change as the screen image changes,

  How can this be achieved? This should be done in the proxy method as follows:

  // Set proxy

  Self. ScllView. delegate = self;

  // Proxy method // The method that comes with the proxy. When the view is rolling, it is always executing-(void) scrollViewDidScroll :( UIScrollView *) scrollView {CGFloat scrolViewW = self. scllView. frame. size. width; CGFloat pageCount = (self. scllView. contentOffset. x + scrolViewW * 0.5)/scrolViewW; self. pageControl. currentPage = pageCount ;}

  In this way, the entire picture player will be OK. Next we will make a regular playback function. When the program starts, it will play automatically. If you don't need to talk about it much, We will directly add all the Code as follows:

  # Import "ViewController. h "# define imageCont 5 @ interface ViewController () <UIScrollViewDelegate> // Scroll View attribute @ property (weak, nonatomic) IBOutlet UIScrollView * ScllView; // pageControl attribute @ property (weak, nonatomic) IBOutlet UIPageControl * PageControl; // timer @ property (strong, nonatomic) NSTimer * timer; @ end @ implementation ViewController // remove the phone's top Status display-(BOOL) prefersStatusBarHidden {return YES;}-(void) viewDidLoad {[super viewDidLoad]; // create the position of the UIImageView in the Scrool view. // W. H and Y values are the same, but the X values of each UIImageView are different. CGFloat FloatW = self. scllView. frame. size. width; CGFloat FloatH = self. scllView. frame. size. height; CGFloat FloatY = 0; // five images are written to death. loop through all the images. // create a UIimageView and set the position of each UIimageView. for (int I = 0; I <imageCont; I ++) {UIImageView * imageView = [[UIImageView alloc] init]; // calculate the X value, CGFloat FloatX = I * FloatW; imageView. frame = CGRectMake (FloatX, FloatY, FloatW, FloatH); NSString * imagename = [NSString stringWithFormat: @ "img_0% I", I + 1]; imageView. image = [UIImage imageNamed: imagename]; // Add UIImageView to Scroll View [self. scllView addSubview: imageView];} // 2. the size of the content of the scroll view self. scllView. contentSize = CGSizeMake (FloatW * imageCont, 0); // remove the level indicator self. scllView. showsHorizontalScrollIndicator = NO; // set the page self. scllView. pagingEnabled = YES; // set the number of pages displayed by pageControl self. pageControl. numberOfPages = imageCont; // sets the proxy self. scllView. delegate = self; [self addTime];} // create a timer method-(void) addTime {self. timer = [NSTimer scheduledTimerWithTimeInterval: 2.0 target: self selector: @ selector (nextPage) userInfo: nil repeats: YES]; [[nsunloop currentRunLoop] addTimer: self. timer forMode: nsunloopcommonmodes];} // remove the timer-(void) removeTime {[self. timer invalidate]; self. timer = nil;}-(void) nextPage {int page = 0; if (self. pageControl. currentPage = imageCont-1) {page = 0;} else {page = self. pageControl. currentPage + 1;} CGPoint point = CGPointMake (page * self. scllView. frame. size. width, 0); // set the image to be displayed in the Scroll View [self. scllView setContentOffset: point animated: YES];} // proxy method // The method that comes with the proxy. When the view is rolling, it is always executed-(void) scrollViewDidScroll :( UIScrollView *) scrollView {CGFloat scrolViewW = self. scllView. frame. size. width; CGFloat pageCount = (self. scllView. contentOffset. x + scrolViewW * 0.5)/scrolViewW; self. pageControl. currentPage = pageCount;}-(void) scrollViewWillBeginDragging :( UIScrollView *) scrollView {// Permanently turn off the timer [self removeTime];}-(void) scrollViewDidEndDragging :( UIScrollView *) scrollView willDecelerate :( BOOL) d {[self addTime];} @ endView Code