对ViewPagerIndicator的认识

viewPagerIndicator

ViewPagerIndicator和ActionBarSherlock一样是一种开源控件，ViewPagerIndicator是和ViewPager是搭配使用的，ViewPagerIndicator一共有六种样式：

(1)CirclePageIndicator

(2)IconPageIndicator

(3)LinePageIndicator

(4)TabPageIndicator

(5)TitlePageIndicator

(6)UnderlinePageIndicator

ViewPagerIndicator的用法也很简单，下面我就以TabPageIndicator为例介绍一下：
但它作为一种开源框架也依赖一个库，在使用它前先在GitHub中下载，
（1）把ViewPagerIndicator的依赖库和例子导入（右击eclipse空白处——》Import——》Android——》Existing Android Code Into Workspace——》Browse——》选择将要导入的文件夹——》确定——》勾选Copy projects into workspace前的单选框——》Finish）
（2）第一种方法：在新建的项目工程中添加库（选中新建项目右击——》Properties——》Add——》选中库——》OK——》Apply——》OK）这里就要删去新建项目下libs文件夹下的一个v4的jar包，因为导入的库中包含了v4的jar包，二者会冲突，如果不删去的话无法进行编译。
第二种方法：或者直接把想要用的例子拷贝到新建项目下的src中的一个包中

（3）写布局indicator_tabs和viewpager的item布局

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

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

viewpager的item布局

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

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp" />

</LinearLayout>

（4）在java代码中写逻辑，第三步，也就是ViewPagerIndicator的应用步骤：
第一步：找到TabPageIndicator和ViewPager的id
第二步：给ViewPager设置适配器
第三步：将TabPageIndicator和ViewPager绑定

public class MainActivity extends FragmentActivity {
	private List<String>title=Arrays.asList("电话","短信","微信","QQ");
	private ViewPager pager;
	private TabPageIndicator indicator;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.<span style="font-size:18px;">indicator_tabs</span>);
		pager = (ViewPager) findViewById(R.id.pager);
		indicator = (TabPageIndicator) findViewById(R.id.indicator);
		MyAdapter adapter = new MyAdapter((getSupportFragmentManager()));
		pager.setAdapter(adapter);
		indicator.setViewPager(pager);
		indicator.setOnPageChangeListener(new OnPageChangeListener() {
			
			@Override
			public void onPageSelected(int arg0) {
				System.out.println("您选择的是："+title.get(arg0));
				
			}
			
			@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 MyAdapter extends FragmentPagerAdapter{

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

	@Override
	public Fragment getItem(int arg0) {
//新建一个fragment接收viewpager每一个pager的内容，用bundle进行传递
	MyFragment fragment = new MyFragment();
	Bundle bundle = new Bundle();
	bundle.putString("title", title.get(arg0));
	fragment.setArguments(bundle);
		return fragment;
	}
	@Override
	public int getCount() {
	
		return title.size();
	}
	
	@Override
	public CharSequence getPageTitle(int position) {
		return title.get(position);
	}
}


}

MyFragment中的逻辑代码

ublic class MyFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
		Bundle savedInstanceState) {
	View view = View.inflate(getActivity(), R.layout.item, null);
	TextView tv = (TextView) view.findViewById(R.id.tv);
	//获取Activity中传递过来的值
	Bundle bundle = getArguments();
	String title=bundle.getString("title");
	tv.setText(title);
	return view;
}
@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
	}
}

（5）设置主题，如果不设置主题的话，文字就会挨在一起
在values文件夹下编辑的，将库里的直接copy过来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/news__tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">13dp</item>
        <item name="android:paddingBottom">13dp</item>
        <item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
        <item name="android:textSize">16sp</item>
        <item name="android:maxLines">1</item>
    </style>

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

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

</resources>

这个主题是库里有的，直接copy过来用即可
主题的应用：
在清单文件中的activity中添加theme属性，因为所有的view都是展示在activity中的，所以在activity中设置

<activity
            android:name="com.itcast.zhbj.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/Theme.PageIndicatorDefaults">

附加：ViewPagerIndicator还有一些属性，是在values文件夹下编辑的，将库里的直接copy过来vpi_attrs.xml文件：

