[kotlin] Build Your First Android App in Kotlin 무작정 따라하기 - 3

 

Build Your First Android App in Kotlin  |  Android Developers

이번 글에서는 위 링크의 4단계부터 이어가보도록 하겠다.

 

4. Task: Explore the layout editor

도입부에서 안드로이드 앱의 screen은 하나 이상의 fragment로 이루어져 있다는 설명이 나온다. 중요한 개념인것 같은데 이에 대해서는 다른 글에서 좀 더 다뤄보도록 하고, 일단은 스크린을 이루는 요소 정도로 이해하고 넘어가도록 하자. 이 fragment, 혹은 프래그먼트는 앞선 단계에서 basic 앱을 만들면서 자동으로 생성되어 있는데,

여기에만 봐도 java 아래 코틀린 코드로도 존재하고, res의 layout에도 xml 파일로도 존재한다.

 

설명에 의하면, 'visible fragment'는 ui를 정의하는 layout을 가지고 있다고 한다. 이 설명만 보면 visible하지 않은 fragment도 있는 건가 하는 의문이 드는데, 이것도 일단은 넘어가도록 하자. 이 layout은 xml파일로 정의되는데, 안드로이드 스튜디오에서는 이 xml파일을 직접 수정하거나, 아니면 비주얼 에디터를 사용해서 수정하는 것이 가능하다고 한다.

 

설명 순서가 조금 바뀌었으나, 위에 올린 이미지에서 res의 layout 아래 있는 fragment_first.xml파일이 딱 앞서 설명한 내용인 것이라는 걸 추측해볼 수 있고, 이를 더블클릭해보면...

 

바로 이렇게 생긴 창이 떠서 아 이 창에서 뭔가 수정해서 ui를 만들 수 있겠구나- 하고 추측해볼 수 있겠다. (사실 바로 이렇게 생긴 창이 나오지 않을 수 있다. 나는 창 영역 크기 조금 조절하고 가운데 있는 영역의 오른쪽 아래 있는 버튼 눌러보면서 확대 정도도 조절했다.)

 

이 글을 읽고 나면

- 레이아웃 에디터 사용법과,

- property value를 설정하는 방법과,

- string resource를 추가하는 방법과,

- color resource를 추가하는 방법

을 배울 수 있다.

 

Step 1: Open the layout editor

위에서 레이아웃 xml파일 더블클릭을 해보면서 이미 스타트를 끊었다. 이렇게 해서 생긴 창의 영역들을 아래와 같이 부른다고 한다.

여기서 요긴해보이는 건 창 가장 오른쪽의 상단부에 있는 바로 이 탭들.

처음 들어갔을 때는 저 'Design'탭이 선택되어 있는데, 이를 'Code'나 'Split'으로 바꿔보면

 

이런 식으로 xml 코드만 보이게 하거나,

이런 식으로 한 화면에 xml 코드랑 디자인을 동시에 볼 수도 있다.

디자인 에디터의 오른쪽 아래에 있는 버튼들로 확대, 축소, 팬이 가능하고,

디자인 에디터 왼쪽 상단에 있는 아이콘에서는

디자인과 blueprint 중에 뭘 볼지 설정할 수 있다는데, 여기서

- 하얀색 화면으로 표시된 Design 레이아웃은 우리가 보는 화면을 뜻하고,

- 청록색 화면으로 표시된 Blueprint 레이아웃은 'schematic view of the layout' 이라는데, 아직은 정확히 뭔지 모르겠으니 넘어가도록 하자.

 

저 pixel이라고 되어있는 걸 눌러보면 다른 해상도의 화면도 설정할 수 있게 되어있다.

 

Step 2: Explore and resize the Component Tree

컴포넌트 트리 창을 옆으로 숨길 수 있다는데... 이건 여기에 캡쳐를 넣을 정도로 중요한것 같지 않으니 설명은 생략한다.

 

Step 3: Explore view hierarchies

Component Tree에 있는 내용물을 보면,

이런 식으로 화면을 이루는 요소들과 연결되어 있는 것을 알 수 있다. 이때, 저 두 요소를 view라고 부르는 것으로 보이고, 이 두 view를 포함하고 있는 'ConstraintLayout' 또한 view라고 하는것 같다. layout은 이러한 view를 가지고 있어야 하는데, 최상단에 있는, 즉 root 역할을 하는 view는 다른 view들을 포함할 수 있는 view group이어야 한다는데, 일단은 view라는 개념이 있구나... 하고 대강만 이해하고 넘어가도록 하겠다.

위에 나온 root view인 ConstraintLayout이라는 이름은 이 글의 제일 처음에 보았던 fragment_first.xml에 아래와 같이 등장한다.

내용물을 보면 저 ConstraintLayout이라는 요소 안에 TextView와 Button이라는 요소가 존재하고, 그 안에 "Hello first fragment" 라든지 "Next" 같이 ui 화면에 표시되었던 텍스트들도 들어있는 것이 보인다.

 

그러면 이제 이 내용물들을 바꿔보도록 하자.

 

Step 4: Change property values

저 코드 화면에서 TextView의 "Hello first fragment"라고 되어 있는 곳에서 우클릭을 하면

이런 창이 뜨는데, Go To > Declaration or Usages로 들어가면,

strings.xml이라는 파일이 뜬 것을 볼 수 있다. 참고로 앞선 글에서 values 안에 string값이 들어있다고 지나가듯이 나왔었는데, strings.xml가 실제로 values아래 들어있는 것을 직접 확인해볼 수 있다.

 

위의 화면에서 name="hello_first_fragment"라고 되어있는, 아래서 세번째 줄에 있는 내용물을 Hello first fragment에서 Hello World로 바꿔보자. 그러고 다시 fragment_first.xml 파일로 돌아가서 디자인 탭을 눌러보면,

화면 가운데 뜨는 내용물이 Hello World로 바뀐 것을 볼 수 있다. 이제 이게 디자인 화면에서 어떻게 엮여있는지 좀 더 자세히 들여다보자.

Component Tree 패널에서 저 textview 요소를 클릭하면 화면에 이런 식으로 나오는 것을 볼 수 있고, 거기에다가

오른쪽에 있던 attributes 패널에도 어떤 내용이 뜬 것을 볼 수 있다. 저 attributes 패널의 스크롤을 내리면

 

이렇게 text로 Hello World가 들어가있는 것을 볼 수 있는데(저렇게 안 나오고 @string/hello_first_fragment 같이 나올 수도 있는데, ctrl+- 키를 누르면 전환이 가능하다.), 여기서 중요한 것은 저 텍스트 오른쪽에 길쭉하게 색칠해져 있는 부분이다. 저걸 누르면

이렇게 리소스들이 모여있는 창이 뜬다. 즉, 앞서서 본 strings.xml에 어떤 리소스를 만들어두면, 이런 식으로 찾아서 연결할 수 있는 것으로 보인다. 튜토리얼 글에 나오지 않았는데 이것저것 눌러보다가 알게 된 사실.

 

textAppearance라고 접혀있는 속성을 열면 텍스트 크기도 바꿀 수 있고, 색도 바꿀 수 있고, bold나 italic을 적용할 수도 있다는 걸 알 수 있다. 그리고 여기에 있는 내용물을 수정하면, 당연히 fragment_first.xml 파일의 내용도 수정된다.

 

이 외에도 다른 수정할 수 있는 속성들을 쭉 내려보면서 확인이 가능하다.