Mac 안드로이드 앱개발(5) - 안드로이드 프로젝트 구성

이번 편에서는 안드로이드 프로젝트의 기본 구성에 대해서 알아보겠습니다.

안드로이드 프로젝트는 수많은 컴포넌트들로 구성되어 있지만, 이제 갓 안드로이드에 입문하였다면 크게 2가지로 구분된다는 것을 알면됩니다. 코드 부분 그리고 레이아웃 부분입니다. 

 

1. "MainActivity.kt" 코드 부분을 간단하게 확인해보도록 하겠습니다.

 

package com.devkim.mytranslater

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

	// onCreate함수는 앱을 실행했을때 불리는 함수부분입니다.
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // activity_main.xml 레이아웃 파일을 읽어와서 화면에 적용해주는 코드입니다.
        setContentView(R.layout.activity_main)
    }
}

 

2. 그러면 "activity_main.xml" 레이아웃 부분은 어떻게 생겼는지 확인해보도록 하겠습니다. 

activity_main.xml 을 더블클릭해보면 아래와 같이 레이아웃 형태로 앱 구성을 할 수 있는 화면이 보여집니다.

 

왼쪽의 Palette에서 도구들을 끌어다가 앱을 구성할 수 있는데, 눈에 보이는 레이아웃이 어떤 코드 형태를 가지는지 확인하면서 진행하는 것이 차후 메뉴가 많아졌을때 관리가 수월하기 때문에, 코드 형태도 확인해보도록 하겠습니다. 아래 버튼을 클릭하면 코드 형태로 확인할 수 있습니다.

 

대략 ConstraintLayout 안에 TextView 가 포함되어 있다는 것을 확인할 수 있습니다.

Layout 구성 방식 중에는 LinearLayout, RelativeLayout, ConstraintLayout ... 등등 여러가지가 있습니다. 제가 이전에 안드로이드 앱 개발을 할 당시에는 LinearLayout을 베이스로 개발하였으나, 지금은 default 레이아웃이 ConstraintLayout인 만큼 ConstraintLayout만의 장점이 있을 것을 기대하며 ConstraintLayout 을 베이스로 진행해보도록 하겠습니다.

도구들은 EditText, Button, TextView, .... 를 주로 많이 사용하는데, 이를 레이아웃에 한번 배치해보겠습니다.

 

Text > Multiline Text 도구를 드래그하여 레이아웃에 올려둡니다.

(기본 EditText는 "Plain Text"를 사용하면 되지만, 번역앱을 만들어보기로 하였으니 여러줄 입력 가능한 컴포넌트를 사용하겠습니다.)

 

Button과 TextView도 각각 드래그해서 올려둡니다.

 

 

그런데 코드 에디터로 와서 확인해보니 각 도구들마다 빨간줄이 그어져 있네요 

"This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints" 

 

각 뷰는 디자인 시점의 위치만 가지고 있고, 제약을 가하지 않으면 runtime에서 (0,0) 에 위치할 것이라고 하네요.

실제 앱을 실행해보면 모든 도구들이 (0,0)에 위치한 것을 확인할 수 있습니다.

 

아래와 같이 레이아웃을 수정해보도록 하겠습니다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:gravity="start|top"
        android:inputType="textMultiLine"
        // EditText의 상단 parent의 상단과 맞춤
        app:layout_constraintTop_toTopOf="parent"
        // EditText의 시작(왼쪽)을 parent의 왼쪽과 맞춤
        app:layout_constraintStart_toStartOf="parent"
        // EditText의 끝(오른쪽)을 parent의 오른쪽과 맞춤 (좌우 각각 맞추면 가운데 정렬이 됨)
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        // Button의 상단을 editText의 하단과 맞춤
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintTop_toBottomOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

아래와 같이 레이아웃 구성된 것을 확인할 수 있고, 실제 앱 실행했을 때도 이와 동일하게 구성되는 것을 확인할 수 있습니다.

 

 

 

기본적인 프로젝트 구성에 대해서 알아보았고, 다음 편에서는 각 도구들에 동작을 입히는 방법에 대해서 알아보도록 하겠습니다.

감사합니다.