打造炫酷通用的ViewPager指示器 - 玩轉字體變色

1.概述

　　最近一直都在仿着其他項目的效果在做，仿內涵段子，二手車之家等等。會不會有一天被抓還真是有點心虛，我這分明是給這些APP打廣告。等這些效果基本講完就開始設計模式和系統框架一整套的視頻也就會出來了，等總的訪問量達到100萬之後就會利用空餘的時間去錄製Java基礎和Android基礎，請各位多多start和suggest。我們來看一下效果：
　　
　　

這裏寫圖片描述

2．效果實現　

2.1 整合上一個實例：

　　底部Fragment切換以及列表加輪播條都是從上一篇博客Android Fragment 從源碼的角度去解析（下）中直接拿過來的效果，我們這裏主要實現的是首頁ViewPager指示器的變色效果以及切換效果。
　　其實我早就想寫這個效果了，可能是那時候腦子短路了沒有去過多的想，後來自己想到了實現方式也沒有去寫怕繞彎子在網上對比了一下才開始的，那麼我們就徹底的來實現一下。
　　
2.2 實現思路：

　　我們看到這效果之後，就會尼瑪網上有沒有？不要害怕不要擔心其實分析了之後自己寫也很簡單的：
　　2.2.1 我們肯定要自定義View但是繼承自誰呢？View or TextView 其實這裏最好繼承自TextView，這分明就是一個TextView，而且不需要測量寬高，你看TextView的onMesure()方法你就知道要比繼承自View少多少代碼。
　　2.2.2 怎樣才能達到變色？肯定需要去繪製，只要搞兩個畫筆不斷的繪製各自的區域就能出來。
　　2.2.3 還是不會，但是得動起來才知道，我們先實現一個TextView兩種顏色再說。　　

2.3 實現兩種顏色的TextView：
　　我們先實現一下簡單的效果一個TextView兩種顏色，黑色和紅色吧？大致的思路就是：
　　2.3.1 根據當前的進度爲了演示效果我就默認爲0.6f，那麼中間的分割位置就是0.6f控件的寬度
　　*2.3.2 在onDraw()中我們利用計算好的分割位置自己去繪製文字，裁剪繪製內容部分即可　　2.3.3 畫文字是canvas.drawText(String text, float x, float y, Paint paint) 這些參數不瞭解的你得自己去google看一下了，溫馨提示**參數y是文字的基線，給一張圖片看看吧：
　　

這裏寫圖片描述

/**
 * Created by Darren on 2016/12/5.
 * Email: [email protected]
 * Description:  文字顏色跟蹤的TextView
 */

public class ColorTrackTextView extends TextView {
    // 默認的字體顏色的畫筆
    private Paint mOriginPaint;
    // 改變的字體顏色的畫筆
    private Paint mChangePaint;
    // 當前的進度
    private float mCurrentProgress = 0.6f;
    private String TAG = "CTTV";

    // 當前文本
    private String mText;

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

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

    public ColorTrackTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        mOriginPaint = getPaintByColor(Color.BLACK);
        mChangePaint = getPaintByColor(Color.RED);
    }

    /**
     * 獲取畫筆根據不同的顏色
     */
    private Paint getPaintByColor(int color) {
        Paint paint = new Paint();
        // 抗鋸齒
        paint.setAntiAlias(true);
        // 仿抖動
        paint.setDither(true);
        paint.setColor(color);
        // 字體的大小設置爲TextView的文字大小
        paint.setTextSize(getTextSize());
        return paint;
    }


    /**
     * 這裏肯定是自己去畫  不能用super
     */
    @Override
    protected void onDraw(Canvas canvas) {
        // 獲取當前文本
        mText = getText().toString();
        // 獲取控件寬度
        int width = getWidth();
        if (!TextUtils.isEmpty(mText)) {
            // 根據當前進度計算中間位置
            int middle = (int) (width * mCurrentProgress);
            drawOrigin(canvas, middle);
            drawChange(canvas, middle);
        }
    }

    /**
     * 畫變色的字體部分
     */
    private void drawChange(Canvas canvas, int middle) {
        drawText(canvas, mChangePaint, 0, middle);
    }

    /**
     * 畫不變色的字體部分
     */
    private void drawOrigin(Canvas canvas, int middle) {
        drawText(canvas, mOriginPaint, middle, getWidth());
    }

    /**
     * 繪製文本根據指定的位置
     *
     * @param canvas canvas畫布
     * @param paint  畫筆
     * @param startX 開始的位置
     * @param endX   結束的位置
     */
    private void drawText(Canvas canvas, Paint paint, int startX, int endX) {
        // 保存畫筆狀態
        canvas.save();
        // 截取繪製的內容，待會就只會繪製clipRect設置的參數部分
        canvas.clipRect(startX, 0, endX, getHeight());
        // 獲取文字的範圍
        Rect bounds = new Rect();
        mOriginPaint.getTextBounds(mText, 0, mText.length(), bounds);
        // 獲取文字的Metrics 用來計算基線
        Paint.FontMetricsInt fontMetrics = mOriginPaint.getFontMetricsInt();
        // 獲取文字的寬高
        int fontTotalHeight = fontMetrics.bottom - fontMetrics.top;
        // 計算基線到中心點的位置
        int offY = fontTotalHeight / 2 - fontMetrics.bottom;
        // 計算基線位置
        int baseline = (getMeasuredHeight() + fontTotalHeight) / 2 - offY;
        canvas.drawText(mText, getMeasuredWidth() / 2 - bounds.width() / 2, baseline, paint);
        // 釋放畫筆狀態
        canvas.restore();
    }
}

