Android UI design and development using viewpager to implement the welcome guide page

This series of articles will take the example development of a program as the main line to explain, in order to achieve a step-by-step learning effect, which can better deepen everyone's intention of why the program should be written like this. Theory and practical application can achieve twice the result with half the effort, can't they?

There is the download address of the source code at the bottom. Almost every line of the source code has comments, which are easy to understand and very clear. If you don't understand, you can leave a message. The blogger will try his best to answer questions and solve problems for you. I hope you can give more support. OK, don't say much. Let's return to today's topic.

1、 Effect diagram of implementation

Maybe I have formed such a habit. Every time I look at other people's code, I must first look at the effect achieved by the implementation effect diagram. Is it similar to the effect I want to achieve? There is only truth when there is a diagram, ha ha.

2、 Preparation before coding

Viewpager is a new feature provided after Android 3.0, so in order to make your application downward compatible, you must support android-support-v4.jar, an additional package provided by Google. Just search.

3、 Project structure diagram

4、 Specific coding implementation

1. The layout interface is relatively simple. Add the viewpager component and the guide dot and activity at the bottom_ main.xml:

2. A selector is used to control the color of the smaller picture. Point.xml:

3. Viewpager adapter code, viewpageradapter.java:

4. Main program entry class, mainactivity.java:

This article is mainly to enable you to implement a simple example and let your program move first, so that you can have the confidence and courage to challenge more complex UI design and development. In the following chapters, the blogger will also explain with the same vivid and passionate explanation to bring you more complex demonstrations and codes, such as the development of the guidance interface imitating wechat and Renren, With the animation effect, it will run a little more dazzling.

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.