ViewPagerIndicator抽取TabPagerIndicator

首先感谢xiaanming，我是看过他的博客之后自己想到如果在真实开发中，直接使用ViewPagerIndicator类库不方便，才想到抽取TabPagerIndicator

我们这里面用到的是ViewPagerIndicator里面的一个功能点，当然直接连接类库肯定是没问题的，但是个人感觉如果不使用太多功能不如自己直接把使用的功能点抽取出来；

 

我这里面使用的TabPagerIndicator，所以需要复制库中的几个类：（我在eclipse和androidstudio上面都实验了，这次截图直接用as，源码两个都有）

然后把xml文件复制过来

 

直接上代码：

首先是MainActivity的布局文件：

 

<LinearLayout 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:orientation="vertical"
    tools:context="com.example.a.myviewpagerindicator.MainActivity">

    <com.example.a.myviewpagerindicator.indicator.TabPageIndicator
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/indicator"
        android:background="#ffffff"/>

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

    </android.support.v4.view.ViewPager>
</LinearLayout>

MainActivity代码：

 

 

public class MainActivity extends FragmentActivity {

    // tab标题
    private static final String[] TITLE = new String[] { "头条", "房产", "另一面",
            "女人", "财经", "数码", "情感", "科技", "搏击", "手机", "电脑" };

    Context context;
    private TabPageIndicator indicator;
    private ViewPager mViewPgaer;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context=this;
        initView();

        // ViewPager的adapter
        FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(
                getSupportFragmentManager());

        mViewPgaer.setAdapter(adapter);

        // 实例化TabPageIndicator然后设置ViewPager与之关联
        TabPageIndicator indicator = (TabPageIndicator) findViewById(R.id.indicator);
        indicator.setViewPager(mViewPgaer);

        // 如果我们要对ViewPager设置监听，用indicator设置就行了
        indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                ToastUtils.showToast(MainActivity.this,TITLE[arg0]);
            }

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

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    private void initView() {
        indicator= (TabPageIndicator) findViewById(R.id.indicator);
        mViewPgaer= (ViewPager) findViewById(R.id.viewpager);
    }

    // viewpager适配器
    class TabPageIndicatorAdapter extends FragmentPagerAdapter {

        public TabPageIndicatorAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            // 新建一个Fragment来展示ViewPager item的内容，并传递参数
            Fragment fragment = new ItemFragment();
            Bundle args = new Bundle();
            args.putString("arg", TITLE[position]);
            fragment.setArguments(args);

            return fragment;
        }

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

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

    }
}

fragment的布局文件里面就一个TextView，就不粘贴了

 

fragment代码：

 

public class ItemFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = View.inflate(getActivity(), R.layout.fragment_item, null);
        TextView mTextView=(TextView) view.findViewById(R.id.textview);

        //获取activity传递过来的参数
        Bundle bundle = getArguments();
        String title=bundle.getString("arg");

        mTextView.setText(title);
        return view;
    }
}

代码到这里就结束了，正常的效果就能出来了，但是每个项目需要的样式不同，重点就是怎么修改TabPagerIndicator的样式：

 

大部分样式都是在vpi_styles.xml中修改的：

 

<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">22dp</item>
        <item name="android:paddingRight">22dp</item>
        <!-- 控制每个标题文本上下边距 -->
        <item name="android:paddingTop">12dp</item>
        <item name="android:paddingBottom">12dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <!-- 控制标题文本文字大小 -->
        <item name="android:textSize">12sp</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__dark_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>

 

 

免费源码下载地址