태그 보관물: 안드로이드

Android view binding 적용

댓글 남기기

개요

개발 중인 앱에서 kotlin 버전 변경 후 다음과 같은 경고가 나타났습니다.

The ‘kotlin-android-extensions’ Gradle plugin is deprecated. Please use this migration guide (https://goo.gle/kotlin-android-extensions-deprecation) to start working with View Binding (https://developer.android.com/topic/libraries/view-binding) and the ‘kotlin-parcelize’ plugin.

경고 메시지

kotlin-android-extensions gradle 플러그인이 deprecated 되었으니 가이드를 참고해서 마이그레이션하라는 내용입니다. 해당 링크를 확인해 보면 그 방법이 잘 안내되어 있습니다. View binding의 기능과 기존 Activity 에 적용하는 방법을 알아보도록 하겠습니다.

View binding

View binding 에 대한 내용은 이곳에서 확인하실 수 있습니다. 요약하자면 View 와 상호작용하는 코드를 더 쉽게 작성할 수 있게 해 주는 기능입니다. 대부분의 경우 findViewById 를 대치한다고 합니다. 코드내에서 findViewById 를 사용할 필요가 없게 됩니다. findViewById 와는 달리 Null 참조 위험이 없고 Type 도 레이아웃내의 요소와 일치하기 때문에 이전에 발생할 수 있었던 불일치 문제가 없다고 합니다. 레이아웃 XML 과 대응되는 binding class 가 생성되고 그 이름은 레이아웃 파일명에 camel case 가 적용된 후 뒤쪽에 Binding 이 추가된 형태가 됩니다. 예를 들면 다음과 같습니다.

activity_main.xml -> ActivityMainBinding

마이그레이션

먼저 모듈 수준 build.gradle 파일에 다음 내용을 추가합니다.

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

그 다음 앱 수준 build.gradle 파일에서 다음 내용을 삭제합니다.

apply plugin: `kotlin-android-extensions`

Activity 코드에서 다음과 같이 수정합니다.

private lateinit var viewBinding: ActivityMainBinding

super.onCreate(savedInstanceState)
viewBinding = ActivityMainBinding.inflate(layoutInflater)
val view = viewBinding.root
setContentView(view) //setContentView(R.layout.activity_main) 기존 코드

viewBinding.userName.text = "text" //userName.text = "text" 기존 코드

1행에서 변수를 정의합니다. 4~6 행과 같이 레이아웃 설정 부분을 수정합니다. 8행과 같이 레이아웃에 있는 요소를 참조하면 됩니다. 참고로 기존의 코드도 주석 뒤쪽에 넣었습니다.

이상으로 view binding 을 기존 activity 에 적용하는 방법을 알아보았습니다.

MPAndroidChart 를 사용한 바차트 출력

댓글 남기기

개요

앱에 차트를 출력해야 하는 경우가 있습니다. 직접 이미지 형태로 만들수도 있지만 그것자체가 상당한 노력과 시간이 소요됩니다. MPAndroidChart 라이브러리를 이용하면 다양한 차트를 손쉽게 출력할 수 있습니다. 이 글에서는 바차트에 한정해서 기본적으로 출력하는 방법과 몇가지 속성을 조정하는 방법을 알아보도록 하겠습니다. 버전은 3.1.0, 언어는 Kotlin 을 기준으로 합니다.

기능

위 링크에 접속해보면 샘플앱을 내려받을 수 있고 다양한 예제 코드를 살펴볼 수 있습니다. 일반적으로 사용하는 모든 차트 유형이 있다고 생각하시면 됩니다. 본인의 자료 형태에 맞는 유형을 선택해서 사용하면 됩니다. 샘플코드의 경우 최소한의 코드라서 원하는 형태로 출력하려면 여러가지 속성을 추가하고 조정해야 합니다.

바차트

바차트는 막대그래프라고 하는 형태인데 이 글에서는 가상의 월별 사용량을 출력하는 것을 알아보도록 하겠습니다. 실제 자료를 DB나 다른쪽에서 받아오는 부분은 이미 구현되어 있다고 가정하겠습니다. 다음과 같은 바차트를 출력해 보도록 하겠습니다.

바차트

차트 자료 연결

차트에 출력할 자료의 형태가 다음과 같다고 가정하겠습니다.

2020-113
2020-1212

layout 은 다음과 같습니다.

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/barChart"
    android:layout_width="match_parent"
    android:layout_height="0dp" />

여기에서 주의하실 사항은 실제 출력할 차트와 자료형을 일치 시켜야 한다는 것 입니다. com.github.mikephil.charting.charts.BarChart로 정의하고 LineChart 자료 유형을 연결하면 오류가 발생합니다. 즉, 차트의 유형과 자료로 사용할 형태가 다르면 안됩니다.

data class Chart(
    var label : String = ""
    , var countValue : Int = 0
)

val chartValue: ArrayList<BarEntry> = ArrayList()
val xAxisLabel: ArrayList<String> = ArrayList()

chartDataList?.forEachIndexed { index, item ->
    val barEntry = BarEntry(index.toFloat(), item.countValue.toFloat())
    chartValue.add(index, barEntry)
    xAxisLabel.add(item.label)
}

val barDataSet = BarDataSet(chartValue, "")
val barData = BarData(barDataSet)
barChart.data = barData

1-4 행은 Chart 클래스 정의 입니다. chartDataList 는 Chart 클래스의 MutableList 입니다(MutableList<Chart>).

6, 7행은 자료값과 출력할 레이블을 추가할 ArrayList 입니다.

9-13행은 반복하며 차트에 사용할 자료의 형태에 맞추어 추가하는 코드입니다.

차트 속성 변경

위의 코드만 가지고도 차트는 출력됩니다. 그러나 다음과 같은 문제가 있습니다.

  1. 하단 레이블이 원하는 형태가 아님
  2. 바 위쪽 숫자가 소수점으로 표시. 글자 크기가 작음
  3. 바의 색상이 모두 동일
  4. 차트의 범례와 설명이 나타남

다음과 같이 속성을 추가, 변경해서 목표로 한 형태의 차트를 만듭니다.

val colors = intArrayOf(
    Color.GREEN,
    Color.YELLOW,
    Color.GREEN,
    Color.BLUE,
    Color.GRAY,
    Color.BLACK
)

barDataSet.setColors(colors, 150)

위 코드는 바의 색상을 지정한 것입니다. setColors 메소드의 두번째 인수는 alpha 값(투명도)인데 0 이면 투명하게 보여 아무것도 출력되지 않은 것처럼 보입니다.

val valueFormatter: ValueFormatter = object : ValueFormatter() {
     override fun getFormattedValue(value: Float): String {
         return "" + value.toInt()
     }
 }

barDataSet.valueFormatter = valueFormatter
barDataSet.valueTextSize = 10.0f

barChart.legend.isEnabled = false;
barChart.description.isEnabled = false;

위의 코드는 출력할 값의 포맷을 지정해서 원하는 형태로 나타나도록 합니다(7행). 이 글에서는 단순히 정수로만 변환했습니다. 예를 들어 금액인 경우 원화 또는 달러 표시를 붙여 출력할 수도 있습니다. 그리고 글자의 크기를 적절하게 조정했습니다. 마지막에는 범례를 없애고 설명도 나타나지 않게 했습니다.

이 글에서는 MPAndroidChart 를 사용한 바차트 출력과 속성조정에 대해 알아 보았습니다. 다른 속성에 대한 것은 자료를 찾아 조정해 보시면 금방 원하시는 형태의 차트로 출력하실 수 있을겁니다.