最简单的自定义indicator实现粘性tab

自定义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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值