Android multi-screen slide: ViewPager custom small circle tag imitation app navigation during the first run

The previous section describes the basic usage of multi-screen sliding and issues with tabs. Throughout the sliding screen experience of the App, there are three tabs: one is that each View corresponds to a small circle, and the color of the small circle corresponding to the current View is different from the other. However, all View labels are visible at the same time. As shown in the following two images, this is also the result of this article:

Type 2: tabs are similar to QQ and, and only the current View has a linear identifier. Other views are available. The effect is as follows:

The third type is similar to the second type, but there is no tab, and the entire line below is the same color. The label is a RaditoButton for identification, as shown below:

This article describes the first effect, similar to the navigation page displayed after the app is installed for the first time. This ViewPager tab implementation is as follows:

1. In the parent layout of ViewPager, put the ImageView to identify it. There are several views corresponding to several imageviews. If you want the label to be In the ViewPager layout, the parent layout uses the frame layout. You want to use other la s at the bottom of the View, or write the height of the View. layout in this example:

Activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerInParent="true" >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignBottom="@id/viewpager"        android:orientation="horizontal" >        <ImageView            android:id="@+id/page_icon_1"            android:layout_width="20dip"            android:layout_height="20dip"            android:layout_weight="1"            android:src="@drawable/page_icon" />        <ImageView            android:id="@+id/page_icon_2"            android:layout_width="20dip"            android:layout_height="20dip"            android:layout_weight="1"            android:src="@drawable/page_icon" />        <ImageView            android:id="@+id/page_icon_3"            android:layout_width="20dip"            android:layout_height="20dip"            android:layout_weight="1"            android:src="@drawable/page_icon" />    </LinearLayout></RelativeLayout>

2. In the Java file, set onPageSelected () for ViewPager to listen to setOnPageChangeListener and display the animation during View switching. The following shows all the code for MainActivity. java:

