仿今日头条viewpager切换指示器, 商品详情指示器,以及各种很灵活的定制自己需要的样式:
该控件的实现, 引用的是MagicIndicator. 效果图如下:
具体代码效果如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="@+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_40"
android:background="@color/bg_view"/>
<View style="@style/separator_line" />
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
MagicIndicator的使用:
mMagicIndicator = (MagicIndicator)findViewById(R.id.magic_indicator);
mViewPager = (ViewPager)findViewById(R.id.view_pager);
this.goodsId = getIntent().getStringExtra("goodsId");
this.contents = getIntent().getStringExtra("content");
this.position = getIntent().getIntExtra("position" ,0);
fragPagerAdapter = new SPProductDetailInnerTabAdapter(getSupportFragmentManager() , goodsId ,contents);
mViewPager.setAdapter(fragPagerAdapter);
// 当前页不定位到中间
final CommonNavigator commonNavigator = new CommonNavigator(this);
commonNavigator.setAdjustMode(true);
commonNavigator.setScrollPivotX(0.15f);
commonNavigator.setAdapter(new CommonNavigatorAdapter() {
@Override
public int getCount() {
return mDataList == null ? 0 : mDataList.size();
}
@Override
public IPagerTitleView getTitleView(Context context, final int index) {
SimplePagerTitleView simplePagerTitleView = new SimplePagerTitleView(context);
simplePagerTitleView.setText(mDataList.get(index));
simplePagerTitleView.setNormalColor(getResources().getColor(R.color.sub_title));
simplePagerTitleView.setSelectedColor(getResources().getColor(R.color.light_red));
simplePagerTitleView.setTextSize(12);
simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem(index);
}
});
return simplePagerTitleView;
}
@Override
public IPagerIndicator getIndicator(Context context) {
LinePagerIndicator indicator = new LinePagerIndicator(context);
indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
indicator.setYOffset(UIUtil.dip2px(context, 3));
indicator.setColors(getResources().getColor(R.color.light_red));
return indicator;
}
});
mMagicIndicator.setNavigator(commonNavigator);
mMagicIndicator.setDelegate(new SimpleViewPagerDelegate(mViewPager));
这样就可以快速实现一个tab选项卡式效果, 可以很随意自定义自己的样式.
完整Demo下载地址:Demo下载地址