1. MainActivity.java
[java]
public class MainActivity extends FragmentActivity {
private ViewPagerFrameAdapter adapter;//适配器（标题和内容）
private ViewPager mPager;
private TabPageIndicatortabbPageIndicator;//
private UnderlinePageIndicatorEx underlinePageIndicator;
privateint COUNT = 0;
private List<String>titles = new ArrayList<String>(); //标题
@Override
protected void onCreate(Bundle bundle) {
super.onCreate(bundle);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
//标题，这里自己造的假数据
for (int j = 0; j < 3 ; j++){
titles.add( "第"+ j +"标签卡");
}
mPager = (ViewPager)findViewById(R.id.pager);
adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles);
mPager.setAdapter(adapter);
//得到指示器
tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);
tabbPageIndicator.setViewPager(mPager);
//下标
underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);
underlinePageIndicator.setViewPager(mPager);
underlinePageIndicator.setFades(false);
//设置指示器
tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator);
}
//adapter 没啥好说的 跟前面的一样
private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{
private List<String> title; //页面标题头部数据
public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) {
super(fm);
this.title = title;
}
//根据position 返回 fragment
@Override
public Fragment getItem(int position) {
return ArrayFragment.newInstance(position);
}
//size
@Override
public int getCount() {
return title.size();
}
//顶部的title
@Override
public CharSequence getPageTitle(int position) {
if (titles != null){
return titles.get(position).toString();
}
return super.getPageTitle(position);
}
}
}
UnderlinePageIndicatorEx.java
[java]
//继承这个然后重写
public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
public UnderlinePageIndicatorEx(Context context) {
super(context, null);
}
public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);
}
public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
//自身的 ViewPage传递过去
@Override
public void setViewPager(ViewPager viewPager) {
if (mViewPager == viewPager){
return;
}
//if (mViewPager != null) {
//mViewPager.setOnPageChangeListener(null);
//}
if (viewPager.getAdapter() == null) {
throw new IllegalStateException(" pager 没有 加入 adapter");
}
mViewPager = viewPager;
//mViewPager.setOnPageChangeListener(this);
invalidate();
post(new Runnable(){
@Override public void run() {
if (mFades) {
post(mFadeRunnable);
}
}
});
}
}
ArrayFragment.java
[java]
public class ArrayFragment extends Fragment{
private int position;
public ArrayFragment(int position){
this.position = position;
}
// 返回viwePager 下面滑动的页面
public static ArrayFragment newInstance(int position){
return new ArrayFragment(position);
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void onDestroy() {
super.onDestroy();
}
// 根据position 返回不同的view
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.layoutaa, null);
return view;
}
}
好了接下来是 布局xml了。
[html]
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<!--标题和标题下面的指示器-->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:orientation="vertical"
android:background="@drawable/main_header_background">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/tab_indicator"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
<com.test.linepagerindictor.widget.UnderlinePageIndicatorEx
android:id="@+id/underline_indicator"
android:layout_height="3dip"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
接下来设置 滑动指示器的style
[java]
<!-- 总 style直接引用这个由tab style和Indicator style 组成 -->
<style name="StyledAllIndicators" parent="@android:style/Theme.Light">
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
<item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
</style>
<!-- tab的 style -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
<item name="android:background">#00000000</item>
<item name="android:textAppearance">@style/CustomTabPageIndicator_text</item>
<item name="android:textColor">@color/selector_tab</item>
<item name="android:textSize">20sp</item>
<!-- 分割线，可有可无的 -->
<item name="android:divider">@drawable/custom_tab_indicator_divider</item>
<item name="android:dividerPadding">10dip</item>
<item name="android:showDividers">middle</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingBottom">4dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
</style>
<style name="CustomTabPageIndicator_text" parent="android:TextAppearance.Medium">
<item name="android:typeface">monospace</item>
</style>
<!--下标的指示器的颜色 -->
<style name="CustomUnderlinePageIndicator">
<item name="selectedColor">#EB5548</item>
<item name="android:background">#00000000</item>
<item name="fadeLength">1000</item>
<item name="fadeDelay">1000</item>
</style>
selector_tab.xml这个是 选择器 在style中引用的，是用来切换 被选中的背景色的
[java]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#91D228" />
<item android:state_focused="true" android:color="#91D228" />
<item android:color="#dddddd" />
</selector>
好了 ，基本就这些了fragment的的那个xml自己随意画吧， 那个开源库随后上传。
