UIScrollView, code is super simple, and uiscrollview is rolled

UIScrollView, code is super simple, and uiscrollview is rolled

Many applications now use circular scrolling, either images, views, or others. In summary, I wrote a demo to share it with you.

After reading the code, let's talk about the principle:

1. Create an empty project (I will not talk about it ).

2. Add a ViewController.

3. Add in appdelegate:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];        ViewController *vc = [[ViewController alloc] init];    self.window.rootViewController = vc;        self.window.backgroundColor = [UIColor whiteColor];    [self.window makeKeyAndVisible];    return YES;}

4. Check the files in ViewController. m:

<Span style = "font-size: 14px;"> # import "ViewController. h "@ interface ViewController () <UIScrollViewDelegate> @ property (nonatomic, strong) UIScrollView * readCannelScrollView; @ property (nonatomic, strong) UILabel * pageOneView; @ property) UILabel * pageTwoView; @ property (nonatomic, strong) UILabel * pageThreeView; @ end @ implementation ViewController-(void) dealloc {_ readCannelScrollView = nil; _ pageOneView = nil; _ pageTwoView = nil; _ pageThreeView = nil;}-(id) initWithNibName :( NSString *) bundle :( NSBundle *) handle {self = [super initWithNibName: bundle: role]; if (self) {// Custom initialization} return self;}-(void) viewDidLoad {[super viewDidLoad]; // set the container property to self. readCannelScrollView = [[UIScrollView alloc] initWithFrame: self. view. bounds]; [self. view addSubview: self. readCannelScrollView]; CGSize size = self. readCannelScrollView. contentSize; size. width = 320*3; self. readCannelScrollView. contentSize = size; self. readCannelScrollView. pagingEnabled = YES; self. readCannelScrollView. showsHorizontalScrollIndicator = NO; self. readCannelScrollView. delegate = self; self. readCannelScrollView. contentOffset = CGPointMake (0, 0); // end // Add page 1 self. pageOneView = [[UILabel alloc] initWithFrame: CGRectMake (0, 0,320, self. view. bounds. size. height)]; self. pageOneView. backgroundColor = [UIColor lightGrayColor]; self. pageOneView. text = @ "1"; self. pageOneView. font = [UIFont systemFontOfSize: 80]; self. pageOneView. textAlignment = NSTextAlignmentCenter; [self. readCannelScrollView addSubview: self. pageOneView]; // Add page 2 self. pageTwoView = [[UILabel alloc] initWithFrame: CGRectMake (320, 0,320, self. view. bounds. size. height)]; self. pageTwoView. backgroundColor = [UIColor greenColor]; self. pageTwoView. text = @ "2"; self. pageTwoView. font = [UIFont systemFontOfSize: 80]; self. pageTwoView. textAlignment = NSTextAlignmentCenter; [self. readCannelScrollView addSubview: self. pageTwoView]; // Add page 3 self. pageThreeView = [[UILabel alloc] initWithFrame: CGRectMake (640, 0,320, self. view. bounds. size. height)]; self. pageThreeView. backgroundColor = [UIColor grayColor]; self. pageThreeView. text = @ "3"; self. pageThreeView. font = [UIFont systemFontOfSize: 80]; self. pageThreeView. textAlignment = NSTextAlignmentCenter; [self. readCannelScrollView addSubview: self. pageThreeView];}-(void) didReceiveMemoryWarning {[super didreceivemorywarning];} # pragma mark-scroll delegate <span style = "color: #996633; ">-(void) scrollViewDidEndDecelerating :( UIScrollView *) scrollView {NSLog (@" scrollView. contentOffset. x = % f ", scrollView. contentOffset. x); CGFloat pageWidth = scrollView. frame. size. width; int currentPage = floor (scrollView. contentOffset. x-pageWidth/2)/pageWidth) + 1; if (currentPage = 0) {UILabel * tmpTxtView = self. pageThreeView; self. pageThreeView = self. pageTwoView; self. pageTwoView = self. pageOneView; self. pageOneView = tmpTxtView;} if (currentPage = 2) {// change the pointer UILabel * tmpTxtView = self. pageOneView; self. pageOneView = self. pageTwoView; self. pageTwoView = self. pageThreeView; self. pageThreeView = tmpTxtView;} // restore self. pageOneView. frame = (CGRect) {0, 0, self. pageOneView. frame. size}; self. pageTwoView. frame = (CGRect) {320,0, self. pageTwoView. frame. size}; self. pageThreeView. frame = (CGRect) {640,0, self. pageThreeView. frame. size}; self. readCannelScrollView. contentOffset = CGPointMake (320, 0) ;}@ end </span>

5. The principle is explained. Let's take a look at how to implement Circular scrolling for a scrollview. See:

A. Use three views for cyclic scrolling. P1, P2, and P3 (pageOneView, pageTwoView, and pageThreeView in the Program)

B. (except for starting to run, contentoffset. x = 0) It is critical to keep P2 in the middle to Implement Circular scrolling.

C. P2 at this time in the middle (such as) contentoffset. x = 320, then slide to the left, P3 in the middle page, that is, contentoffset. x = 640.

D. At this time, I will definitely think about whether to move P1 to the position of TEMP0. You are really smart. But in order to write a general method, it is wrong to move the position. can we ensure that the Order P1, P2, and P3 remains unchanged forever? The answer is YES.

E.1> the P1, P2, and P3 sequence are always maintained, and the position (frame) must be the same. 2> Use P2 to center.

F. to meet the requirements of the two items in e, first let's look at the first part of e. There is a red virtual box on the rightmost side of the sliding interface. If it is assumed (it is not actually moved) I put P1 in that position, and the order is P2 \ P3 \ P1 (TEMP0). To ensure the order, I need to exchange pointers, But if I directly put the pointer P1 = P2, when executing P3 = P1, there will be problems. You know, you need to use the temporary pointer variable to change the value.

G. the pointer is replaced, but the position is not changed to contentoffset. x = 640. We need scrollView. contentoffset. x = 320.

H. The same is true for moving left and right.


6. Program Analysis description:

<span style="font-size:14px;">CGFloat pageWidth = scrollView.frame.size.width;int currentPage = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;</span>

The floor is calculated as 0, 1, and 2. You can use 0 or 2 to determine whether the user is sliding left or right to achieve circular scrolling, when the background is used with arrays, images can be rolled cyclically!

Click to download source code

Code for Scrolling up and loop

You can refer to this seamless up and down scroll to add a fixed height width pause Effect
It can be used to scroll up text.
Reference: www.blueidea.com/..20.12229

Code for continuous scrolling of images

The code for continuously scrolling images (Up, down, left, right) is as follows:
<Base

Href = "image2.sina.com.cn/..image/">

<Div id = demo style = "overflow: hidden; width: 128px; height: 300px;">
<Div id = demo1>
<br> <br> <br>
<br> <br> <br>
<br> <br> <br>
<br> <br> <br>
<br> <br> <br>
<br> <br> <br>
<br> <br> <br>
<br> <br> <br>