[Android UI] case 03 Implementation of sliding switching effect (ViewPager) and androidviewpager

[Android UI] case 03 Implementation of sliding switching effect (ViewPager) and androidviewpager

In this example, ViewPager is used to implement sliding switching. In this example, ViewPager is android. support. v4.view. ViewPager. So you need to import the android-support-v4.jar In the android project.
In this example, ViewPager is the core part to achieve the sliding effect. Setting PageChangeListener to listen to events is the core idea to achieve the sliding effect.

[For more information, see http://blog.csdn.net/mahoking]
The first is the layout. xml file on the main interface, activity_03_viewpager.xml. The layout of the main interface is the page label at the top. You can click the label or slide the page to switch the page.

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <LinearLayout android: layout_width = "match_parent" android: layout_height = "40dp" android: orientation = "horizontal"> <TextView android: layout_height = "match_parent" android: layout_width = "match_parent" android: layout_weight = "1" android: gravity = "center" android: text = "tab 01" android: id = "@ + id/activity_03_viewpager_textview_01"/> <TextView android: layout_height = "match_parent" android: layout_width = "match_parent" android: layout_weight = "1" android: text = "tab 02" android: gravity = "center" android: id = "@ + id/activity_03_viewpager_textview_02"/> <TextView android: layout_height = "match_parent" android: layout_width = "match_parent" android: layout_weight = "1" android: gravity = "center" android: text = "tab 03" android: id = "@ + id/activity_03_viewpager_textview_03"/> </LinearLayout> <ImageView android: id = "@ + id/cursor" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: scaleType = "matrix" android: src = "@ drawable/example03_cursor"/> <android. support. v4.view. viewPager android: id = "@ + id/activity_03_viewpager_vPager" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" android: layout_weight = "1.0" android: background = "#000000" android: flipInterval = "30" android: persistentDrawingCache = "animation"/> </LinearLayout>

The above requires an ImageView component, which achieves a dynamic moving label effect. You can select the bottom rectangular image under your favorite label. See the results.
Compile the main Activity (ViewPagerActivity. The first is the definition of global variables:

Private ViewPager mPager; // page card content private List <View> listViews; // Tab page List private ImageView cursor; // animation image private TextView t1, t2, t3; // the header of the page card is private int offset = 0; // The animation image offset private int currIndex = 0; // the current page card number private int bmp w; // The width of the animation Image

This example provides three methods to initialize the layout space: initTextViews (), initImageView (), and initViewPager ().

InitTextViews ()

private void initTextViews() {t1 = (TextView) findViewById(R.id.activity_03_viewpager_textview_01);t2 = (TextView) findViewById(R.id.activity_03_viewpager_textview_02);t3 = (TextView) findViewById(R.id.activity_03_viewpager_textview_03);t1.setOnClickListener(new MyOnClickListener(0));t2.setOnClickListener(new MyOnClickListener(1));t3.setOnClickListener(new MyOnClickListener(2));}

InitImageView ()

private void initViewPager() {mPager = (ViewPager) findViewById(R.id.activity_03_viewpager_vPager);listViews = new ArrayList<View>();LayoutInflater mInflater = getLayoutInflater();listViews.add(mInflater.inflate(R.layout.layout_03_layout01, null));listViews.add(mInflater.inflate(R.layout.layout_03_layout02, null));listViews.add(mInflater.inflate(R.layout.layout_03_layout03, null));mPager.setAdapter(new ViewPagerAdapter(listViews));mPager.setCurrentItem(0);mPager.setOnPageChangeListener(new MyOnPageChangeListener());}

 

InitViewPager ()

/*** Initialize the animation */private void initImageView () {cursor = (ImageView) findViewById (R. id. cursor); bmp w = BitmapFactory. decodeResource (getResources (), R. drawable. example03_cursor ). getWidth (); // obtain the image width DisplayMetrics dm = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (dm); int screenW = dm. widthPixels; // get the resolution width offset = (screenW/3-bmp w)/2; // calculate the offset Matrix matrix = new Matrix (); matrix. postTranslate (offset, 0); cursor. setImageMatrix (matrix); // sets the initial animation position}

As shown in the preceding method, two internal classes of MyOnClickListener and MyOnPageChangeListener are required in this example to process listener events.
MyOnClickListener

/*** Click to listen to the event **/public class MyOnClickListener implements View. onClickListener {private int index = 0; public MyOnClickListener (int I) {index = I ;}@ Overridepublic void onClick (View v) {mPager. setCurrentItem (index );}};

MyOnPageChangeListener

/*** Page card switch listener */public class MyOnPageChangeListener implements OnPageChangeListener {int one = offset * 2 + bmp w; // page Card 1-> page Card 2 offset int two = one * 2; // page Card 1-> page card 3 offset @ Override public void onPageSelected (int arg0) {Animation animation = null; switch (arg0) {case 0: if (currIndex = 1) {animation = new TranslateAnimation (one, 0, 0, 0 );} else if (currIndex = 2) {animation = new TranslateAnimation (two, 0, 0, 0);} break; case 1: if (currIndex = 0) {animation = new TranslateAnimation (offset, one, 0, 0);} else if (currIndex = 2) {animation = new TranslateAnimation (two, one, 0, 0 );} break; case 2: if (currIndex = 0) {animation = new TranslateAnimation (offset, two, 0, 0);} else if (currIndex = 1) {animation = new TranslateAnimation (one, two, 0, 0);} break;} currIndex = arg0; animation. setFillAfter (true); // True: the image is parked at the animation end position. setDuration (1, 300); cursor. startAnimation (animation);} @ Override public void onPageScrolled (int arg0, float arg1, int arg2) {}@ Override public void onPageScrollStateChanged (int arg0 ){}}

In this example, we need to display three tabs, so we also need to design the three tabs. Here we only set the background color to make a difference.

Layout_03_layout01.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:background="#FF6666">    </LinearLayout>

Effect:

 

[For more information, see http://blog.csdn.net/mahoking]

 

Android viewpager

Github.com/...wPager

Let's take a look at the viewpager that slides up and down.

Android ViewPager enables activity page Switching

In the viewpage, You can intercept the touch event.
However, if the viewpage occupies all the space of the current external page, the external viewpage cannot be moved over.