package com.viewpagerindicator.sample; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import com.viewpagerindicator.TabPageIndicator; public class SampleTabsDefault extends FragmentActivity { private static final String[] CONTENT = new String[] { "Recent", "Artists", "Albums", "Songs", "Playlists", "Genres" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.simple_tabs); FragmentPagerAdapter adapter = new GoogleMusicAdapter(getSupportFragmentManager()); ViewPager pager = (ViewPager)findViewById(R.id.pager); pager.setAdapter(adapter); TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator); indicator.setViewPager(pager); } class GoogleMusicAdapter extends FragmentPagerAdapter { public GoogleMusicAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return TestFragment.newInstance(CONTENT[position % CONTENT.length]); } @Override public CharSequence getPageTitle(int position) { return CONTENT[position % CONTENT.length].toUpperCase(); } @Override public int getCount() { return CONTENT.length; } } }
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <com.viewpagerindicator.TabPageIndicator android:id="@+id/indicator" android:layout_height="wrap_content" android:layout_width="fill_parent" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
1、layout里面用到的是
com.viewpagerindicator.TabPageIndicator
2、这个会用到
getPageTitle
来显示tab的名字
3、adapter可以实现 implements IconPagerAdapter,重写
@Override public int getIconResId(int index) { return ICONS[index]; }
这样可以在tab显示icon
4、修改样式
<activity android:name=".SampleTabsStyled" android:label="Tabs/Styled" android:theme="@style/StyledIndicators"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="com.jakewharton.android.viewpagerindicator.sample.SAMPLE" /> </intent-filter> </activity>
<resources> <style name="StyledIndicators" parent="@android:style/Theme.Light"> <item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item> <item name="vpiLinePageIndicatorStyle">@style/CustomLinePageIndicator</item> <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item> <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item> <item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item> </style> <style name="CustomTitlePageIndicator"> <item name="android:background">#18FF0000</item> <item name="footerColor">#FFAA2222</item> <item name="footerLineHeight">1dp</item> <item name="footerIndicatorHeight">3dp</item> <item name="footerIndicatorStyle">underline</item> <item name="android:textColor">#AA000000</item> <item name="selectedColor">#FF000000</item> <item name="selectedBold">true</item> </style> <style name="CustomLinePageIndicator"> <item name="strokeWidth">4dp</item> <item name="lineWidth">30dp</item> <item name="unselectedColor">#FF888888</item> <item name="selectedColor">#FF880000</item> </style> <style name="CustomCirclePageIndicator"> <item name="fillColor">#FF888888</item> <item name="strokeColor">#FF000000</item> <item name="strokeWidth">2dp</item> <item name="radius">10dp</item> <item name="centered">true</item> </style> <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator"> <item name="android:background">@drawable/custom_tab_indicator</item> <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item> <item name="android:textColor">#FF555555</item> <item name="android:textSize">16sp</item> <item name="android:divider">@drawable/custom_tab_indicator_divider</item> <item name="android:dividerPadding">10dp</item> <item name="android:showDividers">middle</item> <item name="android:paddingLeft">8dp</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">#FFCC0000</item> <item name="android:background">#FFCCCCCC</item> <item name="fadeLength">1000</item> <item name="fadeDelay">1000</item> </style> </resources>