Picture Carousel Problem

Source: Internet
Author: User

1. Picture 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.       Contentoffset Update page numbers. Timer settings, here is set to every 2 seconds rolling update, 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 to move a picture of the distance here also need to note that because the added timer has automatic carousel effect, 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, then need to be handled in the ScrollView agent event, Stop the timer when you start dragging the ScrollView, and then turn the timer on after the drag is over. 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 the first image that should be 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
  Relative to the previous effect, there are some changes, mainly: (1) ScrollView only need to set three ImageView can, and the default display of the middle ImageView (2) According to the ScrollView movement, quickly change three imageview in the 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 but, here in the timer after the implementation of the picture Carousel automatic cycle encountered problems, The main is to initialize the display of the first picture with the automatic movement according to the timer set ScrollView There are some conflicts, find others on the Code4app a project, using the same idea, individually encapsulated scrollview for processing, has resolved the problem.

Picture Carousel Problem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.