View Binding을 확장 플러그인(Plug-in)해

 

확장 플러그인
특정 환경을 위해 부가적으로 제공하는 기능

 

코틀린은 2가지의 기능을 제공 하는데요

1. XML에서 만든 UI 요소를 findViewById() 없이 접근하는 'View Binding'
2. 안드로이드에서 객체를 직렬화할 때 사용하는 'parcelable'

 

View Binding

레이아웃 XML 파일에서 만든 UI 요소를 코드에서 접근할 수 있도록 변수에 바인딩하는 것을 해보겠습니다!

상단에 있는 'res > layout > activity_main.xml' 을 더블클릭해서 디자인  탭을 열어 줍니다!

 

버튼을 드래그해서 상단에 보내주고 이름도 설정해주구요!

 

음 ... 저는 상단 중앙에 두고 싶은데 이친구 ... 아무리 드래그해도 안움직이네요?

이럴땐 모다?

 

우리의 지피티 선생에게 문의를 했지요!

 

두가지 버전으로 제시를 해주네요

ConstraintLayout 사용

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

LinearLayout에서 버튼을 상단에 배치하기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="top"  <!-- 상단 정렬 추가 -->

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginTop="16dp" />
</LinearLayout>

 

아직 차이점이 뭔지는 모르겠지만 뭔가 둘다 실행해보니 첫번째는 오류도 많고 지금 코드랑 차별점이 많아서 그냥 두번째 코드를 발전 시켜 볼께요!

계속해서 내 마음에 안드는 답변을 주던 우리 지피티 선생과 시간과 인내의 시간을 거치고 나니

흘러나오는 컨트리 음악의 편안함 처럼 저에게 드디어 원하는 답을 주셨네요

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:paddingTop="16dp" > <!-- 상단 여백 -->

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

 

디자인 탭

지금 코드를 보면 'LinerLayout' 으로 시작하는데 이 친구로 하면 디자인 탭에서 사용하는 'Infer Constraints'가 사용이 안된다고 하네요?

그래서 우리는 지피티 선생을 통해 코드를 수정해봅니다!

코드를 수정하고 보니 문제가 잔뜩?

우리 코딩의 맛은 이런 에러들을 해결하는 맛 아니겠어요?

동그란 문제들이 발생해서 네모들이 이상하죠?

그래서 'Gradle Scripts > build.gradle.kts (:app)' 에 들어가서 코드를 수정해서 해당 친구들을 설치해줍니다

 

그렇게 되면 네모들이 나타나서 해당 설치류들 해결하라고 알려주는데 'Sync Now' 를 누른다면 네모들이 나타납니다

 

각종 에러들 ...

아마 다들 사용하시는 버전에 따라 다 에러가 다 다르실텐데 ... 저는 이 긴 여정을 해결하는 내용들을 축약해서 공유해볼까 해요

 

e: file:///Users/solpapa/Desktop/Re_start/KotlinSample/app/build.gradle.kts:70:20: Unexpected tokens (use ';' to separate expressions on the same line)

e: file:///Users/solpapa/Desktop/Re_start/KotlinSample/app/build.gradle.kts:70:20: Too many characters in a character literal ''androidx.constraintlayout:constraintlayout:2.1.4''

 

내용을 축약하면 이렇습니다

 

지피티 선생은 저에게 해법으로

dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    // 다른 종속성들
}

그래서 그대로 사용했더니 ...

이전에 제 안드로이드 스튜디오의 설정값이랑 달랐던 내용이였고 그 부분을 발견하고 수정을 하는 과정이였던겁니다!

(, ) 와 ', ' .... 거의 수학문제 1이냐 0이냐의 느낌적인 느낌이네유