前言:TitlePageIndicator這個就是效果比較好。
一:定義布局文件simple_titles:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <com.viewpagerindicator.TitlePageIndicator android:id="@+id/indicator" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="10dip" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
二:代碼中使用:
setContentView(R.layout.simple_titles); mAdapter = new TestFragmentAdapter(getSupportFragmentManager()); mPager = (ViewPager)findViewById(R.id.pager); mPager.setAdapter(mAdapter); mIndicator = (TitlePageIndicator)findViewById(R.id.indicator); mIndicator.setViewPager(mPager);
其中的mAdapter在定義的時候需要實現IconPagerAdapter中的getPageTitle方法
protected static final String[] CONTENT = new String[] { "This", "Is", "A", "Test", }; /** * 定義tittle標題 */ @Override public CharSequence getPageTitle(int position) { return TestFragmentAdapter.CONTENT[position % CONTENT.length]; }
三:可修改的屬性:
<declare-styleable name="TitlePageIndicator"> <!-- 距離左側和右側的距離 --> <attr name="clipPadding" format="dimension" /> <!-- 底邊線和底邊指示的顏色 --> <attr name="footerColor" format="color" /> <!-- 底邊線的高度 --> <attr name="footerLineHeight" format="dimension" /> <!-- 指示樣式選擇,尖角還條形 --> <attr name="footerIndicatorStyle"> <enum name="none" value="0" /> <enum name="triangle" value="1" /> <enum name="underline" value="2" /> </attr> <!-- 指示的高度 --> <attr name="footerIndicatorHeight" format="dimension" /> <!-- 效果就是指示變寬了 --> <attr name="footerIndicatorUnderlinePadding" format="dimension" /> <!-- 文字tittle和底邊指示的距離 --> <attr name="footerPadding" format="dimension" /> <!-- 指示的位置,tittle的上面,還是tittle的下面 --> <attr name="linePosition"> <enum name="bottom" value="0" /> <enum name="top" value="1" /> </attr> <!-- 被選擇tittle的顏色 --> <attr name="selectedColor" /> <!-- 被選擇的tittle顯示是否加粗 --> <attr name="selectedBold" format="boolean" /> <!-- 未被選擇的tittle的顏色 --> <attr name="android:textColor" /> <!-- 文字的大小 --> <attr name="android:textSize" /> <!-- 下一個item距離上一個item多遠時,上一個item開始移動消失 --> <attr name="titlePadding" format="dimension" /> <!-- 指示和上邊view的距離 --> <attr name="topPadding" format="dimension" /> <!-- 整體的背景色 --> <attr name="android:background" /> </declare-styleable>
四:使用自定義屬性
1.布局中使用:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <com.viewpagerindicator.TitlePageIndicator android:id="@+id/indicator" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#18FF0000" android:padding="10dip" android:textColor="#AA000000" app:footerColor="#FFAA2222" app:footerIndicatorHeight="3dp" app:footerIndicatorStyle="underline" app:footerLineHeight="1dp" app:selectedBold="true" app:selectedColor="#FF000000" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
3.代碼中使用:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.simple_titles); mAdapter = new TestFragmentAdapter(getSupportFragmentManager()); mPager = (ViewPager)findViewById(R.id.pager); mPager.setAdapter(mAdapter); TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicator); mIndicator = indicator; indicator.setViewPager(mPager); final float density = getResources().getDisplayMetrics().density; indicator.setBackgroundColor(0x18FF0000); indicator.setFooterColor(0xFFAA2222); indicator.setFooterLineHeight(1 * density); //1dp indicator.setFooterIndicatorHeight(3 * density); //3dp indicator.setFooterIndicatorStyle(IndicatorStyle.Underline); indicator.setTextColor(0xAA000000); indicator.setSelectedColor(0xFF000000); indicator.setSelectedBold(true); }
3.theme使用:
設置主題其中StyledIndicators可以自己隨便定義,然后在配置文件中使用即可:
<style name="StyledIndicators" parent="@android:style/Theme.Light"> <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item> </style> <style name="CustomTitlePageIndicator"> <item name="android:background">#18FF0000</item> <item name="footerColor">#FFFF7F24</item> <item name="footerLineHeight">1dp</item> <item name="footerIndicatorHeight">2dp</item> <item name="linePosition">top</item> <item name="titlePadding">30dp</item> <item name="footerIndicatorStyle">underline</item> <item name="android:textColor">#AAFF7F24</item> <item name="selectedColor">#FFFF7F24</item> <item name="selectedBold">true</item> </style>
使用主題:
<activity android:name=".SampleTitlesStyledTheme" android:label="Titles/Styled (via theme)" 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>
五:在使用的時候,可以點擊當前被選擇的tittle,觸發點擊事件,只需要實現OnCenterItemClickListener即可:
public class SampleTitlesCenterClickListener extends BaseSampleActivity implements OnCenterItemClickListener { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.simple_titles); mAdapter = new TestFragmentAdapter(getSupportFragmentManager()); mPager = (ViewPager)findViewById(R.id.pager); mPager.setAdapter(mAdapter); TitlePageIndicator indicator = (TitlePageIndicator)findViewById(R.id.indicator); indicator.setViewPager(mPager); indicator.setFooterIndicatorStyle(IndicatorStyle.Underline); indicator.setOnCenterItemClickListener(this); mIndicator = indicator; } @Override public void onCenterItemClick(int position) { Toast.makeText(this, "You clicked the center title!", Toast.LENGTH_SHORT).show(); } }
也可以設置滑動監聽:
mIndicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { Toast.makeText(SampleTitlesWithListener.this, "Changed to page " + position, Toast.LENGTH_SHORT).show(); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } });
源碼以及Demo下載地址:http://download.csdn.net/detail/as294985925/6796117