Android 仪表盘控件UI分享(一)

First add kotlin to your project, in build.gradle project level:

buildscript {
    ext.kotlin_version = '1.5.31'
    dependencies {
        ...
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}
...
allprojects {
    repositories {
        ...
        mavenCentral()
    }
}
...
allprojects {
    repositories {
        ...
        mavenCentral()
    }
}

Then add this line to build.gradle app module level:

apply plugin: 'kotlin-android'
...
dependencies {
    implementation 'com.github.anastr:speedviewlib:1.6.1'
}

For maven

<dependency>
  <groupId>com.github.anastr</groupId>
  <artifactId>speedviewlib</artifactId>
  <version>1.6.1</version>
  <type>pom</type>
</dependency>

Choose one of Speedometers, gauges and add it to your Layout.xml, here we use SpeedView.

<com.github.anastr.speedviewlib.SpeedView
        android:id="@+id/speedView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

常用属性设置

属性 描述
app:sv_maxSpeed="40" 设置转速最大值
app:sv_minSpeed="0" 设置转速最小值
app:sv_speedTextColor="@color/white" 设置转速文本颜色
app:sv_speedTextFormat="INTEGER" 设置转速文本类型INTEGER/FLOAT
app:sv_speedTextPadding="20dp" 设置转速文本距离底部的间距
app:sv_speedTextSize="15dp" 设置转速文本字体大小
app:sv_speedTextTypeface="" 设置转速文本字体样式
app:sv_speedTextPosition="TOP_RIGHT" 设置转速文本字体位置
app:sv_textRightToLeft="true" 设置转速文本是(true)从左到右显示还是(false)从右到左显示
app:sv_startDegree="154" 设置起始角度
app:sv_endDegree="386" 设置结束角度
app:sv_indicator="KiteIndicator" 设置指针样式
app:sv_indicatorColor="#eb1912" 设置指针颜色
app:sv_indicatorWidth="5dp" 设置指针宽度
app:sv_withIndicatorLight="true" 设置指针背景光是否显示
app:sv_marksNumber="0" 设置刻度线间距,0则不显示刻度线
app:sv_markColor="@color/colorRed" 设置刻度线颜色
app:sv_markStyle= "ROUND" 设置刻度线样式ROUND圆角BUTT非圆角
app:sv_markHeight="15dp" 设置刻度线长度
app:sv_markWidth="15dp" 设置刻度线宽度
app:sv_marksPadding="15dp" 设置刻度线位置距离
app:sv_unit="x100 r/min" 设置单位文本
app:sv_unitTextColor="@color/white" 设置单位文本字体颜色
app:sv_unitTextSize="15dp" 设置单位文本字体大小
app:sv_unitSpeedInterval="15dp" 设置单位文本和转速文本间距
app:sv_unitUnderSpeedText="true" 设置单位文本在转速文本下显示
app:sv_withTremble="false" 设置是否显示抖动效果
app:sv_backgroundCircleColor="@color/white" 设置仪表背景色
app:sv_speedometerMode="NORMAL" 设置仪表样式:NORMAL默认圆,LEFT左半圆,TOP上半圆,RIGHT右半圆,BOTTOM下半圆,TOP_LEFT上左的扇形,TOP_RIGHT上右扇形,BOTTOM_RIGHT下右的扇形,BOTTOM_LEFT下左的扇形
app:sv_centerCircleColor="@color/white" 设置中心圆点颜色
app:sv_centerCircleRadius="15" 设置中心圆点半径
app:sv_speedometerWidth="5dp" 设置外边框宽度

具体:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 定义速度表相关属性 -->
    <attr name="sv_speedometerColor" format="color"/> <!-- 速度表颜色 -->
    <attr name="sv_speedometerBackColor" format="color"/> <!-- 速度表背景色 -->
    <attr name="sv_centerCircleColor" format="color" /> <!-- 中心圆颜色 -->
    <attr name="sv_centerCircleRadius" format="dimension" /> <!-- 中心圆半径 -->

    <attr name="sv_speedBackgroundColor" format="color" /> <!-- 速度背景色 -->
    <attr name="sv_withEffects" format="boolean" /> <!-- 是否启用特效 -->

    <!-- 定义速度表方向 -->
    <attr name="sv_orientation" format="enum" >
        <enum name="HORIZONTAL" value="0" />
        <enum name="VERTICAL" value="1" />
    </attr>

    <!-- 定义速度表刻度样式 -->
    <attr name="sv_sectionStyle" format="enum" >
        <enum name="ROUND" value="0" />
        <enum name="BUTT" value="1" />
    </attr>

    <attr name="sv_image" format="reference" /> <!-- 速度表图片 -->

    <!-- 定义仪表盘样式 -->
    <declare-styleable name="Gauge">
        <attr name="sv_speedometerWidth" format="dimension" /> <!-- 速度表宽度 -->
        <attr name="sv_textColor" format="color" /> <!-- 文字颜色 -->
        <attr name="sv_speedTextColor" format="color"/> <!-- 速度文字颜色 -->
        <attr name="sv_unitTextColor" format="color"/> <!-- 单位文字颜色 -->
        <attr name="sv_withTremble" format="boolean" /> <!-- 是否启用颤抖效果 -->
        <attr name="sv_speedTextSize" format="dimension" /> <!-- 速度文字大小 -->
        <attr name="sv_textSize" format="dimension" /> <!-- 文字大小 -->
        <attr name="sv_unit" format="string" /> <!-- 单位 -->

        <attr name="sv_unitTextSize" format="dimension"/> <!-- 单位文字大小 -->
        <attr name="sv_trembleDegree" format="float" /> <!-- 颤抖程度 -->
        <attr name="sv_trembleDuration" format="integer" /> <!-- 颤抖持续时间 -->
        <attr name="sv_textRightToLeft" format="boolean" /> <!-- 文字是否从右到左显示 -->

        <attr name="sv_minSpeed" format="float" /> <!-- 最小速度 -->
        <attr name="sv_maxSpeed" format="float" /> <!-- 最大速度 -->

        <attr name="sv_accelerate" format="float" /> <!-- 加速 -->
        <attr name="sv_decelerate" format="float" /> <!-- 减速 -->

        <attr name="sv_speedTextTypeface" format="string" /> <!-- 速度文字字体 -->
        <attr name="sv_textTypeface" format="string" /> <!-- 文字字体 -->

        <!-- 定义速度文字位置 -->
        <attr name="sv_speedTextPosition" format="enum" >
            <enum name="TOP_LEFT" value="0" />
            <enum name="TOP_CENTER" value="1" />
            <enum name="TOP_RIGHT" value="2" />
            <enum name="LEFT" value="3" />
            <enum name="CENTER" value="4" />
            <enum name="RIGHT" value="5" />
            <enum name="BOTTOM_LEFT" value="6" />
            <enum name="BOTTOM_CENTER" value="7" />
            <enum name="BOTTOM_RIGHT" value="8" />
            <enum name="CENTER_BOTTOM" value="9" />
        </attr>
        <attr name="sv_unitUnderSpeedText" format="boolean" /> <!-- 单位是否在速度文字下方显示 -->
        <attr name="sv_unitSpeedInterval" format="dimension" /> <!-- 单位与速度文字间隔 -->
        <attr name="sv_speedTextPadding" format="dimension" /> <!-- 速度文字内边距 -->
        <attr name="sv_speedTextFormat" format="enum" > <!-- 速度文字格式 -->
            <enum name="INTEGER" value="0" />
            <enum name="FLOAT" value="1" />
        </attr>
    </declare-styleable>

    <!-- 定义速度表样式,继承自仪表盘样式 -->
    <declare-styleable name="Speedometer"  parent="Gauge">
        <attr name="sv_indicatorColor" format="color" /> <!-- 指示器颜色 -->
        <attr name="sv_withIndicatorLight" format="boolean" /> <!-- 是否启用指示器灯光效果 -->
        <attr name="sv_indicatorLightColor" format="color" /> <!-- 指示器灯光颜色 -->
        <attr name="sv_backgroundCircleColor" format="color" /> <!-- 背景圆圈颜色 -->

        <attr name="sv_startDegree" format="integer" /> <!-- 开始角度 -->
        <attr name="sv_endDegree" format="integer" /> <!-- 结束角度 -->

        <attr name="sv_indicatorWidth" format="dimension" /> <!-- 指示器宽度 -->

        <attr name="sv_marksNumber" format="integer" /> <!-- 刻度数量 -->
        <attr name="sv_marksPadding" format="dimension" /> <!-- 刻度内边距 -->
        <attr name="sv_markHeight" format="dimension" /> <!-- 刻度高度 -->
        <attr name="sv_markWidth" format="dimension" /> <!-- 刻度宽度 -->
        <attr name="sv_markColor" format="color" /> <!-- 刻度颜色 -->
        <attr name="sv_markStyle" format="enum" > <!-- 刻度样式 -->
            <enum name="ROUND" value="0" />
            <enum name="BUTT" value="1" />
        </attr>

        <!-- 定义指示器样式 -->
        <attr name="sv_indicator" format="enum" >
            <enum name="NoIndicator" value="0" />
            <enum name="NormalIndicator" value="1" />
            <enum name="NormalSmallIndicator" value="2" />
            <enum name="TriangleIndicator" value="3" />
            <enum name="SpindleIndicator" value="4" />
            <enum name="LineIndicator" value="5" />
            <enum name="HalfLineIndicator" value="6" />
            <enum name="QuarterLineIndicator" value="7" />
            <enum name="KiteIndicator" value="8" />
            <enum name="NeedleIndicator" value="9" />
        </attr>

        <!-- 定义速度表模式 -->
        <attr name="sv_speedometerMode" format="enum" >
            <enum name="NORMAL" value="0" />
            <enum name="LEFT" value="1" />
            <enum name="TOP" value="2" />
            <enum name="RIGHT" value="3" />
            <enum name="BOTTOM" value="4" />
            <enum name="TOP_LEFT" value="5" />
            <enum name="TOP_RIGHT" value="6" />
            <enum name="BOTTOM_RIGHT" value="7" />
            <enum name="BOTTOM_LEFT" value="8" />
        </attr>

        <attr name="sv_cutPadding" format="dimension" /> <!-- 切割内边距 -->

        <attr name="sv_tickNumber" format="integer" /> <!-- 小刻度数量 -->
        <attr name="sv_tickRotation" format="boolean" /> <!-- 小刻度是否旋转 -->
        <attr name="sv_tickPadding" format="dimension" /> <!-- 小刻度内边距 -->
        <attr name="sv_tickTextFormat" format="enum" > <!-- 小刻度文字格式 -->
            <enum name="INTEGER" value="0" />
            <enum name="FLOAT" value="1" />
        </attr>
    </declare-styleable>

    <!-- 定义SpeedView样式,继承自Speedometer样式 -->
    <declare-styleable name="SpeedView" parent="Speedometer">
        <attr name="sv_centerCircleColor" />
        <attr name="sv_centerCircleRadius" />
        <attr name="sv_sectionStyle" />
    </declare-styleable>

    <!-- 定义DeluxeSpeedView样式,继承自Speedometer样式 -->
    <declare-styleable name="DeluxeSpeedView" parent="Speedometer">
        <attr name="sv_centerCircleColor" />
        <attr name="sv_centerCircleRadius" />
        <attr name="sv_speedBackgroundColor" />
        <attr name="sv_sectionStyle" />
        <attr name="sv_withEffects" />
    </declare-styleable>

    <!-- 定义AwesomeSpeedometer样式,继承自Speedometer样式 -->
    <declare-styleable name="AwesomeSpeedometer" parent="Speedometer">
        <attr name="sv_speedometerColor" />
        <attr name="sv_trianglesColor" format="color"/>
    </declare-styleable>

    <!-- 定义RaySpeedometer样式,继承自Speedometer样式 -->
    <declare-styleable name="RaySpeedometer" parent="Speedometer">
        <attr name="sv_speedBackgroundColor" />
        <attr name="sv_withEffects" />
        <attr name="sv_rayColor" format="color"/>
        <attr name="sv_degreeBetweenMark" format="integer"/>
        <attr name="sv_rayMarkWidth" format="dimension"/>
    </declare-styleable>

    <!-- 定义PointerSpeedometer样式,继承自Speedometer样式 -->
    <declare-styleable name="PointerSpeedometer" parent="Speedometer">
        <attr name="sv_centerCircleColor" />
        <attr name="sv_centerCircleRadius" />
        <attr name="sv_speedometerColor" />
        <attr name="sv_pointerColor" format="color"/>
        <attr name="sv_withPointer" format="boolean"/>
    </declare-styleable>

    <!-- 定义TubeSpeedometer样式,继承自Speedometer样式 -->
    <declare-styleable name="TubeSpeedometer" parent="Speedometer">
        <attr name="sv_speedometerBackColor" />
    </declare-styleable>

    <!-- 定义ImageSpeedometer样式,继承自Speedometer样式 -->
    <declare-styleable name="ImageSpeedometer" parent="Speedometer">
        <attr name="sv_image" />
    </declare-styleable>

    <!-- 定义LinearGauge样式,继承自Gauge样式 -->
    <declare-styleable name="LinearGauge" parent="Gauge">
        <attr name="sv_orientation" />
        <attr name="sv_speedometerColor" />
        <attr name="sv_speedometerBackColor" />
    </declare-styleable>

    <!-- 定义ImageLinearGauge样式,继承自LinearGauge样式 -->
    <declare-styleable name="ImageLinearGauge" parent="LinearGauge">
        <attr name="sv_speedometerBackColor" />
        <attr name="sv_image" />
    </declare-styleable>
</resources>

仪表样式


https://github.com/anastr/SpeedView/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容