Detailed explanation of Android imitation Jingdong Taobao automatic infinite cycle rotation control

In the development of app, it is often necessary to realize the automatic infinite rotation advertising column similar to JD Taobao, so I wrote one myself. The following is my idea and process of customizing the control.

1、 Custom control properties

The new custom control sliderlayout inherits from relativelayout. The first thing to consider is that the custom control needs to extend those properties and list them. Here is to realize the infinite rotation advertising column similar to JD Taobao. The first thing to think of is the duration of rotation, the style of rotation indicator, and so on. I've listed some here and incorporated them into the code.

1. Extended properties

(1) Whether to turn on the function of automatic rotation. (2) The graphic style of indicator is generally circular and square. (3) The position of the indicator is usually the bottom or top. (4) Style of indicator when selected and unchecked: color, height, width, interval, etc. (5) Length of rotation. (6) If you load a network picture, you need a default picture and an error picture.

2. Add these extended attributes in the attrs.xml file.

2、 Initialization of custom rotation control

1. Gets the value of the extended property

Get the extended style in the custom sliderlayout, and then get the corresponding attribute value according to the style. It is best to set the default value first.

2. Initialize control

According to the functions to be implemented here, we first need an image switcher imageswticher and an indicator. Here we use ImageView.

3. Initialize the first selected picture

Write a function specifically for indicator switching, and then call it directly during initialization. Selecting the first indicator is to select the first picture.

The function code is as follows.

Call to select the first graph.

switchIndicator(0);

3、 Loading of pictures

1. Loading of network pictures

Here, Picasso framework is used to load pictures, load and display pictures according to the URL, and also display the loading progress of pictures. Here, a dialog prompt box is needed. The style of dialog is best customizable.

The following is the picture loading prompt process.

2. Loading of resource pictures

It's not enough to only load network pictures. You also need to be able to load resource pictures. The method of loading resource pictures is simpler.

4、 Animate picture switching

Set the animation effect of the picture from left to right and from right to left, and when sliding to the picture, the indicator will change together. Here is the animation from left to right.

The code when sliding from right to left is the same as this, that is, it changes the direction and needs to be defined by yourself.

5、 Define the click event of the picture

1. Define an interface to listen for events

Just customize an interface in the custom control to listen for events.

2. Click events in onTouch.

Here, we need to explain why it is processed in ontouch. Ontouch is a touch event. In the process of sliding, the user touches the screen, so we can judge whether it slides left or right according to the comparison between the X coordinate when the user clicks and the X coordinate when clicking. In this way, it will conflict with the onclick event, so we came up with a method, If it is within the range, it defaults to click event, and if it is outside the range, it is sliding event.

6、 Renderings

Having said that, I should have some ideas. Now let's see the effect.

The source code has been opened and placed on GitHub. You are welcome to give guidance and suggestions. http://www.github.com/LT5505/SliderLayout

The above is a detailed explanation of the Android imitation Jingdong Taobao automatic infinite cycle rotation control introduced by Xiaobian. I hope it will help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!