• android 彩虹进度条自定义view实现

            实现一个彩虹色进度条功能，不说明具体用途大家应该能猜到。想找别人造的轮子，但是没有合适的，所以决定自己实现一个。

    相关知识

    android 自定义view

    LinearGradient 线性渐变

    实现步骤

    自定义view

    自定义一个TmcView类继承View

    重写两个构造方法。构造方法一共有4个，这里边重写两个

    重写ongSizeChanged方法，用来获取控件宽、高，来计算内部组件尺寸。

    重写onDraw方法，里边要描画背景drawBackground，分段数据drawSection，和seekbar图片drawImage。

    1. import android.content.Context;
    2. import android.graphics.Canvas;
    3. import android.util.AttributeSet;
    4. import android.view.View;
    5.  
    6. import androidx.annotation.Nullable;
    7.  
    8. import java.util.List;
    9.  
    10. public class TmcView extends View {
    11.  
    12.     public TmcView(Context context) {
    13.         super(context);
    14.     }
    15.  
    16.     public TmcView(Context context, @Nullable AttributeSet attrs) {
    17.         super(context, attrs);
    18.     }
    19.  
    20.     @Override
    21.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    22.         super.onSizeChanged(w, h, oldw, oldh);
    23.     }
    24.  
    25.  
    26.     @Override
    27.     protected void onDraw(Canvas canvas) {
    28.         super.onDraw(canvas);
    29.         drawBackground(canvas);
    30.         drawSection(canvas);
    31.         drawImage(canvas);
    32.     }
    33.  
    34.     /**
    35.      * 画背景
    36.      * @param canvas 画布
    37.      */
    38.     private void drawBackground(Canvas canvas) {
    39.     }
    40.  
    41.     /**
    42.      * 画分段数据
    43.      * @param canvas 画布
    44.      */
    45.     private void drawSection(Canvas canvas) {
    46.     }
    47.  
    48.     /**
    49.      * 画图片
    50.      * @param canvas 画布
    51.      */
    52.     private void drawImage(Canvas canvas) {
    53.     }
    54.  
    55.     /**
    56.      * 更新view
    57.      * @param total 总长度
    58.      * @param rest 剩余长度
    59.      * @param sections 分段数据
    60.      */
    61.     public void updateView(int total, int rest, List sections){
    62.  
    63.     }

    实现几个重构方法

    标注：

    整体宽度为图片宽度44px

    背景条宽度30px，外边距7px，圆角15px

    带颜色的条宽度20xp，外边距5px，圆角15px

    自定义view的坐标轴是以view的左上角位置为原点，向右为x轴正方向，向下为y轴正方向

    在视图中用RectF创建背景，和颜色条，并在onSizeChanged中设置尺寸

    1. public class TmcView extends View {
    2.  
    3.     private final RectF backgroundRectF = new RectF();
    4.  
    5.     private final RectF colorRectF = new RectF();
    6.  
    7.     public TmcView(Context context) {
    8.         super(context);
    9.     }
    10.  
    11.     public TmcView(Context context, @Nullable AttributeSet attrs) {
    12.         super(context, attrs);
    13.     }
    14.  
    15.     @Override
    16.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    17.         super.onSizeChanged(w, h, oldw, oldh);
    18.         //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
    19.         backgroundRectF.set(7, 0, 37, h);
    20.         colorRectF.set(12, 5, 32, h-5);
    21.     }
    22.     ...
    23. }

    绘制背景条

    实现drawBackground方法，画背景需要一根画笔Paint 为了避免重复创建，声明为成员变量

    1. public class TmcView extends View {
    2.  
    3.     /*背景画笔*/
    4.     private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    5.  
    6.     private final RectF backgroundRectF = new RectF();
    7.  
    8.     private final RectF colorRectF = new RectF();
    9.  
    10.     public TmcView(Context context) {
    11.         super(context);
    12.     }
    13.  
    14.     public TmcView(Context context, @Nullable AttributeSet attrs) {
    15.         super(context, attrs);
    16.     }
    17.  
    18.     @Override
    19.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    20.         super.onSizeChanged(w, h, oldw, oldh);
    21.         //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
    22.         backgroundRectF.set(7, 0, 37, h);
    23.         colorRectF.set(12, 5, 32, h-5);
    24.     }
    25.  
    26.  
    27.     @Override
    28.     protected void onDraw(Canvas canvas) {
    29.         super.onDraw(canvas);
    30.         drawBackground(canvas);
    31.         drawSection(canvas);
    32.         drawImage(canvas);
    33.     }
    34.  
    35.     /**
    36.      * 画背景
    37.      * @param canvas 画布
    38.      */
    39.     private void drawBackground(Canvas canvas) {
    40.         backPaint.setStyle(Paint.Style.FILL);
    41.         backPaint.setAntiAlias(true); //抗锯齿
    42.         backPaint.setColor(Color.parseColor("#FFFFFF"));
    43.         //画圆角矩形，15为圆角的角度
    44.         canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    45.     }
    46. ...
    47. }

      布局中加入TmcView

    1. <com.bigxuan.tesapp.view.TmcView
    2.         android:id="@+id/tmc"
    3.         android:layout_width="44px"
    4.         android:layout_height="690px"
    5.         android:layout_marginEnd="1230px"
    6.         android:layout_marginBottom="100px"
    7.         app:layout_constraintBottom_toBottomOf="parent"
    8.         app:layout_constraintEnd_toEndOf="parent"
    9.         />

    绘制颜色条

    实现drawSection方法，这里要用到线性渐变LinearGradient

    LinearGradient 简单说，指定每一段的颜色和位置百分比，就能实现每一段显示不同颜色。

    但它默认是渐变色，要想不变就在每一段的开始和结束位置都设置相同的颜色。

    再创建一个画笔 Paint，画颜色条

    1. public class TmcView extends View {
    2.  
    3.  
    4.     private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    5.  
    6.     private final Paint colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    7.  
    8.     private final RectF backgroundRectF = new RectF();
    9.  
    10.     private final RectF colorRectF = new RectF();
    11.  
    12.     public TmcView(Context context) {
    13.         super(context);
    14.     }
    15.  
    16.     public TmcView(Context context, @Nullable AttributeSet attrs) {
    17.         super(context, attrs);
    18.     }
    19.  
    20.     @Override
    21.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    22.         super.onSizeChanged(w, h, oldw, oldh);
    23.         //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
    24.         backgroundRectF.set(7, 0, 37, h);
    25.         colorRectF.set(12, 5, 32, h-5);
    26.     }
    27.  
    28.  
    29.     @Override
    30.     protected void onDraw(Canvas canvas) {
    31.         super.onDraw(canvas);
    32.         drawBackground(canvas);
    33.         drawSection(canvas);
    34.         drawImage(canvas);
    35.     }
    36.  
    37.     /**
    38.      * 画背景
    39.      * @param canvas 画布
    40.      */
    41.     private void drawBackground(Canvas canvas) {
    42.         backPaint.setStyle(Paint.Style.FILL);
    43.         backPaint.setAntiAlias(true); //抗锯齿
    44.         backPaint.setColor(Color.parseColor("#FFFFFF"));
    45.         //画圆角矩形，15为圆角的角度
    46.         canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    47.     }
    48.  
    49.     /**
    50.      * 画分段数据
    51.      * @param canvas 画布
    52.      */
    53.     private void drawSection(Canvas canvas) {
    54.         int[] colorArray = {
    55.                 Color.parseColor("#FF0000"), Color.parseColor("#FF0000"),
    56.                 Color.parseColor("#00FF00"), Color.parseColor("#00FF00"),
    57.                 Color.parseColor("#0000FF"), Color.parseColor("#0000FF")
    58.         };
    59.         float[] positionArray = {
    60.                 0f, 0.2f,
    61.                 0.2f, 0.6f,
    62.                 0.6f, 1f
    63.         };
    64.         colorPaint.setStyle(Paint.Style.FILL);
    65.         colorPaint.setAntiAlias(true);
    66.  
    67.         //指定渐变色方向x轴方向不变，沿y方向渐变，渐变范围为 颜色条高度
    68.         colorPaint.setShader(new LinearGradient(0, 0, 0, colorRectF.bottom, colorArray, positionArray, Shader.TileMode.REPEAT));
    69.         canvas.drawRoundRect(colorRectF,15, 15, colorPaint);
    70.     }
    71.  
    72.     ...
    73. }

    绘制进度图片

    app加入图片资源，根据资源id获取bitmap对象，绘制。

    需要注意的是，坐标轴的顶点在左上角，绘制图片时也是以图片左上顶点位置做定位，图片位置是view的高度减掉图片的高度，才能显示在正确位置。

    1. public class TmcView extends View {
    2.  
    3.     private Context context;
    4.  
    5.     private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    6.  
    7.     private final Paint colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    8.  
    9.     private final RectF backgroundRectF = new RectF();
    10.  
    11.     private final RectF colorRectF = new RectF();
    12.  
    13.     /*图片资源id*/
    14.     private int imgResId;
    15.  
    16.     /*图片位置*/
    17.     private int imgPos;
    18.  
    19.     public TmcView(Context context) {
    20.         super(context);
    21.     }
    22.  
    23.     public TmcView(Context context, @Nullable AttributeSet attrs) {
    24.         super(context, attrs);
    25.         this.context = context;
    26.         this.imgResId = R.drawable.icon_seekbar_day;
    27.     }
    28.  
    29.     @Override
    30.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    31.         super.onSizeChanged(w, h, oldw, oldh);
    32.         //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
    33.         backgroundRectF.set(7, 0, 37, h);
    34.         colorRectF.set(12, 5, 32, h-5);
    35.         imgPos = h - 44; // 设置一个初始位置
    36.     }
    37.  
    38.  
    39.     @Override
    40.     protected void onDraw(Canvas canvas) {
    41.         super.onDraw(canvas);
    42.         drawBackground(canvas);
    43.         drawSection(canvas);
    44.         drawImage(canvas);
    45.     }
    46.  
    47.     /**
    48.      * 画背景
    49.      * @param canvas 画布
    50.      */
    51.     private void drawBackground(Canvas canvas) {
    52.         backPaint.setStyle(Paint.Style.FILL);
    53.         backPaint.setAntiAlias(true); //抗锯齿
    54.         backPaint.setColor(Color.parseColor("#FFFFFF"));
    55.         //画圆角矩形，15为圆角的角度
    56.         canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    57.     }
    58.  
    59.     /**
    60.      * 画分段数据
    61.      * @param canvas 画布
    62.      */
    63.     private void drawSection(Canvas canvas) {
    64.         int[] colorArray = {
    65.                 Color.parseColor("#FF0000"), Color.parseColor("#FF0000"),
    66.                 Color.parseColor("#00FF00"), Color.parseColor("#00FF00"),
    67.                 Color.parseColor("#0000FF"), Color.parseColor("#0000FF")
    68.         };
    69.         float[] positionArray = {
    70.                 0f, 0.2f,
    71.                 0.2f, 0.6f,
    72.                 0.6f, 1f
    73.         };
    74.         colorPaint.setStyle(Paint.Style.FILL);
    75.         colorPaint.setAntiAlias(true);
    76.  
    77.         //指定渐变色方向x轴方向不变，沿y方向渐变，渐变范围为 颜色条高度
    78.         colorPaint.setShader(new LinearGradient(0, 0, 0, colorRectF.bottom, colorArray, positionArray, Shader.TileMode.REPEAT));
    79.         canvas.drawRoundRect(colorRectF,15, 15, colorPaint);
    80.     }
    81.  
    82.     /**
    83.      * 画图片
    84.      * @param canvas 画布
    85.      */
    86.     private void drawImage(Canvas canvas) {
    87.         Bitmap bitmap = initBitmap(imgResId);
    88.         canvas.save();
    89.         canvas.translate(0, 0);
    90.         canvas.drawBitmap(bitmap, 0, imgPos, null);
    91.         canvas.restore();
    92.     }
    93.  
    94.     /**
    95.      * 通过资源id 创建bitmap
    96.      * @param resId 资源id
    97.      * @return
    98.      */
    99.     private Bitmap initBitmap(int resId) {
    100.         Bitmap originalBmp = BitmapFactory.decodeResource(context.getResources(), resId);
    101.         return Bitmap.createScaledBitmap(originalBmp, 44, 44, true);
    102.     }
    103. ...
    104. }

    公共方法

    暴露方法用来更新进度updateView

    定义一个图片有效的运动距离为view高度减掉图片高度，函数参数为总距离和剩余距离，计算百分比后乘以有效运动距离得出图片描画位置。最后调用invalidate方法刷新view

    1. import android.content.Context;
    2. import android.graphics.Bitmap;
    3. import android.graphics.BitmapFactory;
    4. import android.graphics.Canvas;
    5. import android.graphics.Color;
    6. import android.graphics.LinearGradient;
    7. import android.graphics.Paint;
    8. import android.graphics.RectF;
    9. import android.graphics.Shader;
    10. import android.util.AttributeSet;
    11. import android.view.View;
    12.  
    13. import androidx.annotation.Nullable;
    14.  
    15. import com.navinfo.tesapp.R;
    16.  
    17. import java.util.List;
    18.  
    19. public class TmcView extends View {
    20.  
    21.     private Context context;
    22.  
    23.     private final Paint backPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    24.  
    25.     private final Paint colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    26.  
    27.     private final RectF backgroundRectF = new RectF();
    28.  
    29.     private final RectF colorRectF = new RectF();
    30.  
    31.     /*图片资源id*/
    32.     private int imgResId;
    33.  
    34.     /*图片位置*/
    35.     private int imgPos;
    36.  
    37.     /*图片有效的运动距离*/
    38.     private int imgValidHeight;
    39.  
    40.     public TmcView(Context context) {
    41.         super(context);
    42.     }
    43.  
    44.     public TmcView(Context context, @Nullable AttributeSet attrs) {
    45.         super(context, attrs);
    46.         this.context = context;
    47.         this.imgResId = R.drawable.icon_seekbar_day;
    48.     }
    49.  
    50.     @Override
    51.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    52.         super.onSizeChanged(w, h, oldw, oldh);
    53.         //设置矩形 left top right bottom 左上右下点的值  按照标注计算得出
    54.         backgroundRectF.set(7, 0, 37, h);
    55.         colorRectF.set(12, 5, 32, h-5);
    56.         imgValidHeight = h - 44;
    57.         imgPos = h - 44; // 设置一个初始位置
    58.     }
    59.  
    60.  
    61.     @Override
    62.     protected void onDraw(Canvas canvas) {
    63.         super.onDraw(canvas);
    64.         drawBackground(canvas);
    65.         drawSection(canvas);
    66.         drawImage(canvas);
    67.     }
    68.  
    69.     /**
    70.      * 画背景
    71.      * @param canvas 画布
    72.      */
    73.     private void drawBackground(Canvas canvas) {
    74.         backPaint.setStyle(Paint.Style.FILL);
    75.         backPaint.setAntiAlias(true); //抗锯齿
    76.         backPaint.setColor(Color.parseColor("#FFFFFF"));
    77.         //画圆角矩形，15为圆角的角度
    78.         canvas.drawRoundRect(backgroundRectF, 15, 15, backPaint);
    79.     }
    80.  
    81.     /**
    82.      * 画分段数据
    83.      * @param canvas 画布
    84.      */
    85.     private void drawSection(Canvas canvas) {
    86.         int[] colorArray = {
    87.                 Color.parseColor("#FF0000"), Color.parseColor("#FF0000"),
    88.                 Color.parseColor("#00FF00"), Color.parseColor("#00FF00"),
    89.                 Color.parseColor("#0000FF"), Color.parseColor("#0000FF")
    90.         };
    91.         float[] positionArray = {
    92.                 0f, 0.2f,
    93.                 0.2f, 0.6f,
    94.                 0.6f, 1f
    95.         };
    96.         colorPaint.setStyle(Paint.Style.FILL);
    97.         colorPaint.setAntiAlias(true);
    98.  
    99.         //指定渐变色方向x轴方向不变，沿y方向渐变，渐变范围为 颜色条高度
    100.         colorPaint.setShader(new LinearGradient(0, 0, 0, colorRectF.bottom, colorArray, positionArray, Shader.TileMode.REPEAT));
    101.         canvas.drawRoundRect(colorRectF,15, 15, colorPaint);
    102.     }
    103.  
    104.     /**
    105.      * 画图片
    106.      * @param canvas 画布
    107.      */
    108.     private void drawImage(Canvas canvas) {
    109.         Bitmap bitmap = initBitmap(imgResId);
    110.         canvas.save();
    111.         canvas.translate(0, 0);
    112.         canvas.drawBitmap(bitmap, 0, imgPos, null);
    113.         canvas.restore();
    114.     }
    115.  
    116.     /**
    117.      *
    118.      * @param resId
    119.      * @return
    120.      */
    121.     private Bitmap initBitmap(int resId) {
    122.         Bitmap originalBmp = BitmapFactory.decodeResource(context.getResources(), resId);
    123.         return Bitmap.createScaledBitmap(originalBmp, 44, 44, true);
    124.     }
    125.  
    126.     /**
    127.      * 更新view
    128.      * @param total 总长度
    129.      * @param rest 剩余长度
    130.      * @param sections 分段数据
    131.      */
    132.     public void updateView(int total, int rest, List sections){
    133.         float percent = (1f * rest) / total;
    134.         //防止溢出
    135.         if(percent < 0){
    136.             return;
    137.         }
    138.         imgPos = (int)(percent * imgValidHeight);
    139.         invalidate();
    140.     }
    141. }

    updateView方法还有第三个参数，是用来传出颜色条不同段的颜色和百分比数据的。根据此数据来更新颜色条。这里需要根据业务不同自己实现，我这里就不写了。

    总结

            大家可能看出来了，这个视图是用来展示导航中不同路段交通情况和当前车辆进度用的。自定义view中可以在构造方法中获取一些自定义属性，像背景条和颜色条的边距、圆角这些都可以定义到xml中，因为只适配一种屏幕尺寸所以也没有做多尺寸适配。以前也没有做过，这次记录下来。

  • 相关阅读:
    操作系统笔记（王道考研） 第四章：文件管理
    算法：删除有序数组中的重复项---双指针[3]
    746. 使用最小花费爬楼梯 (Swift版本)
    Win10管理员权限怎么获取？Win10取得管理员权限的方法
    mongo实际业务场景实战
    电影评分数据分析案例-Spark SQL
    Linux由hello.c生成a.out整个过程
    全栈自动化测试之python基础类的自定义属性访问及动态属性设置
    python利用opencv进行相机标定获取参数，并根据畸变参数修正图像附有全部代码（流畅无痛版）
    【吴恩达机器学习-笔记整理】设计复杂的机器学习系统（执行的优先级，误差分析，不对称性误差评估，精确度和召回率）
  • 原文地址：https://blog.csdn.net/cyy298/article/details/139809185