ViewPager指示器看这一篇就够了
pengMaster 2019-05-30 17:04 收藏
多功能指示器,适用于ViewPager 多场景
- 传统的文字+指示器组合
- 单纯的指示器
- 圆点轮播指示器
1.传统的文字+指示器组合
xml:
<com.example.indicatorlib.views.TabLayout
android:id="@+id/nts_top"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="center"
app:nts_active_color="#42a4d1"
app:nts_color="#42a4d1"
app:nts_corners_radius="1dp"
app:nts_inactive_color="#ff1a1e23"
app:nts_size="15sp"
app:nts_titles="@array/titles"
app:nts_weight="3dp"/>
java:
List<Fragment> lists = new ArrayList<>();
Fragment fragment1 = new TestFragment();
Fragment fragment2 = new TestFragment();
Fragment fragment3 = new TestFragment();
lists.add(fragment1);
lists.add(fragment2);
lists.add(fragment3);
BaseFragmentAdapter adapter = new BaseFragmentAdapter(getSupportFragmentManager(),lists);
mViewPager.setAdapter(adapter);
mCenterTabLayout.setViewPager(mViewPager, 1);
扩展属性:
mTabLayout.setTitles("Tab1", "Tab2", "Tab3");
mTabLayout.setTabIndex(0, true);
mTabLayout.setTitleSize(15);
mTabLayout.setStripColor(Color.RED);
mTabLayout.setStripWeight(6);
mTabLayout.setStripFactor(2);
mTabLayout.setStripType(TabLayout.StripType.LINE);
mTabLayout.setStripGravity(TabLayout.StripGravity.BOTTOM);
mTabLayout.setTypeface("fonts/typeface.ttf");
mTabLayout.setCornersRadius(3);
mTabLayout.setAnimationDuration(300);
mTabLayout.setInactiveColor(Color.GRAY);
mTabLayout.setActiveColor(Color.WHITE);
mTabLayout.setOnPageChangeListener(...);
mTabLayout.setOnTabStripSelectedIndexListener(...);
如果产品经理再次提出了`花里胡哨`的需求,那么上面的指示器就无法满足要求,为了高度解耦,
我们单纯的把指示器拿出来,然后我们就可以肆意妄为了,如下:
2.单纯的指示器
xml:
<com.example.indicatorlib.views.TabView
android:id="@+id/mIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
app:tabHeight="3dp"
app:tabColor="@color/red"
app:tabRadius="20dp"
>
</com.example.indicatorlib.views.TabView>
<android.support.v4.view.ViewPager
android:id="@+id/vpPersonManager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white_f2">
</android.support.v4.view.ViewPager
java:
List<Fragment> lists = new ArrayList<>();
Fragment fragment1 = new TestFragment();
Fragment fragment2 = new TestFragment();
lists.add(fragment1);
lists.add(fragment2);
BaseFragmentAdapter adapter = new BaseFragmentAdapter(getSupportFragmentManager(),lists);
ViewPager vpPersonManager = findViewById(R.id.vpPersonManager);
TabView tabView = findViewById(R.id.mIndicator);
vpPersonManager.setAdapter(adapter);
tabView.setViewPager(vpPersonManager);
扩展属性:
app:tabHeight="3dp"
app:tabColor="@color/red"
app:tabRadius="20dp"
3.圆点轮播指示器
扩展属性以及效果图:
Name | Support version | Preview |
---|---|---|
AnimationType.NONE | 0.0.1 | |
AnimationType.COLOR | 0.0.1 | |
AnimationType.SCALE | 0.0.1 | |
AnimationType.SLIDE | 0.0.1 | |
AnimationType.WORM | 0.0.1 | |
AnimationType.FILL | 0.0.1 | |
AnimationType.THIN_WORM | 0.0.1 | |
AnimationType.DROP | 0.0.1 | |
AnimationType.SWAP | 0.0.1 |
xml:
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.example.indicatorlib.views.PageIndicatorView
android:id="@+id/pageIndicatorView"
app:piv_viewPager="@id/viewPager"//关联ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="48dp"
attrs:piv_padding="12dp"
attrs:piv_radius="8dp" />
java:
pageIndicatorView.setAnimationType(customization.getAnimationType());
pageIndicatorView.setOrientation(customization.getOrientation());
pageIndicatorView.setRtlMode(customization.getRtlMode());
pageIndicatorView.setInteractiveAnimation(customization.isInteractiveAnimation());
pageIndicatorView.setAutoVisibility(customization.isAutoVisibility());
pageIndicatorView.setFadeOnIdle(customization.isFadeOnIdle());
通用配置:
- project build.gradle
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
- app build.gradle
dependencies {
implementation 'com.github.pengMaster:MultiIndicator:0.0.1'
}
如果存在appcompat-v7 jar包冲突:
implementation ('com.github.pengMaster:MultiIndicator:0.0.1'){
exclude(module:'com.android.support:appcompat-v7')
}
Issues
这么帅气的你,都看到这里了,给个star呗,乡里乡亲的.....