Coder Social home page Coder Social logo

hackware1993 / magicindicator Goto Github PK

View Code? Open in Web Editor NEW
9.7K 156.0 1.5K 53.46 MB

A powerful, customizable and extensible ViewPager indicator framework. As the best alternative of ViewPagerIndicator, TabLayout and PagerSlidingTabStrip —— 强大、可定制、易扩展的 ViewPager 指示器框架。是ViewPagerIndicator、TabLayout、PagerSlidingTabStrip的最佳替代品。支持角标,更支持在非ViewPager场景下使用(使用hide()、show()切换Fragment或使用setVisibility切换FrameLayout里的View等),http://www.jianshu.com/p/f3022211821c

Java 100.00%
viewpager indicator tablayout viewpagerindicator pagerslidingtabstrip

magicindicator's Introduction

MagicIndicator

A powerful, customizable and extensible ViewPager indicator framework. As the best alternative of ViewPagerIndicator, TabLayout and PagerSlidingTabStrip.

Flutter_ConstraintLayout Another very good open source project of mine.

I have developed the world's fastest general purpose sorting algorithm, which is on average 3 times faster than Quicksort and up to 20 times faster, ChenSort

Android Arsenal Codewake

magicindicaotor.gif

Usage

Simple steps, you can integrate MagicIndicator:

  1. checkout out MagicIndicator, which contains source code and demo
  2. import module magicindicator and add dependency:
implementation project(':magicindicator')

or

repositories {
    ...
    maven {
        url "https://jitpack.io"
    }
}

dependencies {
    ...
    implementation 'com.github.hackware1993:MagicIndicator:1.6.0' // for support lib
    implementation 'com.github.hackware1993:MagicIndicator:1.7.0' // for androidx
}
  1. add MagicIndicator to your layout xml:
<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="net.lucode.hackware.magicindicatordemo.MainActivity">

    <net.lucode.hackware.magicindicator.MagicIndicator
        android:id="@+id/magic_indicator"
        android:layout_width="match_parent"
        android:layout_height="40dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>
  1. find MagicIndicator through code, initialize it:
MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator);
CommonNavigator commonNavigator = new CommonNavigator(this);
commonNavigator.setAdapter(new CommonNavigatorAdapter() {

    @Override
    public int getCount() {
        return mTitleDataList == null ? 0 : mTitleDataList.size();
    }

    @Override
    public IPagerTitleView getTitleView(Context context, final int index) {
        ColorTransitionPagerTitleView colorTransitionPagerTitleView = new ColorTransitionPagerTitleView(context);
        colorTransitionPagerTitleView.setNormalColor(Color.GRAY);
        colorTransitionPagerTitleView.setSelectedColor(Color.BLACK);
        colorTransitionPagerTitleView.setText(mTitleDataList.get(index));
        colorTransitionPagerTitleView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mViewPager.setCurrentItem(index);
            }
        });
        return colorTransitionPagerTitleView;
    }

    @Override
    public IPagerIndicator getIndicator(Context context) {
        LinePagerIndicator indicator = new LinePagerIndicator(context);
        indicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
        return indicator;
    }
});
magicIndicator.setNavigator(commonNavigator);
  1. work with ViewPager:
ViewPagerHelper.bind(magicIndicator, mViewPager);

or

work with Fragment Container(switch Fragment by hide()、show()):

mFramentContainerHelper = new FragmentContainerHelper(magicIndicator);

// ...

mFragmentContainerHelper.handlePageSelected(pageIndex);   // invoke when switch Fragment

Extend

MagicIndicator can be easily extended:

  1. implement IPagerTitleView to customize tab:
public class MyPagerTitleView extends View implements IPagerTitleView {

    public MyPagerTitleView(Context context) {
        super(context);
    }

    @Override
    public void onLeave(int index, int totalCount, float leavePercent, boolean leftToRight) {
    }

    @Override
    public void onEnter(int index, int totalCount, float enterPercent, boolean leftToRight) {
    }

    @Override
    public void onSelected(int index, int totalCount) {
    }

    @Override
    public void onDeselected(int index, int totalCount) {
    }
}
  1. implement IPagerIndicator to customize indicator:
public class MyPagerIndicator extends View implements IPagerIndicator {

    public MyPagerIndicator(Context context) {
        super(context);
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }

    @Override
    public void onPositionDataProvide(List<PositionData> dataList) {
    }
}
  1. use CommonPagerTitleView to load custom layout xml.

Now, enjoy yourself!

