ViewPager配合使用Indicator

ViewPager+Indicator可以很好的实现Android的Tab页面功能，这里介绍一款开源控件ViewPagerIndicator，很好的实现了ViewPager和Indicator的结合。

ViewPagerIndicator中主要有以下几种Indicator

• CirclePageIndicator
• IconPageIndicator
• LinePageIndicator
• TabPageIndicator
• TitlePageIndicator

• UnderlinePageIndicator

  各种Indicator满足了项目的不同需求，这里我提取出了项目中的TabPageIndicator举个栗子。
  涉及到相关的文件有：
  
  

主代码实现起来非常简便

package com.yingjun.tabpageindicator;

import java.util.ArrayList;
import java.util.List;

import com.yingjun.tabpageindicator.indicator.TabPageIndicator;

import android.os.Bundle;
import android.os.Parcelable;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.TypedValue;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends Activity {

    private static final String[] TABS = new String[] { "tab1111", "tab2222", "tab3333", "tab4444", "tab5555", "tab6666" };
    private ViewPager viewPager;
    private TabPageIndicator mIndicator;
    private List<View> pageViews = new ArrayList<View>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        for (int i = 0; i < TABS.length; i++) {
            TextView textView = new TextView(this);
            textView.setText("item" + (i + 1));
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 60);
            pageViews.add(textView);
        }
        viewPager = (ViewPager) findViewById(R.id.viewpaper);
        viewPager.setAdapter(new MyPageAdapter());

        mIndicator = (TabPageIndicator) findViewById(R.id.indicator);
        mIndicator.setViewPager(viewPager);
        mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

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

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

    class MyPageAdapter extends PagerAdapter {

        @Override
        public CharSequence getPageTitle(int position) {
            return MainActivity.TABS[position % TABS.length];
        }

        @Override
        public int getCount() {
            return TABS.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            // TODO Auto-generated method stub
            ((ViewPager) arg0).removeView(pageViews.get(arg1));
        }

        @Override
        public Object instantiateItem(View arg0, int arg1) {
            // TODO Auto-generated method stub
            ((ViewPager) arg0).addView(pageViews.get(arg1));
            return pageViews.get(arg1);
        }

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {
            // TODO Auto-generated method stub

        }

        @Override
        public Parcelable saveState() {
            // TODO Auto-generated method stub
            return null;
        }

        @Override
        public void startUpdate(View arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void finishUpdate(View arg0) {
            // TODO Auto-generated method stub

        }

    }
}

vpi__styles.xml内部可以自定义tab的样式，并在相应的Activity采用相应的样式即可

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2011 Jake Wharton

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<resources>
    <style name="Theme.PageIndicatorDefaults" parent="android:Theme">
        <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
    </style>

    <style name="Widget">
    </style>

    <style name="Widget.TabPageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/vpi__tab_indicator</item>
        <item name="android:paddingLeft">20dip</item>
        <item name="android:paddingRight">20dip</item>
        <item name="android:paddingTop">10dp</item>
        <item name="android:paddingBottom">10dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">18sp</item>
        <item name="android:maxLines">1</item>
    </style>

    <style name="TextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">normal</item>
        <item name="android:textColor">@color/vpi__light_theme</item>
    </style>

    <style name="Widget.IconPageIndicator" parent="Widget">
        <item name="android:layout_marginLeft">6dp</item>
        <item name="android:layout_marginRight">6dp</item>
    </style>
</resources>

效果图：

点击下载源码