IOS Ui-uiscrollview controls implement picture Carousel (uipagecontrol-paging Indicator)
Last Update:2016-01-03
Source: Internet
Author: User
<span id="Label3"></p><p><p>first, the realization Effect</p></p><p><p>Auto-carousel for images</p></p><p><p></p></p><p><p>second, the implementation of the Code</p></p><p><p>Layout in Storyboard</p></p><p><p></p></p><p><p>Code:</p></p><pre><span style="color: #008080;"><span style="color: #008080;">1</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">ViewController.h</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #008080;"><span style="color: #008080;">2</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">#define</span></span>Hmimagecount 5<span style="color: #008080;"><span style="color: #008080;">3</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">@interface</span></span>Viewcontroller () <UIScrollViewDelegate><span style="color: #008080;"><span style="color: #008080;">4</span></span>@property (weak, Nonatomic) Iboutlet Uiscrollview *<span style="color: #000000;"><span style="color: #000000;">scrollView;</span></span><span style="color: #008080;"><span style="color: #008080;">5</span></span>@property (weak, Nonatomic) Iboutlet Uipagecontrol *<span style="color: #000000;"><span style="color: #000000;">pagecontrol;</span></span><span style="color: #008080;"><span style="color: #008080;">6</span></span>@property (nonatomic, Strong) Nstimer *<span style="color: #000000;"><span style="color: #000000;">timer;</span></span><span style="color: #008080;"><span style="color: #008080;">7</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span><span style="color: #008080;"><span style="color: #008080;">8</span></span> <span style="color: #008080;"><span style="color: #008080;">9</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">@implementation</span></span><span style="color: #000000;"><span style="color: #000000;">Viewcontroller</span></span><span style="color: #008080;"><span style="color: #008080;">Ten</span></span> <span style="color: #008080;"><span style="color: #008080;"></span> one</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) Viewdidload {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #000000;"><span style="color: #000000;">[super viewdidload];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span>CGFloat Imagew =<span style="color: #000000;"><span style="color: #000000;">self.scrollView.bounds.size.width;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>CGFloat Imageh =<span style="color: #000000;"><span style="color: #000000;">self.scrollView.bounds.size.height;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>CGFloat Imagey =<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>CGFloat ImageX =<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #0000ff;"><span style="color: #0000ff;"></span> for</span>(nsinteger i =<span style="color: #800080;"><span style="color: #800080;">0</span></span>; I < hmimagecount; i++<span style="color: #000000;"><span style="color: #000000;">) {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>Uiimageview *imageview =<span style="color: #000000;"><span style="color: #000000;">[[uiimageview alloc] init];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Stitching Picture Name</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>NSString *imagename = [nsstring stringwithformat:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Img_%02ld</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span>, i +<span style="color: #800080;"><span style="color: #800080;">1</span></span><span style="color: #000000;"><span style="color: #000000;">];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span>Imageview.image =<span style="color: #000000;"><span style="color: #000000;">[UIImage imagenamed:imagename];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> at</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">calculate the X of a picture</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>ImageX = Imagew *<span style="color: #000000;"><span style="color: #000000;">i;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Imageview.frame =<span style="color: #000000;"><span style="color: #000000;">cgrectmake (imageX, imagey, imagew, imageh);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">add each picture to the ScrollView</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">[self.scrollview addsubview:imageview];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;"></span> in</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> to</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">1. Set the scroll range of the ScrollView</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>Self.scrollView.contentSize = Cgsizemake (imagew * hmimagecount,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">);</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">2. Set Paging</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>self.scrollView.pagingEnabled =<span style="color: #000000;"><span style="color: #000000;">YES;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> *</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">3. Hide the horizontal scroll bar</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span>Self.scrollView.showsHorizontalScrollIndicator =<span style="color: #000000;"><span style="color: #000000;">NO;</span></span><span style="color: #008080;"><span style="color: #008080;">Panax Notoginseng</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">4. Hide the vertical scroll bar</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Self.scrollView.showsVerticalScrollIndicator =<span style="color: #000000;"><span style="color: #000000;">NO;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Set Total pages</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span>Self.pageControl.numberOfPages =<span style="color: #000000;"><span style="color: #000000;">hmimagecount;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">set current on page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span>Self.pageControl.currentPage =<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">sets the color of the indicator on the current page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span>Self.pageControl.currentPageIndicatorTintColor =<span style="color: #000000;"><span style="color: #000000;">[uicolor purplecolor];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">the default color</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Self.pageControl.pageIndicatorTintColor =<span style="color: #000000;"><span style="color: #000000;">[uicolor yellowcolor];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">5. Setting up the Srollview agent</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Self.scrollview.<span style="color: #0000ff;"><span style="color: #0000ff;">Delegate</span></span>=<span style="color: #000000;">self <span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;">Wuyi</span></span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">6. Adding Timers</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">[self timer];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> wu</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> about</span> <span style="color: #008080;"><span style="color: #008080;"></span> $</span> <span style="color: #008080;"><span style="color: #008080;"></span> -</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) NextPage {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">1. Get the current page number</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Nsinteger page =<span style="color: #000000;"><span style="color: #000000;">self.pageControl.currentPage;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> a</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">2. Judging is not the last page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(page = = hmimagecount-<span style="color: #800080;"><span style="color: #800080;">1</span></span><span style="color: #000000;"><span style="color: #000000;">) {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">if it's the last page, go back to page No. 0</span> .</span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>page =<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> $</span>}<span style="color: #0000ff;"><span style="color: #0000ff;">Else</span></span><span style="color: #000000;"><span style="color: #000000;"> {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">if it's not the last page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>page++<span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">3. Use the width of each page * (page + 1) = = To calculate the Contentoffset.x in addition to the next page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>CGFloat OffsetX = page*<span style="color: #000000;"><span style="color: #000000;">self.scrollView.frame.size.width;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> in</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">4. Set the Uiscrollview contentoffset equal to the new offset value</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>[self.scrollview Setcontentoffset:cgpointmake (offsetX,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">) animated:yes];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> about</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">How to implement ScrollView scrolling</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Scrollviewdidscroll: (uiscrollview *<span style="color: #000000;"><span style="color: #000000;">) ScrollView {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> +</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">how to calculate the current scroll to the first page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">1. Get the offset in the x-direction of the scroll</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>CGFloat OffsetX =<span style="color: #000000;"><span style="color: #000000;">self.scrollview.contentoffset.x;</span></span><span style="color: #008080;"><span style="color: #008080;">Bayi</span></span>OffsetX = OffsetX + self.scrollview.frame.size.width/<span style="color: #800080;"><span style="color: #800080;">2</span></span><span style="color: #000000;"><span style="color: #000000;">;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">2. By dividing the offset in the x direction by the width of the image, the dealer is currently scrolling to the first page</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #0000ff;"><span style="color: #0000ff;">int</span></span>page = offsetx/<span style="color: #000000;"><span style="color: #000000;">self.scrollView.frame.size.width;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">3. Assign the page number to Uipagecontrol</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>Self.pageControl.currentPage =<span style="color: #000000;"><span style="color: #000000;">page;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Start dragging</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) scrollviewwillbegindragging: (uiscrollview *<span style="color: #000000;"><span style="color: #000000;">) ScrollView {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Let the timer stop</span> .</span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">[self.timer invalidate];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>Self.timer =<span style="color: #000000;"><span style="color: #000000;">nil;</span></span><span style="color: #008080;"><span style="color: #008080;">94</span></span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">turn on the timer when you stop dragging</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) scrollviewdidenddragging: (uiscrollview *<span style="color: #000000;"><span style="color: #000000;">) ScrollView willdecelerate: (BOOL) decelerate {</span></span><span style="color: #008080;"><span style="color: #008080;">98</span></span> <span style="color: #008080;"><span style="color: #008080;"></span> about</span> <span style="color: #000000;"><span style="color: #000000;">[self timer];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> -</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;">101</span></span> <span style="color: #008080;"><span style="color: #008080;">102</span></span> <span style="color: #008080;"><span style="color: #008080;">103</span></span>-(nstimer *<span style="color: #000000;"><span style="color: #000000;">) Timer {</span></span><span style="color: #008080;"><span style="color: #008080;">104</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(_timer = =<span style="color: #000000;"><span style="color: #000000;">Nil) {</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #008080;"><span style="color: #008080;">106</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;">create <span style="color: #008000;">a Timer control by scheduledtimerwithtimeinterval this method, and then start it automatically</span> .</span><span style="color: #008080;"><span style="color: #008080;">107</span></span>_timer = [nstimer Scheduledtimerwithtimeinterval:<span style="color: #800080;"><span style="color: #800080;">1.0</span></span><span style="color: #000000;"><span style="color: #000000;">target:self selector: @selector (nextPage) userinfo:nil repeats:yes];</span></span><span style="color: #008080;"><span style="color: #008080;">108</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Add the current timer to the current run loop and specify it as a common mode so that the main thread can take a little time to focus on our timers when it executes---modify the Nstimer to the same priority as the other controls</span></span><span style="color: #008080;"><span style="color: #008080;">109</span></span> <span style="color: #000000;"><span style="color: #000000;">[[nsrunloop currentrunloop] Addtimer:_timer formode:nsrunloopcommonmodes];</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;"> }</span></span><span style="color: #008080;"><span style="color: #008080;">111</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">_timer;</span></span><span style="color: #008080;"><span style="color: #008080;"></span> the</span> <span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #008080;"><span style="color: #008080;">113</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span></pre><p><p>Tip: The following two properties have been wired to the controls in Storyboard.</p></p><p><p>@property (weak, nonatomic) iboutlet uiscrollview *scrollview;</p></p><p><p>@property (weak, nonatomic) iboutlet Uipagecontrol *pagecontrol;</p></p><p><p>Supplement: Timer Nstimer</p></p><p><p>Timers are designed to be used at intervals of time to do some long-spaced operations.</p></p><p><p>Nstimeinterval: how long and how many pieces to operate once</p></p><p><p>Target: who to manipulate</p></p><p><p>Selector: the method to be manipulated</p></p><p><p>UserInfo: Passing parameters</p></p><p><p>Repeats: whether to repeat</p></p><p><p>Self.timer = [nstimer scheduledtimerwithtimeinterval:1 target:self selector: @selector (nextimage) Userinfo:nil Repeats : YES];</p></p><p><p>IOS Ui-uiscrollview controls implement picture Carousel (uipagecontrol-paging Indicator)</p></p></span>
