首页 > 移动开发 > android 中 viewpager 滑动的指示器

android 中 viewpager 滑动的指示器

先看下效果图:

 

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

 

工程目录:

 

1. MainActivity.java

 

[java][/java] view plaincopy

  1. public class MainActivity extends FragmentActivity {
  2.     private ViewPagerFrameAdapter adapter;        //适配器(标题和内容)
  3.     private ViewPager mPager;
  4.     private TabPageIndicator         tabbPageIndicator;         //
  5.     private UnderlinePageIndicatorEx underlinePageIndicator;
  6.     private  int COUNT = 0;
  7.     private List<String>   titles = new ArrayList<String>(); //标题
  8.     @Override
  9.     protected void onCreate(Bundle bundle) {
  10.              super.onCreate(bundle);
  11.              requestWindowFeature(Window.FEATURE_NO_TITLE);
  12.              setContentView(R.layout.activity_main);
  13.              //标题,这里自己造的假数据
  14.              for (int j = 0; j < 3 ; j++){
  15.                    titles.add( "第"+ j +"标签卡");
  16.               }
  17.              mPager = (ViewPager)findViewById(R.id.pager);
  18.              adapter = new ViewPagerFrameAdapter(getSupportFragmentManager(),titles);
  19.              mPager.setAdapter(adapter);
  20.              //得到指示器
  21.              tabbPageIndicator = (TabPageIndicator) findViewById(R.id.tab_indicator);
  22.              tabbPageIndicator.setViewPager(mPager);
  23.              //下标
  24.              underlinePageIndicator = (UnderlinePageIndicatorEx)findViewById(R.id.underline_indicator);
  25.              underlinePageIndicator.setViewPager(mPager);
  26.              underlinePageIndicator.setFades(false);
  27.              //设置指示器
  28.              tabbPageIndicator.setOnPageChangeListener(underlinePageIndicator);
  29.     }
  30.     //adapter 没啥好说的 跟前面的一样
  31.     private class ViewPagerFrameAdapter extends FragmentStatePagerAdapter{
  32.         private List<String> title; //页面标题头部数据
  33.         public ViewPagerFrameAdapter(FragmentManager fm, List<String> title) {
  34.             super(fm);
  35.             this.title = title;
  36.         }
  37.         //根据position 返回 fragment
  38.         @Override
  39.         public Fragment getItem(int position) {
  40.             return ArrayFragment.newInstance(position);
  41.         }
  42.         //size
  43.         @Override
  44.         public int getCount() {
  45.              return title.size();
  46.         }
  47.         //顶部的title
  48.         @Override
  49.         public CharSequence getPageTitle(int position) {
  50.             if (titles != null){
  51.                 return titles.get(position).toString();
  52.             }
  53.             return super.getPageTitle(position);
  54.         }
  55.     }
  56. }

UnderlinePageIndicatorEx.java

 

 

[java][/java] view plaincopy

  1. //继承这个然后重写
  2. public class UnderlinePageIndicatorEx extends UnderlinePageIndicator{
  3.         public UnderlinePageIndicatorEx(Context context) {
  4.            super(context, null);
  5.         }
  6.         public UnderlinePageIndicatorEx(Context context, AttributeSet attrs) {
  7.             super(context, attrs, R.attr.vpiUnderlinePageIndicatorStyle);
  8.         }
  9.         public UnderlinePageIndicatorEx(Context context, AttributeSet attrs, int defStyle) {
  10.             super(context, attrs, defStyle);
  11.         }
  12.         //自身的 ViewPage传递过去
  13.         @Override
  14.         public void setViewPager(ViewPager viewPager) {
  15.             if (mViewPager == viewPager){
  16.                 return;
  17.             }
  18. //          if (mViewPager != null) {
  19. //              mViewPager.setOnPageChangeListener(null);
  20. //          }
  21.             if (viewPager.getAdapter() == null) {
  22.                 throw new IllegalStateException(" pager 没有 加入 adapter");
  23.             }
  24.             mViewPager = viewPager;
  25. //          mViewPager.setOnPageChangeListener(this);
  26.             invalidate();
  27.             post(new Runnable(){
  28.                 @Override public void run() {
  29.                     if (mFades) {
  30.                         post(mFadeRunnable);
  31.                     }
  32.                 }
  33.             });
  34.         }
  35. }

ArrayFragment.java

 

 

