viewpager + 滑动导航条的实现

效果图：

ViewpagerNavigationActivity

package com.example.example; 
import android.animation.ObjectAnimator;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.animation.TranslateAnimation;
import android.widget.HorizontalScrollView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

@SuppressLint("NewApi")
public class ViewpagerNavigationActivity extends FragmentActivity implements
		OnCheckedChangeListener, OnPageChangeListener {
	HorizontalScrollView hsv;
	RadioGroup rg;
	ViewPager viewPager;
	TextView tvLine;
	int[] flags;
	int fromX;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.viewpager_navigation_main);
		hsv = (HorizontalScrollView) findViewById(R.id.hsv);
		rg = (RadioGroup) findViewById(R.id.rg);
		tvLine = (TextView) findViewById(R.id.tvline);
		viewPager = (ViewPager) findViewById(R.id.viewpager);
		// List<Fragment> fragments = new ArrayList<Fragment>();
		MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
		flags = new int[] { R.drawable.china, R.drawable.korea,
				R.drawable.nkorea, R.drawable.japan, R.drawable.usa,
				R.drawable.india, R.drawable.tail };
		viewPager.setAdapter(adapter);
		rg.setOnCheckedChangeListener(this);
		viewPager.setOnPageChangeListener(this);
	}

	private class MyAdapter extends FragmentPagerAdapter {

		public MyAdapter(FragmentManager fm) {
			super(fm);
			// TODO Auto-generated constructor stub
		}

		// 决定每一页是什么样
		@Override
		public Fragment getItem(int arg0) {
			// TODO Auto-generated method stub
			ViewpagerNavigationFragment fragment = new ViewpagerNavigationFragment();
			Bundle bundle = new Bundle();
			bundle.putInt("path", flags[arg0]);// 麻布袋
			bundle.putInt("position", arg0);
			fragment.setArguments(bundle);
			return fragment;
		}

		// 决定有多少页
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return rg.getChildCount();
		}

	}

	public void onCheckedChanged(RadioGroup group, int checkedId) {
		// TODO Auto-generated method stub
		switch (checkedId) {
		case R.id.china:
			// 中国被选中
			viewPager.setCurrentItem(0);
			break;
		case R.id.korea:
			// 韩国被选中
			viewPager.setCurrentItem(1);
			break;
		case R.id.nkorea:
			// 朝鲜被选中
			viewPager.setCurrentItem(2);
			break;
		case R.id.japan:
			// 日本被选中
			viewPager.setCurrentItem(3);
			break;
		case R.id.america:
			viewPager.setCurrentItem(4);
			break;
		case R.id.india:
			viewPager.setCurrentItem(5);
			break;
		case R.id.tail:
			viewPager.setCurrentItem(6);
			// 中国被选中
			break;
		default:
			break;
		}
	}

	public void onPageScrolled(int position, float positionOffset,
			int positionOffsetPixels) {
		int total = (int) ((position + positionOffset) * rg.getChildAt(0)
				.getWidth());
		int left = (viewPager.getWidth() - rg.getChildAt(0).getWidth()) / 2;
		int scrollX = total - left;
		hsv.scrollTo(scrollX, 0);
		moveLine(position, positionOffset);
	}

	private void moveLine(int position, float positionOffset) {
		// position表示将来第几个选项被选中
		RadioButton rb = (RadioButton) rg.getChildAt(position);
		// 坐标
		int[] location = new int[2];
		rb.getLocationInWindow(location);
		// 利用位移动画滑到对应的按钮的位置
		float toX = location[0] + positionOffset * rb.getWidth();
		Log.i("Main", "location[0]=" + location[0] + "     fromX:" + fromX
				+ "    toX:" + toX);
		// TranslateAnimation animation = new TranslateAnimation(fromX, toX, 0,
		// 0);
		// animation.setDuration(50);// 持续时间，稍短一点
		// animation.setFillAfter(true);// 滑动后停下来
		fromX = (int) (location[0] + positionOffset * rb.getWidth());
		// tvLine.startAnimation(animation);
		ObjectAnimator.ofFloat(tvLine, "translationX", fromX, toX)
				.setDuration(50).start();
	}

	public void onPageSelected(int position) {

	}

	public void onPageScrollStateChanged(int state) {

	}
}

viewpager_navigation_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:orientation="vertical" >

    <HorizontalScrollView
        android:id="@+id/hsv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none" >

        <RadioGroup
            android:id="@+id/rg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/china"
                style="@style/rb_style"
                android:text="中国" />

            <RadioButton
                android:id="@+id/korea"
                style="@style/rb_style"
                android:text="韩国" />

            <RadioButton
                android:id="@+id/nkorea"
                style="@style/rb_style"
                android:text="朝鲜" />

            <RadioButton
                android:id="@+id/japan"
                style="@style/rb_style"
                android:text="日本" />

            <RadioButton
                android:id="@+id/america"
                style="@style/rb_style"
                android:text="美国" />

            <RadioButton
                android:id="@+id/india"
                style="@style/rb_style"
                android:text="印度" />

            <RadioButton
                android:id="@+id/tail"
                style="@style/rb_style"
                android:text="泰国" />
        </RadioGroup>
    </HorizontalScrollView>

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/tvline"
            android:layout_width="100dp"
            android:layout_height="2dp"
            android:layout_marginTop="5dip"
            android:background="#ff0000" />
    </FrameLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

package com.example.example;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewpagerNavigationFragment extends Fragment{
	private int path;
	private int position;
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		Bundle bundle = this.getArguments();
		path = bundle.getInt("path");
		position = bundle.getInt("position"); 
		ImageView img = new ImageView(this.getActivity());
		img.setImageResource(path);
		return img;
	} 
}

用到的素材图片：

整理自课程