ViewPage+Fragment选项卡切换

主页面布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:background="#ffffff"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tab1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="页卡1"
            android:textColor="#333" />

        <TextView
            android:id="@+id/tab2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="页卡2"
            android:textColor="#333" />

        <TextView
            android:id="@+id/tab3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="页卡3"
            android:textColor="#333" />
    LinearLayout>

    <ImageView
        android:id="@+id/cursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/line" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#000000"
        android:flipInterval="30"
        android:persistentDrawingCache="animation" />

LinearLayout>

切换卡的子页面代码

public class Tab1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab_1, null);
        return view;
    }

}

主页面代码

public class MainActicity extends FragmentActivity {
    private ViewPager mPager = null;
    /**
     * 代表下划线控件
     */
    private ImageView cursor = null;
    /**
     * 下划线长度
     */
    private static int lineWidth = 0;
    /**
     * 偏移量 （手机屏幕宽度/3-选项卡长度）/2
     */
    private static int offset = 0;
    /**
     * 选项卡总数
     */
    private static final int TAB_COUNT = 3;
    /**
     * 当前显示的选项卡位置
     */
    private int current_index = 0;
    /**
     * 选项卡标题
     */
    private TextView text1, text2, text3;

    @Override
    protected void onCreate(Bundle arg0) {
        // TODO Auto-generated method stub
        super.onCreate(arg0);
        setContentView(R.layout.main);
        mPager = (ViewPager) findViewById(R.id.vPager);
        initImageView();
        text1 = (TextView) findViewById(R.id.tab1);
        text2 = (TextView) findViewById(R.id.tab2);
        text3 = (TextView) findViewById(R.id.tab3);
        final TextView[] titles = { text1, text2, text3 };
        mPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public int getCount() {
                // TODO Auto-generated method stub
                return TAB_COUNT;
            }

            @Override
            public Fragment getItem(int index) {
                switch (index) {
                case 0:
                    return new Tab1();
                case 1:
                    return new Tab2();
                case 2:
                    return new Tab3();
                default:
                    break;
                }
                return null;
            }
        });
        mPager.setOnPageChangeListener(new OnPageChangeListener() {
            int one = offset * 2 + lineWidth;// 页卡1 -> 页卡2 偏移量

            @Override
            public void onPageSelected(int index) {
                Animation animation = new TranslateAnimation(one
                        * current_index, one * index, 0, 0);
                animation.setFillAfter(true);
                animation.setDuration(300);
                cursor.startAnimation(animation);
                titles[current_index].setTextColor(Color.BLACK);
                titles[index].setTextColor(Color.RED);
                current_index = index;
            }

            @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

            }
        });
        text1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                mPager.setCurrentItem(0);
                current_index = 0;
            }
        });
        text2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                mPager.setCurrentItem(1);
                current_index = 1;
            }
        });
        text3.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                mPager.setCurrentItem(2);
                current_index = 2;
            }
        });
    }

    /**
     * 初始化页面下划线
     */
    private void initImageView() {
        cursor = (ImageView) findViewById(R.id.cursor);
        // 获取图片的宽度
        lineWidth = BitmapFactory.decodeResource(getResources(),
                R.drawable.line).getWidth();
        Log.i("图片宽度", lineWidth + "");
        // 获取屏幕的宽度
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        int screenWidth = metrics.widthPixels;
        Matrix matrix = new Matrix();
        offset = (screenWidth / TAB_COUNT - lineWidth) / 2;
        Log.i("偏移量", offset + "");
        matrix.postTranslate(offset, 0);
        // 设置初始位置
        cursor.setImageMatrix(matrix);

    }

}