工程: https://github.com/LillteZheng/ViewPagerHelper
Tab 指示器效果圖
三角形版本 | 條形狀版本 | 文字顏色漸變方式,加了滾動效果 |
---|---|---|
使用
主要爲 TabIndicator 這個類,在佈局中,把它放在viewpager的上面即可,如下:
佈局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_fragment_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.zhengsr.viewpagerhelper.tab.TabActivity">
<com.zhengsr.viewpagerlib.indicator.TabIndicator
android:id="@+id/line_indicator"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:background="@color/black_ff"
app:tab_color="@color/white"
app:tab_width="25dp"
app:tab_height="5dp"
app:tab_text_default_color="@color/white_ff"
app:tab_text_change_color="@color/white"
app:tab_show="true"
app:tab_text_type="normaltext"
app:tab_textsize="16sp"
app:visiabel_size="3"
app:tap_type="tri"
>
</com.zhengsr.viewpagerlib.indicator.TabIndicator>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:background="@color/gray_cccc"
android:layout_height="wrap_content"/>
</LinearLayout>
你可以通過這些屬性,自由配置三角形,條狀,或者只使用文字顏色變化,自定義屬性的名字跟它的功能一樣。
TabIndicator 默認支持滾動,也可以設置不可滾動;
當然也可以動態配置,接着看看數據這麼初始化:
初始化
for (String string : mTitle) {
CusFragment fragment = CusFragment.newInStance(string);
mFragments.add(fragment);
}
final ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new CusAdapter(getSupportFragmentManager()));
/**
* 把 TabIndicator 跟viewpager關聯起來
*/
TabIndicator tabIndecator = (TabIndicator) findViewById(R.id.line_indicator);
//設置viewpager滑動速度
tabIndecator.setViewPagerSwitchSpeed(viewPager,600);
tabIndecator.setTabData(viewPager,mTitle, new TabIndicator.TabClickListener() {
@Override
public void onClick(int position) {
//頂部點擊的方法公佈出來
viewPager.setCurrentItem(position);
}
});
代碼幫助
可以通過代碼去查看怎麼配置