See extensions in app/src/main/java/net/lucode/hackware/magicindicatordemo/ext,more extensions adding...

Who developed?

[email protected]

[email protected]

Q&A MagicIndicator交流群

An intermittent perfectionist.

Visit My Blog for more articles about MagicIndicator.

订阅我的微信公众号以及时获取 MagicIndicator 的最新动态。后续也会分享一些高质量的、独特的、有**的 Flutter 和 Android 技术文章。

official_account.webp

License

MIT License

Copyright (c) 2016 hackware1993

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

More

Have seen here, give a star?(都看到这儿了,何不给个...,哎,别走啊,star还没...)

magicindicator's People

Contributors

hackware1993 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

magicindicator's Issues

和官方的TabLayout冲突了

用了你这个依赖, 然后我项目里,也用了TabLayout, 然后Tablayout会报错,.

和TabLayout一样,就是一定要和ViewPager一起用,才能起到选择标签的效果,

单独使用选不到指定的位置, 有什么方法做到不和ViewPager一起也能用吗

可不可以直接设置一个图片作为指示器 那样就可以不管是三角形或者圆形 直线

比如今天要下滑指示器是一个小圆点 明天改成三角形 后天换成心形了。。。 可不可以不论换成什么样式的指示器 只要UI给一个切图 直接设置图片作为指示器 那就近乎万能的了
或者加一个这样的指示器,因为这种的现在也比较常见:https://cloud.githubusercontent.com/assets/20198975/19397475/9a55be8e-927a-11e6-8f14-eb81c2c1b722.png 我就简单描述一下 就是一个直线,直线中间是个实心的三角形,我看目前是支持三角形的指示器,但是这个三角形指示器只有一个三角形,下面的直线没有了,或者说就是项目里的第九个指示器,但是下面的那个直线不是连在一起的,而是跟别的指示器一样和tab文字一起的

还有一种指示器也比较常见:
https://cloud.githubusercontent.com/assets/20198975/19397577/f81b074a-927a-11e6-91e6-eb01964f4eb2.png
就是一般的指示器是在文字下方一条直线,可不可以文字上方和下方都有一条直线呢
非常期待您能够实现

设置指示器背景颜色渐变

怎么设置指示器背景颜色渐变,比如说背景颜色从上到下,由灰色过渡到白色,再由白色过度号灰色?可以设置指示器背景为shape文件么?

你好 ,我是个菜鸟

我现在项目需要你这个框架 ,但是现实的是几个fragment,我看您的adapter,是textview,我不知道怎样才能改成fragment,麻烦你说下

Change Typeface font

Hi,
I don't know where should I use getPagerTitleview() for changing typeface font of tabs.
Thanks,
Vafa

提个建议

WrapPagerIndicator指示器可以加个描边,我在代码中已经修改了,但是下次你更新的时候希望能加上。…^_^
public void setStrokeColor(int strokeColor) {
mStrokeColor = strokeColor;
storkePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
storkePaint.setStyle(Paint.Style.STROKE);
storkePaint.setColor(mStrokeColor);
storkePaint.setStrokeWidth(1);
}

titie中文时,文字没有居中

使用以下这种样式(TAB WITH BADGE VIEW页面的第三个)
`MagicIndicator magicIndicator = (MagicIndicator) findViewById(R.id.magic_indicator3);
// magicIndicator.setBackgroundResource(R.drawable.round_indicator_bg);
CommonNavigator commonNavigator = new CommonNavigator(this);
commonNavigator.setAdapter(new CommonNavigatorAdapter() {
@OverRide
public int getCount() {
return mDataList == null ? 0 : mDataList.size();
}

        @Override
        public IPagerTitleView getTitleView(Context context, final int index) {
            BadgePagerTitleView badgePagerTitleView = new BadgePagerTitleView(context);

            ClipPagerTitleView clipPagerTitleView = new ClipPagerTitleView(context);
            clipPagerTitleView.setText(mDataList.get(index));
            clipPagerTitleView.setTextColor(Color.parseColor("#000000"));//默认文本颜色
            clipPagerTitleView.setClipColor(Color.WHITE);//选中后文本颜色
            clipPagerTitleView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mViewPager.setCurrentItem(index);
                }
            });
            badgePagerTitleView.setInnerPagerTitleView(clipPagerTitleView);

            return badgePagerTitleView;
        }

        @Override
        public IPagerIndicator getIndicator(Context context) {
            LinePagerIndicator indicator = new LinePagerIndicator(context);
            float navigatorHeight = context.getResources().getDimension(R.dimen.common_navigator_height_test);
            float borderWidth = UIUtil.dip2px(context, 1);
            float lineHeight = navigatorHeight - 2 * borderWidth;
            indicator.setLineHeight(lineHeight);
            indicator.setRoundRadius(lineHeight / 2);
            indicator.setYOffset(borderWidth);
            indicator.setColors(Color.parseColor("#f4ac29"));//圆形颜色
            return indicator;
        }
    });
    magicIndicator.setNavigator(commonNavigator);
    ViewPagerHelper.bind(magicIndicator, mViewPager);`

