코틀린 개념 잡기(2)

본 글은 스파르타 코딩 클럽의 "안드로이드 앱개발 기초반" 강의를 듣고 작성한 개발일지입니다.

안드로이드 스튜디오에서 화면을 커스터마이징 하는 방법은 2가지라고 했습니다. 첫 번째, xml 코드로 작성하는 것과 두 번째, 디자인 탭의 뷰를 이용하는 것이죠. 오늘은 xml 코드를 살펴보려고 합니다.

아래는 레이아웃 에디터에서 "Code"를 선택하면 나오는 코드입니다. xml은 크게 element와 attribute로 구성되며, <TextView> 처럼 노란색으로 하이라이트된 부분이 element입니다. 이 element 내부에 속한 android: id, android:layout_width 등이 모두 attribute에 해당합니다. attribute는 말 그대로 element가 어떤 특성을 갖는지 표시하는 값입니다.

많이 사용되는 Attributes 예시

크기
android:layout_width
android:layout_height

간격
android:layout_margin
android:padding

글자
android:text android:textColor
android:textSize

배경관련
android:background

정렬
android:gravity

첫 번째로 등장하는 attribute의 id는 뷰를 가르키는 이름을 지정하는 것입니다. 일반적으로 camelCase와 snake_case를 많이 사용한다고 합니다. camelCase는 첫 단어가 소문자이고 띄어쓰기 단위로 대문자로 구성된 것이고, snake_case는 모두 소문자로 구성하되 띄어쓰기를 '_'로 연결하는 것입니다.

xml 코드를 작성하다보면 indent라고 하는 정렬이 중요해지는데요, 이때 ctrl + alt + L(맥은 cmd + alt + L)을 통해 자동 정렬 기능을 사용할 수 있답니다.

레이아웃 위치를 조정하는 atrribute는 아래와 같습니다. 아래 그림에서 파란색으로 보이는 것이 바로 위치 조정을 한 결과입니다.

app:layout_constraintEnd_toEndOf
app:layout_constraintStart_toStartOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintBottom_toTopOf

app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toBottomOf

레이아웃 위치를 조정하는 이유는 디스플레이 크기가 달라질 때 위치가 동적으로 변하기 때문입니다. 실제로 아래의 안드로이드 스튜디오 화면에서 빨간 선으로 칠한 부분을 누르면 다양한 크기가 나옵니다.

LinearLayout은 화면상에 그대로 이어붙여 출력되도록 하는 것을 말합니다. android:orientation이란 attribute를 통해 수평으로 붙일지, 수직으로 붙일지 선택할 수 있습니다.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"> // default = horizontal

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textSize="32sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:textSize="32sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:textSize="32sp" />
 </LinearLayout>

위에서 만약 수직으로 붙인다면 콘텐츠가 길어질수록 화면 내에 다 들어오지 못할 것으로 스크롤 기능이 필요합니다. 이때 사용할 수 있는 것이 ScrollView 입니다.

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" // scrollview 내부 linearlayout의 height는 wrap_content가 되어야 함
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="120dp"
                android:text="1"
                android:textSize="32sp" />
                
            ...
  
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="120dp"
                android:text="9"
                android:textSize="32sp" />

        </LinearLayout>
</ScrollView>

아래는 ScrollView에 이어 LinearLayout을 연속으로 사용해본 코드입니다. 가장 바깥의 LinearLayout은 수직으로, 안쪽에 있는 각 LinearLayout은 수평으로 이어붙입니다. 해당 코드의 결과는 아래 <LinearLayout 예시> 이미지와 같이 나옵니다.

 

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="32dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/introTextView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="horizontal">

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="100dp"
                    android:layout_margin="4dp"
                    android:onClick="clickIstj"
                    android:text="ISTJ" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="100dp"
                    android:layout_margin="4dp"
                    android:text="ISFJ" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="100dp"
                    android:layout_margin="4dp"
                    android:text="INFJ" />

                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="100dp"
                    android:layout_margin="4dp"
                    android:text="INTJ" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="horizontal">

새롭게 activity를 등록하면 app > java > com.example.personalitytest에 새롭게 파일이 생성됩니다. 그리고 app > res > layout에도 xml 파일이 추가됩니다.

app > manifests > AndroidManifest.xml 파일에서 우리가 등록한 activity가 모두 표시되어야 합니다. 이때 MainActivity가 다른 activity보다 복잡해보일 텐데, 그 이유는 MainActivity가 앱의 시작 화면을 가리키는 정보를 포함하기 때문입니다.

짧은 순간에 피드백 메시지를 보여주는 기능은 Toast 메시지를 통해 합니다. 아래 화면에서 보이듯 'ISTJ' 버튼을 누르게 되면 "청렴결백한 논리주의자"라는 메시지가 뜹니다. 코틀린 문법에 대해선 다음 시간에 자세하게 다루도록 하고 여기선 잠깐 맛보기로 살펴보고 넘어가겠습니다.

fun clickIstj(view: View) {
        Toast.makeText(view.context, "청렴결백한 논리주의자", Toast.LENGTH_LONG).show()
    }

<LinearLayout 예시>

참고로 'ISJT' 버튼인 이유는 activity_main.xml 파일에 가서 ISTJ 버튼을 클릭하고 "onClick" 을 위에서 정의한 함수 clickIstj라고 작성했기 때문입니다.

마지막으로 xml을 코드로 작성할 때 팁이 있다면 모든 attribute를 외우고 있을 수 없기 때문에 Design 탭을 눌러 어떤 attribute가 있는지 확인하는 습관이 있으면 좋을 듯 합니다. 특히 텍스트나 배경 색깔을 넣을 때는 색깔 픽셀을 외울 수 없겠죠.. ㅎㅎ