Shulou(Shulou.com)06/03 Report--

Editor to share with you how Android custom guide to play ViewPager, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Introduction to ViewPager:

ViewPager (android.support.v4.view.ViewPager) is a class in the android expansion package v4 package, which allows users to switch between the current view and the left and right sides to achieve the effect of sliding switch.

Note:

The ViewPager class directly inherits the ViewGroup class, which means that like the LinearLayout we often deal with, it is a container in which we need to add what we want to display.

The ViewPager class needs a PagerAdapter adapter class to provide it with data, which is similar to ListView.

Basic use of ViewPager

Specific steps:

1. Add to the layout file

two。 Load the Views to be displayed in Activity, and get each View by dynamically loading the layout

MViewList = new ArrayList (); LayoutInflater lf = getLayoutInflater (). From (MainActivity.this); View view1 = lf.inflate (R.layout.we_indicator1, null); View view2 = lf.inflate (R.layout.we_indicator2, null); View view3 = lf.inflate (R.layout.we_indicator3, null); mViewList.add (view1); mViewList.add (view2); mViewList.add (view3)

3. Customize PagerAdapter to load the Views data from step 2 into the ViewPager container

Public class ViewPagerAdatper extends PagerAdapter {private List mViewList; public ViewPagerAdatper (List mViewList) {this.mViewList = mViewList;} @ Override public int getCount () {return mViewList.size ();} @ Override public boolean isViewFromObject (View view, Object object) {return view==object;} @ Override public Object instantiateItem (ViewGroup container, int position) {container.addView (mViewList.get (position)); return mViewList.get (position);} @ Override public void destroyItem (ViewGroup container, int position, Object object) {container.removeView (mViewList.get (position)) }}

4. Associate ViewPager with a custom PagerAdapter

MIn_vp.setAdapter (new ViewPagerAdatper (mViewList))

Through the simple use of ViewPager, the display effect only supports sliding left and right, and the effect is relatively simple.

Advanced use of ViewPager-- to achieve the effect of following small dots

Steps:

1. Add small dots

The settings in the layout are as follows:

Then three small black dots are dynamically added to the LinearLayout, and the small white dots are overlaid on the first small black dot by default.

Add a small black dot in Activity, the code is as follows:

Private void addDots () {mOne_dot = new ImageView (this); mOne_dot.setImageResource (R.drawable.gray_dot); LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.setMargins (0,0,40,0); mIn_ll.addView (mOne_dot, layoutParams); mTwo_dot = new ImageView (this); mTwo_dot.setImageResource (R.drawable.gray_dot); mIn_ll.addView (mTwo_dot, layoutParams) MThree_dot = new ImageView (this); mThree_dot.setImageResource (R.drawable.gray_dot); mIn_ll.addView (mThree_dot, layoutParams); setClickListener ();}

two。 Get the distance between two points

The idea to realize the dynamic following of the small white point is: according to the movement of the page, the dynamic following of the small red dot can be realized by setting the leftMargin of the small white point. Therefore, the most important thing is to obtain the distance between the two points and do the corresponding operation according to the position where the page is moved.

It is important to note that the left margin getLeft () of the white dot directly obtained in onCreate () is 0, because the layout of the View component is completed after the onResume callback.

So use another method:

MLight_dots.getViewTreeObserver () .addOnGlobalLayoutListener (new ViewTreeObserver.OnGlobalLayoutListener () {@ Override public void onGlobalLayout () {/ / get the distance between two dots mDistance = mIn_ll.getChildAt (1). GetLeft ()-mIn_ll.getChildAt (0) .getLeft (); mLight_dots.getViewTreeObserver () .removeGlobalOnLayoutListener (this);}})

This event is called when the layout changes or the visual state of a view changes. However, this method will be called multiple times, so you need to execute the remove method to remove the listening event after getting the width and height of the view.

3. Monitor the movement of the page