如果text是中文,没有居中。。。

去除滑动动画?

如果我的tablayout有10个,
官方自带的手动点击第10个tablayout不会闪动,
MagicIndicator会闪动。

自定义Indicator样式

作者你好,就是我现在有3个title,因为我设置了圆角背景,所以滑动到第一个title的时候左上角和左下角要变成圆角,滑到中间就要全部变成直角,滑到第三个title右上角和右下角要变成圆角,请问这个应该怎么弄

How to enable swipe to change the Tab

Hi ,
Can you please suggest solution for how to change between tabs doing swipe without using a viewpager.
eg:swipe right to left in the first tab switch to second tab like Android defaullt switch widget.
Tried to implement touch listeners but not working for the "ClipPagerTitleView" only click listener is working.

点击tab的问题?

当前选中 tab 在右边,然后点击左边几个的 tab, title 的选中效果会右往左依次掠过。能不能只要Indicator的滑动效果,title 的效果不要在中间阶段出现?

How can I set LinePagerIndicator's width

Hi,How can I set LinePagerIndicator's width ? I saw that there are three modes: MODE_EXACTLY,MODE_MATCH_EDGE and MODE_WRAP_CONTENT,but I wanna set it's width between MODE_WRAP_CONTENT and MODE_MATCH_EDGE,however,MODE_EXACTLY is too short to my requirement,how can I I set it's width? Thanks!

CommonNavigator.setIndicatorOnTop(true);

我想测试下把Indicator置于OnTop,设置了下面代码,但是没效果,indicator还是在底部。
CommonNavigator.setIndicatorOnTop(true);

是否还差点什么吗?

title较少时空间不会自动平均分配

当title只有两三个的时候不会自动平均分配空间占比,导致右侧一大片空白,比例失调,希望可以增加根据title数自动平均分配空间占比

请问,只有关联ViewPager才能使用Indecator?

我可不可以在自定义的BottomBar(类似微信导航栏),点击的时候也有相应的动画效果,切换FragmentContainerLayout里面的Fragment呢?
不执行关联代码:
SimpleViewPagerDelegate.with(magicIndicator, viewPager).delegate();

当主动设置SimplePagerTitleView左右padding后,指示器与title不能对齐。

这是我的代码:

 commonNavigator.setAdapter(new CommonNavigatorAdapter() {
            @Override
            public int getCount() {
                return titles.size();
            }

            @Override
            public IPagerTitleView getTitleView(Context context, final int i) {
                SimplePagerTitleView simplePagerTitleView = new SimplePagerTitleView(BigVipTradeDynamicActivity.this);
                simplePagerTitleView.setText(titles.get(i));
                if(i == 0){
                    simplePagerTitleView.setPadding(mHorizontalMargin, 0, tabInterval, 0);
                }else if(i == 1){
                    simplePagerTitleView.setPadding(0, 0, tabInterval, 0);
                }else if(i == 2){
                    simplePagerTitleView.setPadding(0, 0, tabInterval, 0);
                }else if(i == 3){
                    simplePagerTitleView.setPadding(0, 0, mHorizontalMargin, 0);
                }
                simplePagerTitleView.setTextSize(TypedValue.COMPLEX_UNIT_PX, mTabTitleTextSize);
                simplePagerTitleView.setNormalColor(mNormalColor);
                simplePagerTitleView.setSelectedColor(mSelectColor);
                simplePagerTitleView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        vpTradeDynamic.setCurrentItem(i);
                    }
                });
                return simplePagerTitleView;
            }

            @Override
            public IPagerIndicator getIndicator(Context context) {
                LinePagerIndicator linePagerIndicator = new LinePagerIndicator(context);
                linePagerIndicator.setMode(LinePagerIndicator.MODE_WRAP_CONTENT);
                linePagerIndicator.setColors(mSelectColor);
                return linePagerIndicator;
            }
        });

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.