ViewPager提示器1–字体变色

1.落到实处二种颜色的TextView:

 

1.1
依据当前的快慢为了演示效果自己就默许为0.6f,那么中间的分开地方就是0.6f控件的增进率
1.2
在onDraw()中大家选拔总计好的剪切地方自己去绘制文字,裁剪绘制内容部分即可
1.3
画文字是canvas.drawText(String text, float x, float y, Paint paint)
这一个参数不精晓的您得自己去google看一下了,温馨指示参数y是文字的基线,给一张图片看看吧:
图片 1

 

Java:

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();
    }
}

xml:

<com.youling.youling.ColorTrackTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="呢哈哈哈哈哈哈哈较大幅度"
    />

 

图片 2

 

2.落到实处左右分裂方向持续变色:

  当一个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);
            }
        });
    }
}

 

图片 3

 

3 结合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);
        }
    }
}

 

图片 4

到近来为止应该依旧挺简单的,就是变个色而已,有一个进退维谷的难题就是当前用的提醒器是用的LinearLayout。我们得以去网上找一个ViewPagerIndicator的源码测试一下,可是本人认为不是专门好用配备很勤奋,所以决定采纳Adapter适配器情势自己造一个车轮。其实自己最初写过一篇,下载的人还有蛮多,不过代码有标题,所以仍旧录一期视频吧,有标题大家可以团结改一下。

 

相关文章