요술고양이의 Digital Life

Anko는 JetBrain에서 만든 라이브러리로서, 안드로이드 레이아웃을 XML을 통하지 않고 쉽게 만들 수 있게 도와주는 DSL(Domain-Specific Language) 입니다.

간단한 코드 만으로 xml을 대신하여 레이아웃을 구성할 수 있게 도움을 줍니다.


일단 라이브러리 관련 사이트는 아래와 같습니다.

https://github.com/Kotlin/anko


안드로이드 스튜디오에서 적용은 아래와 같이 bilud.gradle에 추가해주면 됩니다.


dependencies {
    compile 'org.jetbrains.anko:anko-sdk15:0.9' // sdk19, sdk21, sdk23 are also available
    compile 'org.jetbrains.anko:anko-support-v4:0.9' // In case you need support-v4 bindings
    compile 'org.jetbrains.anko:anko-appcompat-v7:0.9' // For appcompat-v7 bindings
}


기본적인 사용 방법은 해당 사이트를 참고하면 아래와 같습니다.


class MyActivity : AppCompatActivity() {


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)


verticalLayout {

padding = dip(30)

 editText {

 hint = "Name"

 textSize = 24f

 }


 editText {

 hint = "Password"

 textSize = 24f

 }


 button("Login") {

 textSize = 26f

 }

}

}


액티비티를 실앵해보면 아래와 같이 바로 모양이 뜹니다.



근데 문제는 동적으로 가변적인 수의 컴포넌트를 배치하고자 할 때 였습니다.


다수의 동일한 스타일의 컴포넌트들을 일괄적으로 배치하거나 특정한 상황이나 결과에 따라 동적으로 컴포넌트를 배치하고 싶은데

기본 페이지에서는 원하는 방법을 찾지 못했습니다.


그런데 해답은 생각보다 가까운데 있었습니다.


verticalLayout 중간에 components 관련 구문뿐만 아니라 일반 구문을 사용해도 에러나 문제가 없고

loop문 중간에 선언하는 것 만으로 배치가 가능했습니다.


그래서 아래와 같이 for나 forEach 등으로 원하는 수 만큼 동적으로 컴포넌트들을 배치할 수 있습니다.


class MyActivity: AppCompatActivity() {

val examples = arrayListOf("Example 1", "Example 2", "Example 3")

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

verticalLayout {
padding = dip(30)

editText {
hint = "Name"
textSize = 24f
}

editText {
hint = "Password"
textSize = 24f
}

button("Login") {
textSize = 26f
}

examples.forEach { example ->
textView {
text = example
textSize = 26f
}
}

}
}

}






Comment +0

안드로이드에서는 UI 작업 시간이 너무 많이 걸립니다.

XML로 레이아웃 구성하는 데 시간도 많이 걸리지만 해당 위젯을 사용하려면 findViewById로 지정해서 사용해야 합니다.


하지만 Kotlin Extension은 레이아웃 XML에서 사용한 이름 그대로 액티비티 내에서 사용할 수 있습니다.

우선 아래 그림과 같이 액티비티의 레이아웃에서 Hello World를 출력하고 있는 TextView의 id를 ui_text_hello 라고 정하겠습니다.




만약 Hello World 대신 "Kotlin Example" 을 출력하려면 기존 방법으로는 아래와 같이 해야합니다.


class MainActivity : AppCompatActivity() {

lateinit var mTextHello: TextView

public override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

mTextHello = findViewById(R.id.ui_text_hello) as TextView
mTextHello.text = "Kotlin Example"

}
}



하지만 지난 포스트에서 Kotlin Extension을 설치하셨다면 별도로 findViewById 없이 XML에서 선언한 이름 그대로 바로 접근할 수 있습니다.


class MainActivity : AppCompatActivity() {

public override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

ui_text_hello.text = "Kotlin Example"

}
}


대신 아래와 같이 layout 이름의 형태로 import가 됩니다.


import kotlinx.android.synthetic.main.activity_main.*


import에서 한줄이 추가되긴 했지만 TextView에 새로운 문자열 출력을 위한 세 줄짜리 코드가 한 줄로 줄어들었습니다.


그리고 실제로 개발 시에는 xml 레이아웃에 포함된 위젯은 한두개가 아니므로 전체적으로 코드를 줄이는데 큰 도움을 줍니다.

그리고 XML에서 지정한 이름을 그대로 사용하기 때문에 UI 레이아웃과 멤버 변수로 지정한 이름이 달라 헷갈리는 부분을 줄일 수가 있습니다.

Comment +0

일단 안드로이드 스튜디오에서 빈 프로젝트를 후딱 만들어 봅니다.






일단 Java로 된 안드로이드 빈 프로젝트가 하나 생성되었습니다.


만약 Kotlin 관련 플러그인을 설치 하지 않았다면 File -> Setting -> Plugin으로 이동합시다.

요기는 현재 Android Studio에 설치되어있는 플러그인을 나타냅니다. 바로 검색하면 아무 검색결과도 나오지 않으니



하단에 Install JetBrains plugin을 누르고 Kotlin을 검색 해봅니다.


그러면 위와 같이 Kotlin과 Kotling Extension을 결과가 나오는데요 일단 모두 설치하겠습니다.


설치가 완료되었으면 안드로이드 스튜디오를 재시작 합니다.


재시작하면 Tools 에 Kotlin 항목이 생겼습니다. 

Configure Koling in Project를 선택하고 Android with Gradle을 선택합니다.

그리고 OK!