ViewPagerIndicator开源库使用日记

一、摘要
ViewPagerIndicator使用以及自定义样式修改。网上有关JakeWharton大神的ViewPagerIndicator控件使用的文章也比较多，这里主要是自己学习使用过程中的一个简单记录。

二、源码下载
https://github.com/JakeWharton/Android-ViewPagerIndicator
下载后导入这个library到自己的项目中。

三、布局文件
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#fff"
    >   
    <com.viewpagerindicator.TabPageIndicator
            android:id="@+id/tabTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        > 
    </android.support.v4.view.ViewPager>
</LinearLayout>

tab_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    >   
    <TextView
        android:id="@+id/titleview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="22sp"
        android:gravity="center"
        />
</RelativeLayout>

四、后台code

MainActivity .java

package com.example.viewpagertest;

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

import com.viewpagerindicator.TabPageIndicator;

import android.app.Activity;
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.view.ViewGroup;

public class MainActivity extends FragmentActivity {

    private ViewPager viewPager;
    private TabPageIndicator tabTitle;
    private List<Fragment> fragList;
    private List<String> titleList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        tabTitle = (TabPageIndicator) findViewById(R.id.tabTitle);

        initFragmentList();

        viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        //关联viewpagerIndicator
        tabTitle.setViewPager(viewPager);

        tabTitle.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                System.out.println("onPageSelected----"+titleList.get(position));
            }

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

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }

        });
    }


    private void initFragmentList() {
        fragList = new ArrayList<Fragment>();
        for(int i = 0; i < 10; i++){
            TabFragment frag = new TabFragment();
            Bundle b = new Bundle();
            b.putInt("position", i+1);
            frag.setArguments(b);
            fragList.add(frag);
        }

        titleList = new ArrayList<String>();
        for(int i = 0; i < 10; i++){
            titleList.add("标题"+(i+1));
        }
    }


    class MyFragmentPagerAdapter extends FragmentPagerAdapter{

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

        @Override
        public Fragment getItem(int arg0) {
            return fragList.get(arg0);
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return titleList.get(position)==null?"标题":titleList.get(position);
        }
    }
}

TabFragment.java

package com.example.viewpagertest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TabFragment extends Fragment {

    private TextView textview;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab_fragment, null);
        Bundle b = getArguments();
        int position = b.getInt("position");
        initView(view, position);
        return view;
    }

    private void initView(View view, int position) {
        textview = (TextView) view.findViewById(R.id.titleview);
        textview.setText("这是第"+position+"个页面");
    }

}

五、自定义样式

这里要使用viewPagerIndicator提供的主题Theme.PageIndicatorDefaults

<activity
            android:name="com.example.viewpagertest.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.PageIndicatorDefaults"
             >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

自定义指示器样式的话，也要通过配置activity的theme的方式来修改。
要注意的是自定义主题是通过重新定义vpiTabPageIndicatorStyle样式，不能改为其他名字，这个是viewPagerIndicator自定义的属性，并且在TabPageIndicator.java中引用。如下：

 public TabPageIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        setHorizontalScrollBarEnabled(false);

        mTabLayout = new IcsLinearLayout(context, R.attr.vpiTabPageIndicatorStyle);
        addView(mTabLayout, new ViewGroup.LayoutParams(WRAP_CONTENT, MATCH_PARENT));
    }

自定义主题，重定义vpiIconPageIndicatorStyle

<style name="MyPageIndicatorDefaults" parent="android:Theme">
        <item name="vpiTabPageIndicatorStyle">@style/myTabPageIndicator</item>
    </style>
<!--继承Widget.TabPageIndicator,修改需要重新定义的属性-->
    <style name="myTabPageIndicator" parent="Widget.TabPageIndicator">
        <!--修改背景图片，可以设置按下或者选中的背景图-->
        <item name="android:background">@drawable/my__tab_indicator</item>
        <item name="android:paddingLeft">20dip</item>
        <item name="android:paddingRight">20dip</item>
        <item name="android:textSize">18sp</item>       
    </style>

之后配置theme就可以了

<activity
            android:name="com.example.viewpagertest.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/MyPageIndicatorDefaults"
             >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>