Ios development-UI-UIScrollView,-ui-uiscrollview

Ios development-UI-UIScrollView,-ui-uiscrollview

[Note] reprinted, please indicate the source of blog Park-eat Tang sick Wukong http://www.cnblogs.com/hukezhu/

1. What is UIScrollView?

UIScrollView is a scrolling view control that can be used to display a large amount of content and view all the content through scrolling.

Because the screen size of a mobile device is limited, the content displayed directly in front of the user is also quite limited. when the displayed content is larger than the screen size, we need to scroll through the mobile phone screen to view more content. However, normal UIView does not support the scrolling function and cannot display too much content, therefore, this UIScrollView can display a large amount of content.

2. Basic use of UIScrollView

2.1 steps:

• • Drag a UIScrollView In the storyboard
  • Put the content to be rolled in UIScrollView
  • Set the contentSize attribute of UIScrollView (rolling range)

2.2 Cause Analysis of Rolling failure:

• • First, check whether contentSize is set.
  • View its properties scrollEnabled (cannot be dragged if it is NO)
  • View the attributes of userInteractionEnabled. If the parameter is NO, you cannot drag it)

　　　

3. Common UIScrollView attributes

// UIScrollView common attributes // scroll position the position in the upper left corner of the screen is relative to the position in the upper left corner of the image, and the position in the upper left corner of the image is 0, 0 // The offset of scrollView to the content @ property (nonatomic) CGPoint contentOffset; // default CGPointZero // scroll range @ property (nonatomic) CGSize contentSize; // default CGSizeZero // The top, bottom, and bottom of the column in a counterclockwise order, increasing the margin. By default, this distance is not displayed. @ property (nonatomic) UIEdgeInsets contentInset is available only after scrolling. // default UIEdgeInsetsZero. add additional scroll area around content // whether to enable the spring effect. @ Property (nonatomic) BOOL bounces is enabled by default; // default YES. if YES, bounces past edge of content and back again // enable rolling @ property (nonatomic, getter = isScrollEnabled) BOOL scrollEnabled; // horizontal scroll bar @ property (nonatomic) BOOL showsHorizontalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking // vertical scroll bar @ property (nonatomic) BOOL showsVerticalScrollIndicator; // default YES. show indicator while we are tracking. fades out after tracking

 

 

4. UIScrollView proxy (delegate)

Many times, we want to do something when UIScrollView is rolling or rolling to a certain position or is about to stop rolling. To implement this function, the precondition is to listen to the entire Rolling Process of UIScrollView, when a series of UIScrollView scrolling occurs, it will automatically notify its proxy object and send the corresponding message to its proxy so that the proxy can know its scrolling status. that is to say, to listen to the rolling process of UIScrollView, we must first set a proxy object for it and then learn its rolling process through the proxy.

UIScrollView declares the attributes of a proxy.

@property(nonatomic,assign) id<UIScrollViewDelegate>      delegate;                       // default nil. weak reference

 

Therefore, we can use it directly.

To set the scrollView Proxy:

• • First, follow the UIScrollViewDelegate protocol.
  • Set proxy (you can do this by dragging lines or code)
  • Methods In Implementation Protocol

 

 

The following uses the Knowledge mentioned above through a small Application

Image carousel (for example, a rolling Product Overview page that is automatically played on an e-commerce page, that is, an advertisement ):

Function Analysis:

• • The interface is continuously carousel.
  • Automatically enters the next
  • When you drag an image, the scrolling rotation is stopped.
  • When the user stops dragging, the carousel starts automatically.

Step analysis:

• • Build a UI (A UIScrollView and a UIPageControl)
  • Drag to get these two attributes
  • Code to create a UIImageView and add an image
  • Set the timer and automatically call the "next page" method to enable automatic redirect.

Here, we will briefly introduce the Timer: NSTimer

Main function: Execute the specified task at the specified time; execute the specified task at intervals

 

 

There are two ways to start the timer:

　　

// Method 1 // timerWithTimeInterval you need to manually add timer to the message loop NSTimer * timer = [nst1_timerwithtimeinterval: 2.0 target: self selector: @ selector (nextImage) userInfo: nil repeats: YES]; nsunloop * loop = [nsunloop currentRunLoop]; [loop addTimer: timer forMode: NSDefaultRunLoopMode]; // This method is only the method to be executed by timer in advance [timer fire]; // scheduledTimerWithTimeInterval automatically adds timer to the message loop nst1_* timer = [nst1_scheduledtimerwithtimeinterval: 1.0 target: self selector: @ selector (nextImage) userInfo: nil repeats: YES];

