Imitation of today's headline viewpager switch indicator, product detail indicator, and a variety of very flexible custom styles you need:
The implementation of this control refers to MagicIndicator. The renderings are as follows:
The specific code effect is as follows:
<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>
Use of 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); // The current page is not positioned in the middle 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));
In this way, you can quickly achieve a tabbed effect, and you can customize your own style at will.
Complete Demo download address: http://www.tp-shop.cn/article_id_1098.html