안드로이드 개발

[Part2] Android Studio 기본 구조 이해하기(Layout XML, Activity)

CSjune 2024. 2. 18. 11:19

 

안드로이드 개발을 시작하면 안드로이드 스튜디오의 개발환경 구조를 이해하고 있어야 한다.

안드로이드 앱 프로그래밍을 하게 되면 주요하게 사용하는 기본적인 3가지 파트를 알고 있어야 한다.

전체흐름을 쉽게 이해하기 위해서 Layout XML → Activity → Build.gradle 순서로 설명하려고 한다. 그중에서도 오늘 게시글에서는 Layout XML과 Activity에서만 다룬다.

 

Layout XML

 

 Layout XML은 사용자들의 눈에 보이는 화면의 구성을 정의하는 부분이다. Layout = 화면 으로 이해하면 된다. 

 

 XML(Extensible Markup Language) 는 데이터를 정의하는 규칙을 제공하는 Markup 언어이다. Markup 언어는 일반 프로그래밍 언어와는 달리 데이터의 정보정도만 기술하여 사용된다. 그래서 프로그래밍 언어와 달리 자체적으로 컴퓨팅 작업을 할수 없고, 구조적 데이터 관리를 위해 사용된다. 

 

 [Part1 게시글]에서 사용했던 Hello World 화면을 이해해보자.

 아래 화면은 "Constraint Layout 안에 TextView 1개를 설정" 했다고 이해하면 된다. 

 여기서 문법상 주목해야할 부분은 Constraint Layout Component와 TextView Component의 시작과 종료를 나타내는 문법이 다르다는 부분이다. 

  •   Layout :  <....constraintlayout. .....>  내용  </....constraintlayout>
  •   TextView : <TextView 내용 />

 일단은 부모뷰(Layout)와 자식뷰(TextView)의 문법차이 때문이라는 정도만 이해하고, Layout의 시작과 종료 형태와 나머지 View Component의 시작과 종료 문법은 저러한 형태로 사용한다는 것만 이해하면 간단한 화면 구성단계에서는 어려움이 진행할 수 있다.

View Component는 부모 Layout이 무엇인지에 따라 위치를 설정하는 내용이 다르다. Layout은 크게 Linear Layout, Relative Layout, Constraint Layout 나뉘게 되는데 가장 많이 사용하는 Constraint Layout에 대해서 설정하려고 한다.

위의 예시의 TextView의 위치설정을 보게되면, 본인의 4개 방향을 각각 Start, End, Top, Bottom으로 바라보고 어느 곳을 기준으로 설정할지를 정의한다.

  •  app:layout_constraintStart_toStartOf = "parent" : 본인의 Start부분을 "parent(부모 View, 여기서는 Constraint Layout)"의 Start부분에 맞춘다.
  •  app:layout_constraintEnd_toEndOf = "parent" : 본인의 End부분을 "parent" 의 End부분에 맞춘다.
  •  app:layout_constraintTop_toTopOf = "parent" : 본인의 Top부분을 "parent" 의 Top부분에 맞춘다.
  •  app:layout_constraintBottom_toBottomOf = "parent" : 본인의 Bottom부분을 "parent" 의 Bottom부분에 맞춘다.

여기까지 잘 이해가 됐다면 아래 XML파일의 전체적인 틀을 이해할 수 있다.

  • 부모뷰 : Constraint Layout
  • 자식뷰 : TextView, Button
  • "Constraint Layout 안에 TextView, Button을 설정"

 

Activity

 

Activity의 설명은 위 Layout XML파일에서 이어진다.

Button을 클릭하면 숫자 1이 숫자2로 변하도록 하고 싶다면 어떻게 해야할까?

 

Layout XML에서 TextView와 Button의 화면 위치 구성은 완성해놓았다.

그러면 화면의 흐름을 제어하기 위해서 Activity파일을 수정해 주어야 한다.

  • setContView()함수를 통해 activity_main.xml의 파일과 연결시켜준다. 해당 Activity파일이 다루고자하는 Layout XML을 설정하는 부분이다.
  • kotlin언어의 변수 선언문법은 "var <변수명> : <자료형> = 할당값" 이다.
  • kotlin언어에서 Click Event를 처리할때는 .setOnClickLisner{ }를 사용한다.

 

Activity파일에서 View Component에 대한 변수선언을 할때는 Layout XML에 설정해놓은 변수를 findViewById()함수를 통해 연결한다.

  • Activity : var number : TextView = findViewById(R.id.number)
  • Layout XML : android:id="@+id/number"

 

위 Activity코드까지 작성을 완료하여 실행을 하게되면 , 클릭시 숫자1이 2로 변하는 것을 확인할 수 있다.