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>
仪表样式