仿今日头条/商城商品详情指示器

来源：互联网发布：学cnc编程编辑：程序博客网时间：2024/05/11 17:12

仿今日头条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下载地址

0 0