带导航点的ViewPager

学习Android有一段时间了，想随便写点东西，全当是复习吧。

最近接触到了一个项目，需要有带导航点的ViewPager，让我头疼了一番，最后还是做了出来。我觉得有必要记录一下。

1. ViewPager

1.1 ViewPager简述

ViewPager是一个自带手势、动画的，可以实现View对象切换显示的控件。

ViewPager是android-support-v4.jar包中的。

在layout中使用ViewPager控件时，必须使用完整的包名+类名。

ViewPager显示的内容使用PagerAdapter进行控制，在自定义PagerAdapter时，除了需要重写抽象方法以外，还需要重写Object instantiateItem()方法和void destroyItem()方法。

1.2 查看v4包的源码

1. 找到sdk的路径；

2. 在sdk下依次打开extras -> android -> support -> v4 -> src，并将完整路径复制；

3. 在项目的的libs文件夹下，创建android-support-v4.jar.propperties文件，并编辑，内容为src=复制的路径。

4. 在eclipse中将项目关闭(close)然后重新打开(open)。

1.3 ViewPager单独使用的场景

软件更新的引导界面、广告界面等等非常简单的View对象的显示，即没有复杂的界面嵌套、程序的逻辑。

2. ViewPager+Fragment

【定位】

ViewPager：作为Fragment的容器，提供ViewPager自身的特性功能，例如支持手势、默认动画等。

Fragment：初始化、显示各个View，对用户的操作进行响应。

Activity：初始化ViewPager，使用ViewPager的Adapter对多个Fragment进行管理。

【实现步骤】

1. 在res\layout 下创建各个View对应的布局；

2. 创建匹配数量的Fragment，继承v4包中的Fragment，在每一个Fragment中都重写onCreateView()方法，加载布局、初始化控件等，并返回View对象；

3. 在Activity中初始化ViewPager控件，并为其配置FragmentPagerAdapter；

4. 将Activity的父类修改为FragmentActivity，并通过getSupportFragmentManager()方法获取FragmentManager对象，作为FragmentPagerAdapter构造方法的参数。

了解了一些基本的知识后，让我们先来看一下带导航点的ViewPager的效果图：

3. 具体实现方法

【activity的布局文件】

<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.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:paddingBottom="40dp" >

<ImageView
android:id="@+id/iv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/page_now" />

<ImageView
android:id="@+id/iv_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/page" />

<ImageView
android:id="@+id/iv_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/page" />

<ImageView
android:id="@+id/iv_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/page" />

<ImageView
android:id="@+id/iv_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/page" />

<ImageView
android:id="@+id/iv_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@null"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:src="@drawable/page" />
</LinearLayout>

</RelativeLayout>

【Fragment的布局文件】

（这里只给出最后一个Fragment的布局文件，其他5个与这个相同）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/w01" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="77dp"
android:text="微信，是一个生活方式"
android:textColor="@android:color/white"
android:textSize="22sp" />

<Button
android:id="@+id/btn_start"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="106dp"
android:background="@drawable/selector_btn"
android:text="开始"
android:onClick="doClick"
android:textColor="@android:color/white"
android:textSize="22sp" />

</RelativeLayout>

【主界面的activity】

public class GuideActivity extends Activity {

/**
* 页卡内容
*/
private ViewPager viewPager;

/**
* 导航点都是图片(当然也可以是TextView)
*/
private ImageView dot1, dot2, dot3, dot4, dot5, dot6;

/**
* 存放页卡
*/
private List<View> list;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide);

// 初始化导航点
initDot();
// 将要分页显示的View装入数组中
initViewPager();
// 初始化控件
setViews();
// adapter
setAdapters();
// 为控件配置监听器
setListeners();
}

// 初始化导航点
private void initDot() {
dot1 = (ImageView) this.findViewById(R.id.iv_1);
dot2 = (ImageView) this.findViewById(R.id.iv_2);
dot3 = (ImageView) this.findViewById(R.id.iv_3);
dot4 = (ImageView) this.findViewById(R.id.iv_4);
dot5 = (ImageView) this.findViewById(R.id.iv_5);
dot6 = (ImageView) this.findViewById(R.id.iv_6);
}

// 为控件配置监听器
private void setListeners() {
viewPager.addOnPageChangeListener(new GuidePageChangeListener());
}

// adapter
private void setAdapters() {
viewPager.setAdapter(new GuidePageAdapter(list));
}

// 初始化控件
private void setViews() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
}

// 将要分页显示的View装入数组中
private void initViewPager() {
list = new ArrayList<View>();
list.add(getLayoutInflater().inflate(R.layout.fragment_page_01, null));
list.add(getLayoutInflater().inflate(R.layout.fragment_page_02, null));
list.add(getLayoutInflater().inflate(R.layout.fragment_page_03, null));
list.add(getLayoutInflater().inflate(R.layout.fragment_page_04, null));
list.add(getLayoutInflater().inflate(R.layout.fragment_page_05, null));
list.add(getLayoutInflater().inflate(R.layout.fragment_page_06, null));
}

/**
* 点击事件
*/
public void doClick(View v) {
switch (v.getId()) {
case R.id.btn_start:
Intent intent = new Intent(GuideActivity.this, AniActivity.class);
startActivity(intent);
finish();
break;
}
}

class GuidePageChangeListener implements OnPageChangeListener {

@Override
public void onPageScrollStateChanged(int arg0) {
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

/**
* 设置某个底部导航点
* @param image 底部导航点
*/
private void setDotSelected(ImageView image) {
dot1.setImageResource(R.drawable.page);
dot2.setImageResource(R.drawable.page);
dot3.setImageResource(R.drawable.page);
dot4.setImageResource(R.drawable.page);
dot5.setImageResource(R.drawable.page);
dot6.setImageResource(R.drawable.page);

image.setImageResource(R.drawable.page_now);
}

@Override
public void onPageSelected(int index) {
switch (index) {

case 0:
setDotSelected(dot1);
break;

case 1:
setDotSelected(dot2);
break;

case 2:
setDotSelected(dot3);
break;

case 3:
setDotSelected(dot4);
break;

case 4:
setDotSelected(dot5);
break;

case 5:
setDotSelected(dot6);
break;
}
}
}
}

【GuideAdapter】

public class GuidePageAdapter extends PagerAdapter {
/**
* 装ViewPager的List集合
*/
public List<View> mPagers;

public GuidePageAdapter(List<View> mPagers) {
super();
this.mPagers = mPagers;
}

@Override
public void destroyItem(ViewGroup container, int position, Object obj) {
container.removeView(mPagers.get(position));
}

@Override
public int getCount() {
return mPagers.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mPagers.get(position), 0);
return mPagers.get(position);
}
}

至此，带导航点的ViewPager的功能就实现了。