　　看上面的代碼其實還是挺簡單的，我截取了一張效果圖
　　

這裏寫圖片描述

　　
　　2.4 實現左右不同方向不斷變色：
　　
　　當一個TextView有了兩種文字顏色之後，我們接下來就不斷的控制當前的進度mCurrentProgress變量不斷的繪製然後給兩個朝向從左到右，從右到左，還把寫死的兩個顏色值變成自定義的屬性，自定義屬性應該不用說了吧？如果實在不行等週末看視頻吧，這裏就不做過多的講解。我這裏只貼出修改部分代碼，如果覺得有點扯那就下載完整代碼吧：

    // 當前朝向
    private Direction mDirection = DIRECTION_LEFT;
    // 繪製的朝向枚舉
    public enum Direction {
        DIRECTION_LEFT, DIRECTION_RIGHT
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 獲取當前文本
        mText = getText().toString();
        // 獲取控件寬度
        int width = getWidth();
        if (!TextUtils.isEmpty(mText)) {
            // 根據當前進度計算中間位置
            int middle = (int) (width * mCurrentProgress);

            // 根據不同的朝向去畫字體
            if (mDirection == DIRECTION_LEFT) {
                drawOriginDirectionLeft(canvas, middle);
                drawChangeDirectionLeft(canvas, middle);
            }
            if (mDirection == DIRECTION_RIGHT) {
                drawOriginDirectionRight(canvas, middle);
                drawChangeDirectionRight(canvas, middle);
            }
        }
    }

    /**
     * 畫朝向右邊變色字體
     */
    private void drawChangeDirectionRight(Canvas canvas, int middle) {
        drawText(canvas, mChangePaint, getWidth() - middle, getWidth());
    }

    /**
     * 畫朝向左邊默認色字體
     */
    private void drawOriginDirectionRight(Canvas canvas, int middle) {
        drawText(canvas, mOriginPaint, 0, getWidth() - middle);
    }

    /**
     * 畫朝向左邊變色字體
     */
    private void drawChangeDirectionLeft(Canvas canvas, int middle) {
        drawText(canvas, mChangePaint, 0, middle);
    }

    /**
     * 畫朝向左邊默認色字體
     */
    private void drawOriginDirectionLeft(Canvas canvas, int middle) {
        drawText(canvas, mOriginPaint, middle, getWidth());
    }

    /**
     * 設置當前的進度
     *
     * @param currentProgress 當前進度
     */
    public void setCurrentProgress(float currentProgress) {
        this.mCurrentProgress = currentProgress;
        // 重新繪製
        invalidate();
    }

    /**
     * 設置繪製方向，從右到左或者從左到右
     *
     * @param direction 繪製方向
     */
    public void setDirection(Direction direction) {
        this.mDirection = direction;
    }