[java][/java] view plaincopy

  1. public class ArrayFragment extends Fragment{
  2.     private int position;
  3.     public ArrayFragment(int position){
  4.         this.position = position;
  5.     }
  6.      // 返回   viwePager 下面滑动的页面
  7.     public static ArrayFragment newInstance(int position){
  8.         return new ArrayFragment(position);
  9.     }
  10.     @Override
  11.     public void onCreate(Bundle savedInstanceState) {
  12.         super.onCreate(savedInstanceState);
  13.     }
  14.     @Override
  15.     public void onDestroy() {
  16.         super.onDestroy();
  17.     }
  18.     // 根据position 返回不同的view
  19.     @Override
  20.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  21.             Bundle savedInstanceState) {
  22.         View view = inflater.inflate(R.layout.layoutaa, null);
  23.         return view;
  24.     }
  25. }

好了接下来是 布局xml了。

 

 

[html][/html] view plaincopy

  1. <LinearLayout
  2.         xmlns:android="http://schemas.android.com/apk/res/android"
  3.         android:layout_width="fill_parent"
  4.         android:layout_height="fill_parent"
  5.         android:orientation="vertical"
  6.       >
  7.    <!--  标题      和      标题下面的  指示器  -->
  8.      <LinearLayout
  9.         android:layout_width="fill_parent"
  10.         android:layout_height="35dp"
  11.         android:orientation="vertical"
  12.         android:background="@drawable/main_header_background">
  13.                 <com.viewpagerindicator.TabPageIndicator
  14.                     android:id="@+id/tab_indicator"
  15.                     android:layout_height="wrap_content"
  16.                     android:layout_width="fill_parent"/>
  17.                 <com.test.linepagerindictor.widget.UnderlinePageIndicatorEx
  18.                     android:id="@+id/underline_indicator"
  19.                     android:layout_height="3dip"
  20.                     android:layout_width="fill_parent"
  21.                     android:layout_alignParentBottom="true"/>
  22.        </LinearLayout>
  23.        <android.support.v4.view.ViewPager
  24.         android:id="@+id/pager"
  25.         android:layout_width="fill_parent"
  26.         android:layout_height="fill_parent"/>
  27. </LinearLayout>

接下来设置 滑动指示器的style

 

 

[java][/java] view plaincopy

  1. <!-- 总 style  直接引用  这个   由  tab style  和    Indicator style 组成 -->
  2.   <style name="StyledAllIndicators" parent="@android:style/Theme.Light">
  3.       <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
  4.       <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
  5.   </style>
  6.   <!-- tab的 style -->
  7.   <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
  8.       <item name="android:background">#00000000</item>
  9.       <item name="android:textAppearance">@style/CustomTabPageIndicator_text</item>
  10.       <item name="android:textColor">@color/selector_tab</item>
  11.       <item name="android:textSize">20sp</item>
  12.       <!-- 分割线,可有可无的 -->
  13.       <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
  14.       <item name="android:dividerPadding">10dip</item>
  15.       <item name="android:showDividers">middle</item>
  16.       <item name="android:paddingTop">4dp</item>
  17.       <item name="android:paddingLeft">8dp</item>
  18.       <item name="android:paddingBottom">4dp</item>
  19.       <item name="android:paddingRight">8dp</item>
  20.       <item name="android:fadingEdge">horizontal</item>
  21.       <item name="android:fadingEdgeLength">8dp</item>
  22.   </style>
  23.   <style name="CustomTabPageIndicator_text" parent="android:TextAppearance.Medium">
  24.       <item name="android:typeface">monospace</item>
  25.   </style>
  26.   <!--  下标的指示器的颜色 -->
  27.   <style name="CustomUnderlinePageIndicator">
  28.       <item name="selectedColor">#EB5548</item>
  29.       <item name="android:background">#00000000</item>
  30.       <item name="fadeLength">1000</item>
  31.       <item name="fadeDelay">1000</item>
  32.   </style>

 

 

selector_tab.xml     这个是 选择器 在style中引用的,是用来切换 被选中的背景色的

 

[java][/java] view plaincopy

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_selected="true" android:color="#91D228" />
  4.     <item android:state_focused="true" android:color="#91D228" />
  5.     <item android:color="#dddddd" />
  6. </selector>

好了 ,基本就这些了   fragment的的那个xml  自己随意画吧, 那个开源库随后上传。


本文固定链接: http://www.devba.com/index.php/archives/3522.html | 开发吧

报歉!评论已关闭.