<resources>
    <declare-styleable name="ViewPagerIndicator">
        <!-- Style of the circle indicator. -->
        <attr name="vpiCirclePageIndicatorStyle" format="reference"/>
        <!-- Style of the icon indicator's views. -->
        <attr name="vpiIconPageIndicatorStyle" format="reference"/>
        <!-- Style of the line indicator. -->
        <attr name="vpiLinePageIndicatorStyle" format="reference"/>
        <!-- Style of the title indicator. -->
        <attr name="vpiTitlePageIndicatorStyle" format="reference"/>
        <!-- Style of the tab indicator's tabs. -->
        <attr name="vpiTabPageIndicatorStyle" format="reference"/>
        <!-- Style of the underline indicator. -->
        <attr name="vpiUnderlinePageIndicatorStyle" format="reference"/>
    </declare-styleable>

    <attr name="centered" format="boolean" />
    <attr name="selectedColor" format="color" />
    <attr name="strokeWidth" format="dimension" />
    <attr name="unselectedColor" format="color" />

    <declare-styleable name="CirclePageIndicator">
        <!-- Whether or not the indicators should be centered. -->
        <attr name="centered" />
        <!-- Color of the filled circle that represents the current page. -->
        <attr name="fillColor" format="color" />
        <!-- Color of the filled circles that represents pages. -->
        <attr name="pageColor" format="color" />
        <!-- Orientation of the indicator. -->
        <attr name="android:orientation"/>
        <!-- Radius of the circles. This is also the spacing between circles. -->
        <attr name="radius" format="dimension" />
        <!-- Whether or not the selected indicator snaps to the circles. -->
        <attr name="snap" format="boolean" />
        <!-- Color of the open circles. -->
        <attr name="strokeColor" format="color" />
        <!-- Width of the stroke used to draw the circles. -->
        <attr name="strokeWidth" />
        <!-- View background -->
        <attr name="android:background"/>
    </declare-styleable>

    <declare-styleable name="LinePageIndicator">
        <!-- Whether or not the indicators should be centered. -->
        <attr name="centered" />
        <!-- Color of the unselected lines that represent the pages. -->
        <attr name="unselectedColor" />
        <!-- Color of the selected line that represents the current page. -->
        <attr name="selectedColor" />
        <!-- Width of each indicator line. -->
        <attr name="lineWidth" format="dimension" />
        <!-- Width of each indicator line's stroke. -->
        <attr name="strokeWidth" />
        <!-- Width of the gap between each indicator line. -->
        <attr name="gapWidth" format="dimension" />
        <!-- View background -->
        <attr name="android:background"/>
    </declare-styleable>

    <declare-styleable name="TitlePageIndicator">
        <!-- Screen edge padding. -->
        <attr name="clipPadding" format="dimension" />
        <!-- Color of the footer line and indicator. -->
        <attr name="footerColor" format="color" />
        <!-- Height of the footer line. -->
        <attr name="footerLineHeight" format="dimension" />
        <!-- Style of the indicator. Default is triangle. -->
        <attr name="footerIndicatorStyle">
            <enum name="none" value="0" />
            <enum name="triangle" value="1" />
            <enum name="underline" value="2" />
        </attr>
        <!-- Height of the indicator above the footer line. -->
        <attr name="footerIndicatorHeight" format="dimension" />
        <!-- Left and right padding of the underline indicator. -->
        <attr name="footerIndicatorUnderlinePadding" format="dimension" />
        <!-- Padding between the bottom of the title and the footer. -->
        <attr name="footerPadding" format="dimension" />
        <!-- Position of the line. -->
        <attr name="linePosition">
            <enum name="bottom" value="0"/>
            <enum name="top" value="1"/>
        </attr>
        <!-- Color of the selected title. -->
        <attr name="selectedColor" />
        <!-- Whether or not the selected item is displayed as bold. -->
        <attr name="selectedBold" format="boolean" />
        <!-- Color of regular titles. -->
        <attr name="android:textColor" />
        <!-- Size of title text. -->
        <attr name="android:textSize" />
        <!-- Padding between titles when bumping into each other. -->
        <attr name="titlePadding" format="dimension" />
        <!-- Padding between titles and the top of the View. -->
        <attr name="topPadding" format="dimension" />
        <!-- View background -->
        <attr name="android:background"/>
    </declare-styleable>

    <declare-styleable name="UnderlinePageIndicator">
        <!-- Whether or not the selected indicator fades. -->
        <attr name="fades" format="boolean" />
        <!-- Length of the delay to fade the indicator. -->
        <attr name="fadeDelay" format="integer" />
        <!-- Length of the indicator fade to transparent. -->
        <attr name="fadeLength" format="integer" />
        <!-- Color of the selected line that represents the current page. -->
        <attr name="selectedColor" />
        <!-- View background -->
        <attr name="android:background"/>
    </declare-styleable>
</resources>