MIn_vp.addOnPageChangeListener (new ViewPager.OnPageChangeListener () {@ Override public void onPageScrolled (int position, float positionOffset, int positionOffsetPixels) {/ / the distance the white dot moves as the page scrolls, and constantly updates its position through setLayoutParams (params) float leftMargin = mDistance * (position + positionOffset); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mLight_dots.getLayoutParams (); params.leftMargin = (int) leftMargin; mLight_dots.setLayoutParams (params) } @ Override public void onPageSelected (int position) {/ / when the page jumps, set margin float leftMargin = mDistance * position; RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mLight_dots.getLayoutParams (); params.leftMargin = (int) leftMargin; mLight_dots.setLayoutParams (params);} @ Override public void onPageScrollStateChanged (int state) {});}

In the process of moving the page, the location of the white spot can be updated in real time according to mDistance * (position + positionOffset).

A new feature has been added to this section. Click on the small black spot to jump directly to the corresponding guide page. The specific logic is to add the following code to the click event of the small black spot:

MIn_vp.setCurrentItem (1)

In the process of page selection, the location of the little red dot can be real-time according to mDistance * position.

4. Realization of Jump Button

Specific logic: when the guide page reaches the last page, the button to jump to the home page appears. Other cases are hidden, so you can add the following code to the onPageScrolled (int position, float positionOffset, int positionOffsetPixels) and onPageSelected (int position) methods:

If (position==2) {mBtn_next.setVisibility (View.VISIBLE);}

When you follow from the first page to the last page, and then click the button to jump to the home page, the above logic is sufficient.

However, when the user browses to the last page and then returns to the previous page of interest, the button still appears, which does not meet the requirements. Therefore, to improve the logic and add new judgments, the logic is as follows:

If (positional visibility () = = View.VISIBLE) {mBtn_next.setVisibility (View.GONE);}

The above logic ensures the normal display of the button, and the rest can be operated specifically to achieve the logic of jumping to the home page.

Advanced use of ViewPager-Custom Cool Animation

ViewPager comes with a setPageTransformer to animate the switch.

SetPageTransformer (boolean reverseDrawingOrder, PageTransformer transformer) needs to pass in two parameters

The first parameter: if true, it means that the custom pageTransformer requires page view to draw from back to front, and vice versa, false.

Second parameter: pass in a custom pageTransformer object

So the key point of realizing cool animation is: custom pageTransformer

Google officially showed us two animation examples: DepthPageTransformer and ZoomOutPageTransformer, which are quite cool. We will use the official example of Google to learn custom pageTransformer, on this basis, we can customize a variety of animation effects.

Analysis of position in 1.PageTransformer

Custom PageTransformer only needs to implement one method, transformPage (View page, float position), and the key to the implementation of this method is the understanding of position.

The comments in the source code are explained as follows:

Apply the transformation to this page

Position-Position of page relative to the current front-and-center position of the pager. 0 is front and center. 1 is one full page position to the right, and-1 is one page position to the left.

We can understand it as:

0 represents the current page, the current page-1 represents the page on the left, page 1 on the left represents the page on the right, and it is the page on the right

When the user slides the interface, the position changes dynamically. Take the left slide as an example:

Select the page position:0- >-1, the previous item position:-1->-2, the last item position:1-> 0

But when ViewPager sets the pageMargin and sets the distance between the two pages (by calling the viewPager.setPageMargin () method), the situation is different.

If you set pageMargin, the position before and after the page needs to add (or subtract, subtract and add) an offset (the offset is calculated as pageMargin / pageWidth).

Also take the left slide as an example:

Select the page position:0- >-1-pageMargin / pageWidth previous item position:-1-pageMargin / pageWidth->-2-pageMargin / pageWidth followed by an item position:1 + pageMargin / pageWidth-> 0

So we can use the value of position for setAlpha (), setTranslationX (), or setScaleY (), and so on, to achieve custom animation.

two。 Implement the transformPage (View page, float position) method

Public class DepthPageTransformer implements ViewPager.PageTransformer {private static final float MIN_SCALE = 0.75f; @ Override public void transformPage (View page, float position) {int pageWidth = page.getWidth (); if (position <-1) {/ / [- Infinity,-1) / / the page is far from the left page page.setAlpha (0);} else if (position

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.