Android多屏滑动:ViewPager自定义小圆圈标签 仿app初次运行时的导航

上文说了多屏滑动基础用法，遗留标签页的问题。纵观App的滑屏体验，标签页无非有三种:一种是每个View对应一个小圆圈，当前View对应的小圆圈颜色和其他不一样。但是所有View的标签在同一时刻都是可见的。如下两张图片所示,这也是本文的效果:




第二种：标签页是类似QQ和微信，只有当前View下有线性标识。其他View么有。效果如下:


第三种：跟第二种类似，但是没有标签页，整个下面的线时同一个颜色，标签就是个RaditoButton来作标识，如下所示：


本文介绍第一种效果，类似app第一次安装后运行显示的导航页。这种ViewPager的标签页实现如下1、在ViewPager的母布局中，放ImageView来标识，有几个View就对应放几个ImageView。如果希望标签在ViewPager的布局上，母布局就用帧布局。希望标识在View的下方就用其他布局，或者写死View的高度.本例中的布局：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、在Java文件里，给ViewPager设置监听setOnPageChangeListener的onPageSelected(),在View切换时显示动画,下面贴出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;
import 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 = {"页面1", "页面2", "页面3"};
	MyPagerAdapter pagerAdapter;
	PagerTabStrip pagerTabStrip;
	PagerTitleStrip pagerTitleStrip;
	ViewPager viewPager;
	View view1, view2, view3;
	Button btn1, btn2, btn3;
	ImageView img1, img2, img3;
	BtnListener btnListener;
	private int currIndex = -1;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initUI();
		initPageIcon();
		
		LayoutInflater flater = (LayoutInflater) this.getSystemService(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);
		currIndex = 1;
		img2.setImageResource(R.drawable.page_selected);
		

		/*		//设置pagerTabStrip
		pagerTabStrip.setTabIndicatorColor(Color.RED);
		pagerTabStrip.setTextColor(Color.RED);
		pagerTabStrip.setClickable(false);
		pagerTabStrip.setTextSpacing(40);
		pagerTabStrip.setBackgroundColor(Color.GRAY);
		pagerTabStrip.setDrawFullUnderline(true);*/

		//ViewPager滑动监听
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				Animation 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.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("切换至:" + mTitles[arg0]);
			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

	}

	@Override
	public boolean onCreateOptionsMenu(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.btn_in_third);
		}
		btnListener = new BtnListener();

		btn1.setOnClickListener(btnListener);
		btn2.setOnClickListener(btnListener);
		btn3.setOnClickListener(btnListener);
	}
	class BtnListener implements View.OnClickListener{

		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			switch (v.getId()){
			case R.id.btn_in_first:
				showToast("您点击了第一个界面");
				break;
			case R.id.btn_in_second:
				showToast("您点击了第2个界面");
				break;
			case R.id.btn_in_third:
				showToast("您点击了第3个界面");
				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);
	}

}

在initPageIcon()函数里实例化3个ImageView，然后再onCreate()里设置默认显示ViewPager的中间的View:
viewPager.setCurrentItem(1);
currIndex = 1;
img2.setImageResource(R.drawable.page_selected);
接着就是滑动监听,在这里改变标签:

@Override
			public void onPageSelected(int arg0) {
				// TODO Auto-generated method stub
				Animation 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("切换至:" + mTitles[arg0]);
			}

因为三个ImageView在xml都写成默认状态，而currIndex标识切换view前的标签页，arg0表示当前页。以从中间View切换到左边为例，当arg0 = currIndex - 1,就表示从右滑动到了左，anim = new TranslateAnimation(arg0 + 1, arg0, 0, 0);如果切换到的View左右都有View则要设置它左右的view标签到自然态，更多可以参考这个仿微信导航的帖子.
TranslateAnimation是一个移位动画，其实这里不用动画直接ImageView改变也是可以的，不知道为啥上面那个仿微信的链接里为啥用动画。。这里是代码的方式启动一个动画，可以参考 链接1 链接2 。这块比较奇怪的是没有调用startAnimation()这个方法，难道anim.setFillAfter(true)？设置下就ok了么？？？ 待改日仔细研究下动画再给答案。
更多关于动画: 链接