{"id":16558728,"url":"https://github.com/pengmaster/multiindicator","last_synced_at":"2025-03-21T11:31:28.028Z","repository":{"id":143248583,"uuid":"188978120","full_name":"pengMaster/MultiIndicator","owner":"pengMaster","description":"多功能指示器，适用于ViewPager 多场景","archived":false,"fork":false,"pushed_at":"2019-05-29T06:48:48.000Z","size":218,"stargazers_count":47,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T00:46:09.678Z","etag":null,"topics":["indicator","multiindicator","viewpager","viewpager-indicator"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pengMaster.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-28T07:35:24.000Z","updated_at":"2024-10-15T02:45:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"3e7b8746-1a77-41ce-bcca-7797019ef731","html_url":"https://github.com/pengMaster/MultiIndicator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengMaster%2FMultiIndicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengMaster%2FMultiIndicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengMaster%2FMultiIndicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pengMaster%2FMultiIndicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pengMaster","download_url":"https://codeload.github.com/pengMaster/MultiIndicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244790746,"owners_count":20510801,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["indicator","multiindicator","viewpager","viewpager-indicator"],"created_at":"2024-10-11T20:23:34.151Z","updated_at":"2025-03-21T11:31:28.013Z","avatar_url":"https://github.com/pengMaster.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ViewPager指示器有这一篇就够了\n多功能指示器，适用于ViewPager 多场景\n - 传统的文字+指示器组合\n - 单纯的指示器\n - 圆点轮播指示器\n\n## 1.传统的文字+指示器组合\n\u003cdiv\u003e\n    \u003cimg src=\"https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/ic_tabLayout.gif\" width=\"200\" height=\"356\"   alt=\"\"/\u003e\n    \u003cimg src=\"https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/ic_tabLayout_1.png\"  width=\"200\" height=\"356\"  alt=\"\"/\u003e\n    \u003cimg src=\"https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/ic_tabLayout_2.png\"  width=\"200\" height=\"356\"  alt=\"\"/\u003e\n\u003c/div\u003e\n\nxml:\n```java\n            \u003ccom.example.indicatorlib.views.TabLayout\n                android:id=\"@+id/nts_top\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"56dp\"\n                android:layout_gravity=\"center\"\n                app:nts_active_color=\"#42a4d1\"\n                app:nts_color=\"#42a4d1\"\n                app:nts_corners_radius=\"1dp\"\n                app:nts_inactive_color=\"#ff1a1e23\"\n                app:nts_size=\"15sp\"\n                app:nts_titles=\"@array/titles\"\n                app:nts_weight=\"3dp\"/\u003e\n```\njava:\n```java\n        List\u003cFragment\u003e lists = new ArrayList\u003c\u003e();\n        Fragment fragment1 = new TestFragment();\n        Fragment fragment2 = new TestFragment();\n        Fragment fragment3 = new TestFragment();\n        lists.add(fragment1);\n        lists.add(fragment2);\n        lists.add(fragment3);\n        BaseFragmentAdapter adapter = new BaseFragmentAdapter(getSupportFragmentManager(),lists);\n        mViewPager.setAdapter(adapter);\n        mCenterTabLayout.setViewPager(mViewPager, 1);\n```\n扩展属性：\n```java\n            mTabLayout.setTitles(\"Tab1\", \"Tab2\", \"Tab3\");\n            mTabLayout.setTabIndex(0, true);\n            mTabLayout.setTitleSize(15);\n            mTabLayout.setStripColor(Color.RED);\n            mTabLayout.setStripWeight(6);\n            mTabLayout.setStripFactor(2);\n            mTabLayout.setStripType(TabLayout.StripType.LINE);\n            mTabLayout.setStripGravity(TabLayout.StripGravity.BOTTOM);\n            mTabLayout.setTypeface(\"fonts/typeface.ttf\");\n            mTabLayout.setCornersRadius(3);\n            mTabLayout.setAnimationDuration(300);\n            mTabLayout.setInactiveColor(Color.GRAY);\n            mTabLayout.setActiveColor(Color.WHITE);\n            mTabLayout.setOnPageChangeListener(...);\n            mTabLayout.setOnTabStripSelectedIndexListener(...);\n```\n\n```\n    如果产品经理再次提出了`花里胡哨`的需求，那么上面的指示器就无法满足要求，为了高度解耦，\n    我们单纯的把指示器拿出来，然后我们就可以肆意妄为了，如下：\n```\n## 2.单纯的指示器\n\u003cdiv\u003e\n    \u003cimg src=\"https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/ic_tabView.gif\" width=\"200\" height=\"356\"  alt=\"\"/\u003e\n    \u003cimg src=\"https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/ic_tabView_1.png\" width=\"200\" height=\"356\"  alt=\"\"/\u003e\n    \u003cimg src=\"https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/ic_tabView_2.png\" width=\"200\" height=\"356\"  alt=\"\"/\u003e\n\u003c/div\u003e\n\nxml:\n```java\n\n            \u003ccom.example.indicatorlib.views.TabView\n                android:id=\"@+id/mIndicator\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"wrap_content\"\n                android:background=\"@color/white\"\n                app:tabHeight=\"3dp\"\n                app:tabColor=\"@color/red\"\n                app:tabRadius=\"20dp\"\n                \u003e\n\n            \u003c/com.example.indicatorlib.views.TabView\u003e\n\n            \u003candroid.support.v4.view.ViewPager\n                android:id=\"@+id/vpPersonManager\"\n                android:layout_width=\"match_parent\"\n                android:layout_height=\"match_parent\"\n                android:background=\"@color/white_f2\"\u003e\n\n            \u003c/android.support.v4.view.ViewPager\n```\njava:\n```java\n        List\u003cFragment\u003e lists = new ArrayList\u003c\u003e();\n        Fragment fragment1 = new TestFragment();\n        Fragment fragment2 = new TestFragment();\n        lists.add(fragment1);\n        lists.add(fragment2);\n        BaseFragmentAdapter adapter = new BaseFragmentAdapter(getSupportFragmentManager(),lists);\n        ViewPager vpPersonManager = findViewById(R.id.vpPersonManager);\n        TabView tabView = findViewById(R.id.mIndicator);\n        vpPersonManager.setAdapter(adapter);\n        tabView.setViewPager(vpPersonManager);\n```\n扩展属性：\n```java\n        app:tabHeight=\"3dp\"\n        app:tabColor=\"@color/red\"\n        app:tabRadius=\"20dp\"\n```\n\n## 3.圆点轮播指示器\n\n扩展属性以及效果图：\n\nName| Support version| Preview\n-------- | --- | ---\n`AnimationType.NONE`| 0.0.1 | ![anim_none](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_none.gif)\n`AnimationType.COLOR`| 0.0.1 |![anim_color](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_color.gif)\n`AnimationType.SCALE`| 0.0.1 |![anim_scale](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_scale.gif)\n`AnimationType.SLIDE`| 0.0.1 |![anim_slide](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_slide.gif)\n`AnimationType.WORM`| 0.0.1 |![anim_worm](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_worm.gif)\n`AnimationType.FILL`| 0.0.1 |![anim_worm](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_fill.gif)\n`AnimationType.THIN_WORM`| 0.0.1 |![anim_thin_worm](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_thin_worm.gif)\n`AnimationType.DROP`| 0.0.1 |![anim_drop](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_drop.gif)\n`AnimationType.SWAP`| 0.0.1 |![anim_swap](https://github.com/pengMaster/picApplyGit/blob/master/MultiIndicator/anim_swap.gif)\n\n\nxml:\n```java\n\n        \u003candroid.support.v4.view.ViewPager\n            android:id=\"@+id/viewPager\"\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\" /\u003e\n\n        \u003ccom.example.indicatorlib.views.PageIndicatorView\n            android:id=\"@+id/pageIndicatorView\"\n            app:piv_viewPager=\"@id/viewPager\"//关联ViewPager\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_alignParentBottom=\"true\"\n            android:layout_centerHorizontal=\"true\"\n            android:layout_marginBottom=\"48dp\"\n            attrs:piv_padding=\"12dp\"\n            attrs:piv_radius=\"8dp\" /\u003e\n```\njava:\n```java\n        pageIndicatorView.setAnimationType(customization.getAnimationType());\n        pageIndicatorView.setOrientation(customization.getOrientation());\n        pageIndicatorView.setRtlMode(customization.getRtlMode());\n        pageIndicatorView.setInteractiveAnimation(customization.isInteractiveAnimation());\n        pageIndicatorView.setAutoVisibility(customization.isAutoVisibility());\n        pageIndicatorView.setFadeOnIdle(customization.isFadeOnIdle());\n```\n\n##  通用配置：\n1. project build.gradle\n```java\n        allprojects {\n            repositories {\n                maven { url 'https://jitpack.io' }\n            }\n        }\n```\n2. app build.gradle\n```java\n        dependencies {\n                implementation 'com.github.pengMaster:MultiIndicator:0.0.1'\n        }\n```\n\n##  如果存在appcompat-v7 jar包冲突：\n```java\n    implementation ('com.github.pengMaster:MultiIndicator:0.0.1'){\n        exclude(module:'com.android.support:appcompat-v7')\n\n    }\n```\n\n##  Issues\n    这么帅气的你，都看到这里了，给个star呗，乡里乡亲的.....\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpengmaster%2Fmultiindicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpengmaster%2Fmultiindicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpengmaster%2Fmultiindicator/lists"}