Package org. yanzi. testviewpager1; import java. util. arrayList; import java. util. list; import android. app. activity; import android. content. context; import android. OS. bundle; import android. support. v4.view. pagerTabStrip; import android. support. v4.view. pagerTitleStrip; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. view. layoutInflater; impor T android. view. menu; import android. view. view; import android. view. animation. animation; import android. view. animation. translateAnimation; import android. widget. button; import android. widget. imageView; import android. widget. toast; public class MainActivity extends Activity {List <View> mViews = new ArrayList <View> (); String [] mTitles = {"Page 1", "page 2 ", "Page 3"}; MyPagerAdapter pagerAdapter; PagerTabStrip pagerTab Strip; Comment PagerTitleStrip; ViewPager viewPager; View view1, view2, view3; Button btn1, btn2, btn3; ImageView img1, img2, img3; BtnListener btnListener; private int currIndex =-1; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); initUI (); initPageIcon (); LayoutInflater flater = (LayoutInflater) this. getSystemS Ervice (Context. LAYOUT_INFLATER_SERVICE); view1 = flater. inflate (R. layout. first_pager_layout, null); view2 = flater. inflate (R. layout. second_pager_layout, null); view3 = flater. inflate (R. layout. third_pager_layout, null); mViews. add (view1); mViews. add (view2); mViews. add (view3); pagerAdapter = new MyPagerAdapter (mViews, mTitles); viewPager. setAdapter (pagerAdapter); initBtns (); viewPager. setCurrentItem (1); currIn Dex = 1; img2.setImageResource (R. drawable. page_selected);/* // set pagerTabStrippagerTabStrip. setTabIndicatorColor (Color. RED); pagerTabStrip. setTextColor (Color. RED); pagerTabStrip. setClickable (false); pagerTabStrip. setTextSpacing (40); pagerTabStrip. setBackgroundColor (Color. GRAY); pagerTabStrip. setDrawFullUnderline (true); * // ViewPager slide listener viewPager. setOnPageChangeListener (new OnPageChangeListener () {@ Override Public void onPageSelected (int arg0) {// TODO Auto-generated method stubAnimation anim = null; switch (arg0) {case 0: img1.setImageResource (R. drawable. page_selected); img2.setImageResource (R. drawable. page_icon); if (currIndex = (arg0 + 1) {anim = new TranslateAnimation (arg0 + 1, arg0, 0, 0);} break; case 1: img2.setImageResource (R. drawable. page_selected); img1.setImageResource (R. drawable. page_icon); img3.set ImageResource (R. drawable. page_icon); if (arg0 = (currIndex + 1) {anim = new TranslateAnimation (arg0-1, arg0, 0, 0 );} else if (arg0 = (currIndex-1) {anim = new TranslateAnimation (arg0 + 1, arg0, 0, 0);} break; case 2: img3.setImageResource (R. drawable. page_selected); img2.setImageResource (R. drawable. page_icon); if (arg0 = (currIndex + 1) {anim = new TranslateAnimation (arg0-1, arg0, 0, 0);} break; defau Lt: break;} currIndex = arg0; anim. setFillAfter (true); anim. setDuration (300); showToast ("switch to:" + mTitles [arg0]);} @ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Overridepublic void onPageScrollStateChanged (int arg0) {// TODO Auto-generated method stub});} @ Overridepublic boolean onCreateOptionsMenu (Menu menu Menu) {// Inflate the menu; this adds items To the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true;} private void initUI () {viewPager = (ViewPager) findViewById (R. id. viewpager); // pagerTabStrip = (PagerTabStrip) findViewById (R. id. pagertab);} private void initBtns () {if (view1! = Null) {btn1 = (Button) view1.findViewById (R. id. btn_in_first);} if (view2! = Null) {btn2 = (Button) view2.findViewById (R. id. btn_in_second);} if (view3! = Null) {btn3 = (Button) view3.findViewById (R. id. listener);} btnListener = new BtnListener (); btn1.setOnClickListener (btnListener); listener (btnListener); btn3.setOnClickListener (btnListener);} class BtnListener implements View. onClickListener {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubswitch (v. getId () {case R. id. btn_in_first: showToast ("You clicked the first interface"); break; case R. id. btn_in_second: showToast ("You have clicked on the 2nd interfaces"); break; case R. id. btn_in_third: showToast ("You have clicked on the 3rd interfaces"); break; default: break ;}} private void showToast (String s) {Toast. makeText (getApplicationContext (), s, Toast. LENGTH_SHORT ). show ();} private void initPageIcon () {img1 = (ImageView) findViewById (R. id. page_icon_1); img2 = (ImageView) findViewById (R. id. page_icon_2); img3 = (ImageView) findViewById (R. id. page_icon_3 );}}

In the initPageIcon () function, three imageviews are instantiated, and the default View in the middle of ViewPager is displayed in onCreate:

ViewPager. setCurrentItem (1 );
CurrIndex = 1;
Img2.setImageResource (R. drawable. page_selected );

The next step is the sliding listener. Here we change the tag:

@ Overridepublic void onPageSelected (int arg0) {// TODO Auto-generated method stubAnimation anim = null; switch (arg0) {case 0: img1.setImageResource (R. drawable. page_selected); img2.setImageResource (R. drawable. page_icon); if (arg0 = (currIndex-1) {anim = new TranslateAnimation (arg0 + 1, arg0, 0, 0);} break; case 1: img2.setImageResource (R. drawable. page_selected); img1.setImageResource (R. drawable. page_icon); img3.setImageResource (R. drawable. page_icon); if (arg0 = (currIndex + 1) {anim = new TranslateAnimation (arg0-1, arg0, 0, 0 );} else if (arg0 = (currIndex-1) {anim = new TranslateAnimation (arg0 + 1, arg0, 0, 0);} break; case 2: img3.setImageResource (R. drawable. page_selected); img2.setImageResource (R. drawable. page_icon); if (arg0 = (currIndex + 1) {anim = new TranslateAnimation (arg0-1, arg0, 0, 0);} break; default: break ;} currIndex = arg0; anim. setFillAfter (true); anim. setDuration (300); showToast ("switch to:" + mTitles [arg0]);}

Because the three imageviews are written as the default state in xml, and the currIndex identifies the tab before switching the view, arg0 indicates the current page. Take switching from the middle View to the left as an example. When arg0 = currIndex-1, it indicates sliding from right to left, anim = new TranslateAnimation (arg0 + 1, arg0, 0, 0 ); if the View to be switched has a View on both the left and right, you need to set the view label on the left and right to the natural state. For more information, refer to this imitation navigation post.

TranslateAnimation is a shift animation. In fact, you can change the image view directly without an animation. I don't know why the above imitation link uses an animation .. Here is the code to start an animation. For more information, see link 1 and link 2.This is strange because the startAnimation () method is not called. Is it anim. setFillAfter (true )? Is setting OK ??? Wait for another day to study the animation and give the answer.