自定义indicator实现粘性tab,先看一下效果:
public class MyIndicator extends View {
private Context context;
private Paint mPaint;
private RectF rect;
private List<PositionData> positionList;
private Interpolator startInterpolator;
private Interpolator endInterpolator;
public MyIndicator(Context context) {
this(context, null);
}
public MyIndicator(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
mPaint = new Paint();
mPaint.setColor(Color.RED);
mPaint.setAntiAlias(true);
rect = new RectF();
positionList = new ArrayList<>();
startInterpolator = new AccelerateInterpolator();
endInterpolator = new DecelerateInterpolator();
}
@Override
protected void onDraw(Canvas canvas) {
Path path = new Path();
path.addRoundRect(rect, UIUtil.dip2px(context, 4), UIUtil.dip2px(context, 4), Path.Direction.CW);
canvas.drawPath(path, mPaint);
}
public void setViewpager(ViewPager viewpager) {
int screenWidth = ScreenUtils.getScreenWidth(context);
int tabWidth = screenWidth / 3;
for (int i = 0; i < 3; i++) {
PositionData p = new PositionData();
p.left = i * tabWidth;
p.right = (i + 1) * tabWidth;
positionList.add(p);
}
viewpager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.d("MyIndicator", "position" + position + "positionOffset====" + positionOffset + "positionOffsetPixels====" + positionOffsetPixels);
PositionData currentPD = positionList.get(position);
//left坐标减速变化,right坐标加速变化,即实现sticky效果
rect.left = currentPD.left + startInterpolator.getInterpolation(positionOffset) * (currentPD.right - currentPD.left);
rect.right = currentPD.right + endInterpolator.getInterpolation(positionOffset) * (currentPD.right - currentPD.left);
rect.top = 0;
rect.bottom = UIUtil.dip2px(context, 10);
invalidate();
}
});
}
//保存位置参数
public class PositionData {
public int left;
public int right;
}
//activity代码
package com.c.cusindicator;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private ViewPager viewpager;
private MyIndicator indicator;
private TextView t1;
private TextView t2;
private TextView t3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = findViewById(R.id.viewpager);
indicator = findViewById(R.id.indicator);
t1 = findViewById(R.id.t1);
t2 = findViewById(R.id.t2);
t3 = findViewById(R.id.t3);
viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int i) {
MFragment f = new MFragment();
Bundle bundle = new Bundle();
bundle.putInt("bundle", i);
f.setArguments(bundle);
return f;
}
@Override
public int getCount() {
return 3;
}
});
indicator.setViewpager(viewpager);
}
}
//布局代码
<?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=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="horizontal">
<TextView
android:id="@+id/t1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp" />
<TextView
android:id="@+id/t2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp" />
<TextView
android:id="@+id/t3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.c.cusindicator.MyIndicator
android:id="@+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>