You can use the-(void) invalidate method to stop the timer. However, once the timer is stopped, the task cannot be executed again. You can only create a new timer.

 

Storyboard and Structure

 

Program source code:

ViewController. m

1 // 2 // ViewController. m 3 // 03-image carousel 4 // 5 // Created by hukezhu on 15/5/18. 6 // 7 // 8 9 # import "ViewController. h "10 11 @ interface ViewController () <UIScrollViewDelegate> 12 13/** 14 * scrollView attribute 15 */16 @ property (weak, nonatomic) IBOutlet UIScrollView * scrollView; 17 18/** 19 * pageControl attribute 20 */21 @ property (weak, nonatomic) IBOutlet UIPageControl * pageControl; 22 23 24/** 25 * Declare a timer property 26 */27 @ property (nonatomic, strong) NSTimer * timer; 28 29 @ end 30 31 @ implementation ViewController 32 33-(void) viewDidLoad {34 [super viewDidLoad]; 35 36 // first create an imageView and add the image 37 CGFloat imageW = self. scrollView. frame. size. width; 38 CGFloat imageH = self. scrollView. frame. size. height; 39 CGFloat imageY = 0; 40 for (int I = 0; I <5; I ++) {41 UIImageView * imageView = [[UIImageView al Loc] init]; 42 CGFloat imageX = I * imageW; 43 imageView. frame = CGRectMake (imageX, imageY, imageW, imageH); 44 imageView. image = [UIImage imageNamed: [NSString stringWithFormat: @ "img _ % 02d", I + 1]; 45 [self. scrollView addSubview: imageView]; 46} 47 // set the contentSize of scrollView 48 self. scrollView. contentSize = CGSizeMake (5 * imageW, 0); 49 // implement the paging function 50 self. scrollView. pagingEnabled = YES; 51 // 52 s of the hidden level Elf. scrollView. showsHorizontalScrollIndicator = NO; 53 54 55 // drag-and-drop sets the scrollview proxy 56 self. scrollView. delegate = self; 57 58 59 // Add timer 60 [self startTimer]; 61 62 63} 64 65/** 66 * Add timer 67 */68-(void) startTimer {69 70 // Add a Timer: 71 self. timer = [nst1_timerwithtimeinterval: 2.0 target: self selector: @ selector (nextPage) userInfo: nil repeats: YES]; 72 73 // [[nsunloop mainRunLoop] addTimer: sel F. timer forMode: NSDefaultRunLoopMode]; 74 [[nsunloop mainRunLoop] addTimer: self. timer forMode: nsunloopcommonmodes]; 75 76} 77/** 78 * Stop timer 79*80 */81-(void) stopTimer :( nstmer *) timer {82 // stop the timer 83 [timer invalidate]; 84 // clear the timer (because once the timer is stopped, it cannot be used again, so it is cleared immediately after it is stopped) 85 timer = nil; 86} 87 88/*** 89 * Next page function 90 */91-(void) nextPage {92 93 NSInteger page = self. pageControl. currentPage; 94 if (Page = self. pageControl. numberOfPages-1) {95 page = 0; 96} else {97 page ++; 98} 99 self. pageControl. currentPage = page; 100 101 // change the image to 102 CGFloat contentOffsetX = page * self. scrollView. frame. size. width; 103 104 105 106 // animation 107 [UIView animateWithDuration: 1.0 animations: ^ {108 self. scrollView. contentOffset = CGPointMake (contentOffsetX, 0); 109}]; 110} 111 112/** 113 * call 114*115 */116- (Void) scrollViewDidScroll :( UIScrollView *) scrollView {117 118 // retrieve the value of x of the current contentOffset 119 CGFloat offsetx = scrollView. contentOffset. x; 120 // calculate the current page number. The round method is used to round the 121 CGFloat page = round (offsetx/scrollView. frame. size. width); 122 123 if (page! = Self. pageControl. currentPage) {124 self. pageControl. currentPage = page; 125} 126 127} 128 129/** 130 * Call 131*132 */133-(void) scrollViewWillBeginDragging (UIScrollView *) when the user is about to start dragging *) scrollView {134 135 // stop the timer 136 [self stopTimer: self. timer]; 137 138} 139/** 140 * when the user is about to stop dragging, call 141*142 */143-(void) scrollViewDidEndDragging :( UIScrollView *) scrollView willDecelerate :( BOOL) decelerate {144 145 // start timer 146 [self startTimer]; 147} 148 @ end