圖片發(fā)自簡書App

由于個人使用慕課網(wǎng)APP和網(wǎng)易云音樂APP比較多棠枉，發(fā)現(xiàn)兩者都有這種指示器，現(xiàn)動手實現(xiàn)下颠蕴。

分析：

一條線段埠对，在標題之間移動，移動到兩個標題中間時長度最長裁替，反之，移動到標題正下方時最短貌笨。也就是說弱判，該線段在水平位移的同時，長度也隨之變化锥惋，接近左邊標題時昌腰，長度與位移成正相關(guān)，接近右邊標題時膀跌，長度與位移成負相關(guān)遭商。這本質(zhì)上是兩個二元一次方程，求系數(shù)和常數(shù)項的問題捅伤。起點終點都有值劫流，可解。

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.util.SparseArray;
import android.util.SparseIntArray;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.viewpager.widget.ViewPager;

import com.sony.dtv.moocnavbar.R;

import java.util.List;

public class MoocNavBar extends LinearLayout {

    private List<String> titles;
    private Context context;
    private View indictor;
    private SparseIntArray toLeftMap = new SparseIntArray();//title到left的距離
    private int defaultPos = 0; //默認pos
    private int minW = 15;  //指示器的最小width

    public MoocNavBar(Context context) {
        this(context, null);
    }

    public MoocNavBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MoocNavBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        setOrientation(VERTICAL);
    }

    public void setTitle(List<String> title) {
        this.titles = title;
        //titles
        LinearLayout titleContainer = new LinearLayout(context);
        titleContainer.setOrientation(HORIZONTAL);
        LayoutParams titleLP = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        titleContainer.setLayoutParams(titleLP);
        fillTitle(titleContainer, title);
        addView(titleContainer);
        //indictor
        indictor = new View(context);
        LinearLayout.LayoutParams indictorLP = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        indictorLP.bottomMargin = 10;
        indictorLP.width = minW;
        indictorLP.height = 6;
        indictor.setLayoutParams(indictorLP);
        indictor.setBackgroundResource(R.drawable.nav_indictor_bg);
        addView(indictor);
    }

    private void fillTitle(final LinearLayout titleContainer, List<String> titles) {
        for (int i = 0; i < titles.size(); i++) {
            String s = titles.get(i);
            final TextView titleItemView = new TextView(context);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            titleItemView.setLayoutParams(params);
            titleItemView.setText(s);
            titleItemView.setTextColor(Color.BLACK);
            titleItemView.setPadding(30, 10, 30, 10);
            final int finalI = i;
            titleItemView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    titleItemView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                    int left = titleItemView.getWidth() / 2 + titleItemView.getLeft();
                    Log.e("TAG", finalI + " : " + left);
                    toLeftMap.append(finalI, left);
                    if (finalI == defaultPos) {
                        //
                        moveIndictor(finalI, 0);
                    }
                }
            });
            titleContainer.addView(titleItemView);
        }
    }

    public void setViewPager(ViewPager viewPager) {
        viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                moveIndictor(position, positionOffset);
            }
        });
    }

    //根據(jù)頁面切換過程丛忆，改變指示器位置和寬度
    private void moveIndictor(int position, float positionOffset) {
        //在某兩個page之間滑動時祠汇，獲取對應的兩個title的中點位置
        int l1 = toLeftMap.get(position);
        int l2 = toLeftMap.get(position + 1);
        //兩點間距
        int datL = l2 - l1;
        //指示器中點應該在哪個位置
        int middle = (int) (l1 + datL * positionOffset);
        //指示器寬度最大值
        int maxW = datL / 3 * 2;
        //指示器最大最小值差距
        int datW = maxW - minW;
        //實際寬度
        int realW;
        if (positionOffset <= 0.5) {
            realW = (int) (minW + 2 * positionOffset * datW);
        } else {
            realW = (int) (minW + (1 - positionOffset) * 2 * datW);
        }
        //設(shè)置左右位置
        indictor.setLeft(middle - realW / 2);
        indictor.setRight(middle + realW / 2);
    }

}