Viewpager realizes the guide interface with guide dot and automatic jump

The method of guiding small dots is actually very simple. You can directly place the same amount of ImageView as the guide page on the layout, and then change the image resources when switching pages. By the way, some apps simply add guide dots when making guide page pictures. This method is obviously the simplest. However, since it is attached to the picture, it slides with the picture during switching. Obviously, the effect does not look very good, even when we need to add the switching animation of small dots, Then you can't do that.

First, let's look at the implementation effect

Here, our dot image resources are drawn by shape. I make it very casual here, so it's very rough. If you don't think it's very beautiful, you can modify it yourself. If you are using PNG resources directly, you can skip this step directly.

shape_ ring_ black_ Normal.xml (small black circle)

shape_ circle_ blue_ Press.xml (small blue dot)

Another selector. You can directly use the setselected method to switch pictures. If true, you can switch to shape_ circle_ blue_ Press.xml, otherwise it is shape_ ring_ black_ Normal.xml, remember that the default item of the selector must be at the end, otherwise it will have no effect. You can also directly replace image resources when switching pages.

selector_ Circle.xml (small circle selector)

The page layout is very simple. Viewpage is the key to display the main content, and another row of ImageView displays small dots. Because we need a button on the last page to jump to the main interface, we add a button to hide it first.

activity_ guide.xml

The next step is to add the data source of each page and inherit the pageradapter class

GuideAdapter.java

Next, let's see how to implement it. The code is very simple and easy to understand. Post it directly.

GuideAdapter.java

What if each page is not as simple as a control? At this time, we use fragment, and the layout is almost the same, but the buttons on the last page can be transferred to the last fragment layout, so we can directly delete the button. Here we can't inherit the activity, but we need to base the fragmentactivity. Then we need to get three fragments. The layout here is just a textview, and the last page has a button. Let's just take a look at the last fragment.

fragment_ guidec.xml

GuidecFragment.java

Of course, the adapter used earlier is useless. You need to inherit the fragmentpageradapter class here.

GuideAdapter.java

GuideActivity.java

The results are as follows:

You can also see a countdown from above. How to realize the automatic jump of countdown? We can directly open a thread to complete the countdown operation. When the timing is 0, it will automatically jump, but the user is likely to slide back to the previous interface, or the user may manually click the jump button to jump. Therefore, we should control the closing and opening of the thread. The code is posted as follows:

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.