　　接下來我們寫一個主Activity做一下測試：

    public class MainActivity extends AppCompatActivity {

    private ColorTrackTextView mCttv;
    private String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mCttv = (ColorTrackTextView) findViewById(R.id.tv);
    }

    // onClick事件寫在了不居中  --> android:onClick="left"
    public void left(View view) {
        // 設置朝向
        mCttv.setDirection(ColorTrackTextView.Direction.DIRECTION_LEFT);
        // 用屬性動畫來控制，當然也可以用線程去控制
        ObjectAnimator animator = ObjectAnimator.ofFloat(mCttv, "progress", 0, 1);
        animator.setDuration(2000)
                .start();
        // 添加動畫的監聽，不斷的改變當前的進度
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float progress = (float) animation.getAnimatedValue();
                Log.e(TAG, "progress --> " + progress);
                mCttv.setCurrentProgress(progress);
            }
        });
    }

    // 這與上面類似，只是朝向不一樣
    public void right(View view) {
        mCttv.setDirection(ColorTrackTextView.Direction.DIRECTION_RIGHT);
        ObjectAnimator animator = ObjectAnimator.ofFloat(mCttv, "progress", 0, 1);
        animator.setDuration(2000)
                .start();
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float progress = (float) animation.getAnimatedValue();
                Log.e(TAG, "progress --> " + progress);
                mCttv.setCurrentProgress(progress);
            }
        });
    }
}

　　終極效果：
　　

這裏寫圖片描述

　2.5 結合ViewPager：

public class MainActivity extends AppCompatActivity {

    private String[] items = {"直播", "推薦", "視頻", "圖片", "段子", "精華"};
    private LinearLayout mIndicatorContainer;
    private List<ColorTrackTextView> mIndicators;
    private ViewPager mViewPager;
    private String TAG = "ViewPagerActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        mIndicators = new ArrayList<>();
        mIndicatorContainer = (LinearLayout) findViewById(R.id.indicator_view);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        initIndicator();
        initViewPager();
    }

    /**
     * 初始化ViewPager
     */
    private void initViewPager() {
        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return ItemFragment.newInstance(items[position]);
            }

            @Override
            public int getCount() {
                return items.length;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {

            }
        });

        /**
         * 添加一個切換的監聽那個setOnPageChangeListener過時了
         * 這個看源碼去吧
         */
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, 
                int positionOffsetPixels) {
                Log.e(TAG, "position --> " + position + " positionOffset --> " + positionOffset);
                if (positionOffset > 0) {
                    // 獲取左邊
                    ColorTrackTextView left = mIndicators.get(position);
                    // 設置朝向
                    left.setDirection(ColorTrackTextView.Direction.DIRECTION_RIGHT);
                    // 設置進度  positionOffset 是從 0 一直變化到 1 不信可以看打印
                    left.setCurrentProgress(1-positionOffset);

                    // 獲取右邊
                    ColorTrackTextView right = mIndicators.get(position + 1);
                    right.setDirection(ColorTrackTextView.Direction.DIRECTION_LEFT);
                    right.setCurrentProgress(positionOffset);
                }
            }
        });

        // 默認一進入就選中第一個
        ColorTrackTextView left = mIndicators.get(0);
        left.setDirection(ColorTrackTextView.Direction.DIRECTION_RIGHT);
        left.setCurrentProgress(1);
    }

    /**
     * 初始化可變色的指示器
     */
    private void initIndicator() {
        for (int i = 0; i < items.length; i++) {
            // 動態添加顏色跟蹤的TextView
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
            params.weight = 1;
            ColorTrackTextView colorTrackTextView = new ColorTrackTextView(this);
            // 設置兩種顏色
            colorTrackTextView.setOriginColor(Color.BLACK);
            colorTrackTextView.setChangeColor(Color.RED);
            colorTrackTextView.setText(items[i]);
            colorTrackTextView.setLayoutParams(params);
            // 把新的加入LinearLayout容器
            mIndicatorContainer.addView(colorTrackTextView);
            // 加入集合
            mIndicators.add(colorTrackTextView);
        }
    }
}

這裏寫圖片描述

　　到目前爲止應該還是挺簡單的，就是變個色而已，有一個棘手的問題就是目前用的指示器是用的LinearLayout。我們可以去網上找一個ViewPagerIndicator的源碼測試一下，但是我覺得不是特別好用配置很麻煩，所以決定採用Adapter適配器模式自己造一個輪子。其實自己早期寫過一篇,下載的人還有蠻多,可是代碼有問題，所以還是錄一期視頻吧，有問題大家可以自己改一下。

附視頻地址：http://pan.baidu.com/s/1jI9PgUE

打造炫酷通用的ViewPager指示器 - 玩轉字體變色

1.概述

2．效果實現

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

打造炫酷通用的ViewPager指示器 - 玩轉字體變色

Android：Activity統一堆棧管理（實現隨時finish特定或是所有Activty）

【ImageView】圖片自適應及android:scaleType屬性

微信熱修復Tinker使用

native 嵌套H5彈出虛擬鍵盤遮擋界面及其input 文本框上提及其置頂顯示

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結