Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android 中 viewpager 滑動的指示器

android 中 viewpager 滑動的指示器

編輯:關於Android編程

1. MainActivity.java   [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 [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  自己隨意畫吧, 那個開源庫隨後上傳。      
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved