Android 中 viewpager 滑动指示器的实例代码

概述先看下效果图：这个需要用到1个开源的库，这个后面也会说下的。工程目录：

先看下效果图：

这个需要用到1个开源的 库，这个后面也会说下的。

工程目录：

1. MainActivity.java

public class MainActivity extends FragmentActivity {   private VIEwPagerFrameAdapter adapter;  //适配器（标题和内容）  private VIEwPager mPager;         private TabPageIndicator   tabbPageIndicator;   //  private UnderlinePageIndicatorEx underlinePageIndicator;  private int 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

//继承这个然后重写 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,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

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了。

<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 

<!-- 总 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中引用的，是用来切换 被选中的背景色的

<?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> 

总结

以上是内存溢出为你收集整理的Android 中 viewpager 滑动指示器的实例代码全部内容，希望文章能够帮你解决Android 中 viewpager 滑动指示器的实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。