在Android开发中,经常会有viewpager滑动指示器的功能,比较常用的:
- Android原生的 TabLayout
- JakeWharton大神的 ViewPagerIndicator
上面两种,用法自行Google,都比较简单。但是,如果设计给的指示器是一个自己设计的图或者其他的?又或者,确实不想因为一个页面而进入一个第三方库?那么,我们就需要自己去写一个指示器了。
今天重点:
怎么自定义一个任何样式的指示器呢?
- 首先,其实要明白指示器与viewpager联动的关联在哪里
- 其次,就是定义我们的指示器(我下面展示的是指示器与所指示的内容彻底分离,当然可以放在一起,但重点是讲指示器~)
那么,就开始吧。
联动的关系
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) indicator.getLayoutParams();
float left = i * viewWidth + viewWidth / 2 - indicator.getMeasuredWidth() / 2 + v * viewWidth;
params.leftMargin = (int) left;
indicator.setLayoutParams(params);
if (mListener != null) {
mListener.onPageScrolled(i, v, i1);
}
}
@Override
public void onPageSelected(int i) {
if (mListener != null) {
mListener.onPageSelected(i);
}
}
@Override
public void onPageScrollStateChanged(int i) {
if (mListener != null) {
mListener.onPageScrollStateChanged(i);
}
}
});
- 重点就是onPageScrolled这个回调,三个参数
- position (i) 当前页面,你点击滑动的页面
- offset (v) 当前页面偏移的百分比
- offsetPixels (i1) 当前页面偏移的像素位置
- indicator 是我的指示器view(ImageView)
- viewWidth 是指示器所指示的内容的宽度
- 通过设置leftMargin,来动态改变indicator的位置
使用上述方式,其实就是将你的指示器view与viewpager滑动关联,即滑动viewpager时,指示器随着滑动的偏移量移动位置
还有一种方式,是在onPageScrolled里增加view的滑动动画,但是这样就无法随着viewpager偏移去偏移了。
float left = i * viewWidth + viewWidth / 2 - indicator.getMeasuredWidth() / 2 + v * viewWidth;
indicator.animate().translationX(left).setDuration(200).start();
到此,你的indicator就可以随便滑动了,随便你设置什么图片
实现上述的indicator,其实就这么简单~
网友评论