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>

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);	}}

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了么？？？ 待改日仔细研究下动画再给答案。

更多关于动画: 链接

1楼soledadzz昨天 16:57

您的文章已被推荐到博客首页和个人页侧边栏推荐文章，感谢您的分享。