IOS development Note 6: Image carousel and Its infinite loop effect, ios notes

IOS development Note 6: Image carousel and Its infinite loop effect, ios notes

In normal times, the advertising space in the APP or rolling news images are used for image carousel. There are two main implementation methods: ScrollView + ImageView, and CollectionView, this method is summarized today.

1. Implementation of image carousel Effect

The main idea is to set the size of the ScrollView based on the total number and width and height of the image. Switching an image is equivalent to moving the image width on the ScrollView and adding a timer, implement automatic carousel.

Set ScrollView and PageControl. The contentSize of ScrollView is determined based on the number of images. Note that the pagingEnabled attribute is enabled to ensure that the entire page is moved. Similarly, pageControl is determined based on the number of images, each page represents an image.

ContentOffset updates the page number.

The timer is set to scroll and update every 2 seconds. In fact, the page number is updated every 2 seconds. Based on the page number changes, move the ScrollView and move the distance of an image each time.

It should also be noted that the automatic carousel effect will conflict with the manual drag and drop ScrollView, that is, the ScrollView may automatically move and update the image when the ScrollView is manually dragged, obviously, this effect does not meet the user's habits. In this case, you need to process the ScrollView proxy event, that is, to stop the timer when dragging the ScrollView, and then enable the timer After dragging.

So here is the end? Let's take a look:

There are two problems:

(1) first, the image cannot be moved when it is moved to the last image. If the page is a new feature of the APP, the scrolling effect is enough, however, this effect is not good enough in advertising spaces or rolling news. Generally, when you scroll to the last image, the drag and drop operation will move to the first image to implement a rolling loop effect.

(2) When the timer automatically rotates an image, the image is indeed rotated cyclically, but you will find that ScrollView is pulled from the last image to the first image, the results are not ideal.

The solution is as follows.

2. Implement the infinite loop Effect of image carousel

When talking about the first problem, the ScrollView cannot be moved when it is moved to the last image. This is because the ScrollView has been moved to the end, and the picture is arranged in sequence, so it cannot be moved.

The solution is to use another method to achieve the image carousel effect. Only three imageviews are displayed on the ScrollView, and the middle ImageView is always displayed on the screen, the ImageView on the left and right represent the previous image and the next image respectively. When the screen moves, the image view in the middle changes, and the ImageView on both sides also changes. The two border conditions are as follows:

(1) When the screen shows the last image, the right ImageView, that is, the next image, should be the first image;

(2) When the screen shows the first image, the ImageView on the left is also the last image.

In this way, the change of the three imageviews results in an infinite loop of image carousel. Refer:Http://www.cnblogs.com/kenshincui/p/3913885.html

Compared with the previous results, there are some changes, mainly including:

(1) You only need to set three imageviews for ScrollView, and the middle ImageView is displayed by default.

(2) the image data in the three imageviews is rapidly changed based on the movement of the ScrollView.

 

(3) After the ImageView is updated, the ScrollView is secretly pulled back to the middle ImageView position, so that the visual effect achieves an infinite loop.

 

:

 

However, this problem occurs when an automatic loop of image carousel is implemented after the timer is added. The main problem is that the first image is displayed during initialization and the ScrollView is automatically moved according to the timer settings, find a project of another person on code4App. The same idea is used and ScrollView is encapsulated separately for processing. This problem has been solved.

Refer:Http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4