[안드로이드 - 코틀린] SpeedView 라이브러리를 이용한 수치 측정 UI 만들기

마무리 후 남기는 후기 

1. 이번에는 앱을 만드는 시간보다 뭘 써야될지 디자인하는데 더 오래걸린거 같다... 구글링의 중요성을 뼈저리게 느껴버렸다 

2. 그리고 제발 Viewbinding 배워서 사용하자 id값이 6개인데 각각의 값들마다 6개씩 선언해야되는 값들이 있어서 노가다를 엄청했다 심지어 너무 많아서 중간중간 확인 안하면 잘못적기도...

---

코드 작성 환경은 Activity가 아닌 TabLayout 내에 있는 Fragment입니다

1. SpeedView 라이브러리 불러오기 

라이브러리를 사용하기 위한 gradle 세팅 현재 사용한 버전입니다

implementation 'com.github.anastr:speedviewlib:1.6.0'

2.  SpeedView 중 SpeedView를 이용했다 ( 다른 재밌는 것들도 많음 )

시작 전에는 해야되는 것

• SpeedView 라이브러리는 여기저기 측정값을 보여줄 라이브러리를 찾다 도착한 곳이다 일단 이 라이브러리의 목적은 속력계여서 내가 원하는 측정 수치를 보여주려면 커스텀을 따로 해줘야한다

 

lateinit var speedView1: SpeedView
lateinit var progressMaxText : TextView
lateinit var progressMinText : TextView

speedView를 만들기 전에는 addSections를 이용기 위해 clearSection을 이용해 초기화를 한번해 주고 자신이 원하는 형식으로 바꿔줄수 있다 

 

Section(시작 비율, 끝 비율, 색, dp -> px로 변경 )

speedView1 = view.findViewById(R.id.speedView1)

speedView1.clearSections()
speedView1.addSections(
    Section(0f, .2f, Color.BLUE, speedView1.dpTOpx(30f)),
    Section(.2f, .8f, Color.GREEN, speedView1.dpTOpx(30f)),
    Section(.8f, 1f, Color.RED, speedView1.dpTOpx(30f)),
)

progressMaxText = view.findViewById(R.id.max1)
progressMinText = view.findViewById(R.id.min1)

임계치 계산을해 파란색 빨강색 경계선에 값을 넣어줄 수 있게 만들어주는 수식

하단 text는 최대 값과 최소 값을 서버에서 받아와 넣어준다 

// 임계치 설정을 하게되면 색 경계선에 값을 넣어주기 위한 계산 식 함수
Log.d("main_Sensor_OG", "${result!!.result}")
var value_number : Float = 0f
fun value_num(max : Float, min : Float): Float {
    value_number = max - min
    value_number /= 3
    return value_number
}
// 이걸 수정하면 max min -> 서버에서 받아오기
progressMaxText.text = result.result.Tc_high.toString() + "℃"
progressMinText.text = result.result.Tc_low.toString() + "℃"

소켓에서 받은 데이터를 넣어주면 화살표가 움직이게 된다 

// 소켓에서 받은 데이터를 넣는 곳
speedView1.realSpeedTo(data.Tc)

SpeedView xml이다 

여기서 ui 사이즈 결정해줬고 필요 조건들을 넣어줬다

centerCircleRaduis = 그래프 화살표 중앙에 있는 원을 말함 0을 줘 지워준다

startDegree = 그래프 크기 결정 180으로 설정하면 절반으로 줄어든다 -> 그래프 시작 지점을 설정하는 거라 생각하면 됨

endDegree = 그래프 크기 결정 360으로 설정하면 절반으로 줄어든다 -> 사진 참고 

indicator = 화살표 크기를 말한다 ( 글씨 가려져서 줄임 )

indicatorWidth = 화살표 두께를 말함 ( 글씨 가려져서 줄임 )

speedTextFormat = 수치 표현 형식 나는 소수점이 필요해 FLOAT형식으로 바꿨다

speedTextPadding = 하단 글짜 위치 설정 

tickNumber = 그래프에 내부에 적히는 숫자 개수를 말한다 시작 지점부터 끝 지점까지 총 6개가 적히게 했다 -> 위에서 수식 써서 원하는 수치를 넣어줘야되기 때문에 짝수 숫자를 선택했다 

unit = 기존에 들어가있는 값 대신 원하는 값을 넣는다 

<com.github.anastr.speedviewlib.SpeedView
    android:id="@+id/speedView1"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:layout_marginTop="50dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/text1"
    app:sv_centerCircleRadius="0dp"
    app:sv_endDegree="360"
    app:sv_indicator="NormalSmallIndicator"
    app:sv_indicatorColor="#fa5252"
    app:sv_indicatorWidth="8dp"
    app:sv_speedTextColor="#fa5252"
    app:sv_speedTextFormat="FLOAT"
    app:sv_speedTextPadding="50dp"
    app:sv_speedTextSize="50dp"
    app:sv_startDegree="180"
    app:sv_textSize="15dp"
    app:sv_tickNumber="6"
    app:sv_unit="℃"
    app:sv_withTremble="false">

</com.github.anastr.speedviewlib.SpeedView>

speedView