iOS Development Note 6: Picture carousel and its infinite loop effect

Usually in the app ad bit, or scrolling news pictures and so on is the picture carousel This effect, there are two main ways of implementation, one is Scrollview+imageview, the other is through CollectionView, Today's summary is ScrollView this way.

1. Image Carousel Effect Implementation

The main realization of the idea is: according to the total number of pictures and the width of a good scrollview size, each switch to a picture is equivalent to a picture width on the ScrollView movement behavior, and add timers, to achieve automatic carousel.

, set the ScrollView and Pagecontrol,scrollview contentsize according to the number of pictures, pay attention to enable the pagingenabled this property, to ensure that the whole page movement, The same pagecontrol is determined according to the number of pictures, each page represents a picture.

The picture naming uses the numeral serial number way, is convenient to use, needs to note is, the Pagecontrol is starts from 0, namely 0 corresponds image1,1 corresponds image2 ... In turn

Load the picture and set the ready image in the ScrollView, and the pictures will be placed next to each other in the ScrollView.

By ScrollView's proxy method, the page number is updated according to Contentoffset at the end of the ScrollView scroll.

Timer settings, here is set to every 2 seconds of rolling updates, in fact, every 2 seconds to update the page number, according to the change in the page number, let ScrollView follow the move, each time the distance to move a picture

It is also important to note here, because the addition of the timer has the effect of automatic rotation, and manual drag ScrollView conflict, that is, manual drag ScrollView process ScrollView may automatically move the updated picture, obviously this effect is not in line with the user's habits, In this case, you need to handle the agent event in ScrollView, that is, stop the timer when you start dragging ScrollView, and then turn on the timer after dragging.

Is this the end of it? Let's see:

Here are two questions:

(1) The first move to the last picture can not be moved, if it is the creation of new features of the app page, such a scrolling effect is already possible, but if the ad bit or scrolling news in these scenarios this effect is not good enough, generally scroll to the last picture, continue to drag will move to the first picture, Implements a scrolling loop effect.

(2) Timer auto-carousel picture, indeed the picture cycle carousel, but look carefully will find that ScrollView is from the final position of the image to pull back to the position of the first picture, the effect is not ideal.

The solution goes ahead.

2. Image rotation Infinite loop effect realization

Just speaking of the first question, ScrollView moved to the last picture because the ScrollView has moved to the end, and the picture is arranged in order, and nature cannot move.

The solution is, we change a way to achieve the picture carousel effect, ScrollView only put three imageview, the screen always shows the middle of the ImageView, the left and right of the ImageView respectively represents the previous picture and the next picture, when the screen moves, The ImageView changes in the middle, while the left and right sides of the ImageView also change with the two boundary conditions:

(1) When the last picture is displayed on the screen, the ImageView on the right is also the next stop. The picture should be the first one at the beginning;

(2) When the screen shows the first picture at the beginning, the ImageView on the left is the last picture.

In this way, three imageview are constantly changing, resulting in an infinite loop of image rotation. Reference:http://www.cnblogs.com/kenshincui/p/3913885.html

There are some changes relative to the previous effect, mainly:

(1) ScrollView only need to set three ImageView, and display the middle ImageView by default

(2) According to the movement of ScrollView, quickly change three imageview picture data

(3) ImageView after the update, secretly put ScrollView back to the middle of the imageview position, so that the visual effect on the realization of an infinite loop effect

：

However, here in the timer after the implementation of automatic rotation of the picture carousel encountered problems, mainly initialized to display the first picture and automatic movement according to the timer set ScrollView There are some conflicts, find other people on the Code4app project, using the same ideas, The ScrollView is individually encapsulated for processing and the problem has been resolved.

Refer to:http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4

iOS Development Note 6: Picture carousel and its infinite loop effect