첫 프로젝트 만들기_03_레이아웃 편집기

# 레이아웃 에디터(Layout Editor) 둘러보기

 

프로젝트를 만들면 첫 화면은 아래와 비슷하다.

(참고로 안드로이드 스튜디오 버전 3.6 이상에서는 약간의 변화가 있다.)

 

이 화면을 레이아웃 에디터(Layout Editor)라고 부른다.

레이아웃 에디터는 액티비티.xml 파일을 열면 나타난다.

여기서는 왼쪽의 파일 구조창에서 activity_main.xml파일을 더블클릭하여 열었다.

열린 파일은 위쪽에 탭으로 나타나 언제든지 선택할 수 있는 상태가 된다.

레아아웃 에디터에서는 화면을 실제로 확인하면서 작업할 수 있다.

레이아웃 메뉴 아이콘을 누르면 3가지 모양의 화면을 볼 수 있다.

Design은 실제 모양 보기이고

Blueprint는 윤곽선 보기이다.

 

 방향 아이콘으로 레이아웃 방향을 가로, 세로로 바꾸면서 어떤 모양인지 확인할 수 있습니다.

 

Component(컴퍼넌트, 구성요소)는 화면을 디자인하는데 필요한 부품들이다.

글자, 단추, 그림 등 수 많은 컴퍼넌트들이 그림의 빨간색 부분인 Palette(팔레트)에 준비되어 있다.

안드로이드 스튜디오에서는 이 구성 요소를 View(뷰)라고 부른다.

 

필요한 컴퍼넌트(또는 View)를 추가하는 방법은 3가지이다.

첫째는 직접 오른쪽 디자인 창으로 이동하는 방법이다.

둘째는 팔레트 아래쪽 컴퍼넌트 트리 창으로 이동하여 추가할 수 있다.

셋째는 Text 창에서 직접 글자를 입력하는 방법이다.

 

Component Tree에  추가한 구성 요소들은 계층 구조를 가진다.

계층 구조는 탐색기에 있는 폴더와 파일의 구조와 비슷하다.

폴더가 파일을 포함하는 것과 같다.

 

계층 구조에서 가장 윗부분에 있는 것을 Root View (루트=뿌리, 뷰=구성요소)라고 부른다.

위 그림에서 Root View는 ConstraintLayout(컨스트레인트 레이아웃) View이다.

이 컨스트레인트 레이아웃 뷰는 TextView(텍스트뷰)라는 구성 요소를 포함하고 있다.

이렇게 다른 뷰들을 포함하는 Root View를 View Group(뷰 그룹)이라고 한다.

 

위 그림의 뷰 그룹이 텍스트(문자)로는 어떻게 표현되어 있는지 보자.

activity_main.xml 의 Text 탭을 누르면 위와 같은 모습이다.

루트 뷰인 컨스트레인트 레이아웃이 빨간색 부분으로 처음과 끝을 나타내는 태그(tag)가 있다.

그 안에 TextView 태그가 포함되어 있는 모양이다.

 

다시 Design 탭을 눌러서 디자인 창으로 돌아온다.

 

# 속성(Attribute)

 

Component Tree에 있는 View(뷰)를 선택하면 오른쪽에 그 뷰에서 정할 수 있는 속성(Attribute)들이 오른쪽에 나타난다.

녹색 줄친 부분들이 속성이다.

속성은 뷰가 가지고 있는 특성이다.

특성에는 크기, 색, 문자 등 다양한 속성들이 있다.

 

여기서 가장 중요한 것은 제일 위에 있는 id 이다.

id는 한마디로 View의 이름이다.

id는 프로그래밍 할 때 어떤 View가 무엇인지를 판단하는 기준이 되기 때문에

안드로이드 스튜디오에게도 중요하고 만드는 사람에게도 중요하다.

그러므로 이름을 잘 지어야 한다.

 

초보자의 경우는 영어 소문자만 사용하여 'View종류_이름' 으로 만드는 것이 좋다.

예를 들어 위의 그림에서 현재 선택되어 있는 View가 ConstraintLayout이므로

id는 constraintlayout_main 처럼 지으면 된다.

이렇게 지어 놓아야 프로그래밍할 때

뷰가 '컨스트레인트 레이아웃이고 메인에 있는 것'이라는걸 쉽게 알 수 있다.

어떤 사람은 constLayoutMain 처럼 짓는 사람도 있다.

소문자로 시작하여 뒤에 연결하는 단어의 첫글자만 대문자로 쓴다.

이런 모양으로 짓는 것을 낙타 등 처럼 생겨서 camel type (캐멀 타입, 낙타형식)이라고 한다.

 

참고로 언어마다 이름을 지을 때 다른 형식을 사용한다.

반드시는 아니고 자기들만의 관행으로 쓰인다.

예를 들면 Java(자바)언어는 캐멀타입을 사용한다.

안드로이드 스튜디오는 오랫동안 자바를 사용해 왔기 때문에

여기서도 자바식인 camel type(캐멀타입)으로 이름을 짓는 것이 좋을 듯 하다.

 

그리고 여러 언어에서 영어 대문자와 소문자를 구분한다.

즉, Abc와 abc는 서로 다르다는 것이다.

코딩할 때 이런 점에 유의해서 작성하도록 한다.

 

이제 컨스트레인트 레이아웃 안에 있는 TextView를 클릭해 보자.

Ab는 문자라는 것을 나타내는 아이콘이고

이 뷰는 문자를 넣을 수 있는 TextView(텍스트뷰)라는 것이다.

따옴표 안에 있는 문자 Hello World!가 현재 이 텍스트뷰에 들어 있는 문자이다.

오른쪽 속성 창의 text 속성에 Hello World!가 적혀 있다.

text는 속성의 이름이고 Hello World!는 text속성의 값(영어로 value)이라고 한다.

 

이렇게 text 속성의 값(value)에 적는 문자들은 strings.xml 이라는 파일에 따로 관리하고 있다.

그 이유는 앱을 만들면서 설명하기로 하고

먼저 strings.xml파일을 열어보자.

왼쪽 파일 구조창에서 순서대로 app - res - values 폴더를 열어 보면 xml파일이 3개 있다.

strings.xml파일을 더블클릭 하자.

앞에서 이 파일 안에는 뷰를 만들 때 입력하는 문자를 모아 둔다고 했다.

지금은 app_name이라는 태그만 있다.

이 태그에 들어 있는 문자는 MyExercise이다.

처음에 프로젝트를 만들때 적었던 프로젝트 이름이다.

이것을 보고 앱 이름이 MyExercise라는 것을 알 수 있다.

이 문자를 다른 문자로 바꾸면 앱 이름을 바꿀 수 있다.

 

그런데 앞에서 TextView에 입력되어 있던 Hello World!는 왜 여기 없는 것일까?

그것은 아직 이 strings.xml파일에 등록을 하지 않았기 때문이다.

그럼 text속성의 Hello World!를 strings(스트링즈) 파일에 등록해 보자.

문자 옆에 있는 직사각형 버튼(Pick a Resource)을 클릭한다.

리소스 선택 창이 나타난다.

오른쪽 위 Add new resource(새 리소스 추가)를 클릭한 후 New string Value(새 스트링 값)을 클릭한다.

Resource name (리소스 이름) 에는 '속성 이름_적당한 이름' 모양으로 text_hello라고 적는다.

Resource value (리소스 값) 에는 'Hello Kotlin!'으로 적는다.

다른 것은 그대로 두고 OK버튼을 클릭한다.

텍스트뷰의 값이 @string/text_hello로 바뀐다.

이것은 string의 text_hello 값을 참조한다는 뜻이다.

strings.xml탭을 클릭해 보면

string 이름인 "text_hello"의 값(value)으로 Hello Kotlin! 이 등록되어 있다.

이렇게 텍스트(문자)를 스트링 값으로 등록해 놓으면 쉽게 수정할 수 있고

앱을 다른 언어로 배포할 경우 번역에도 이용할 수 있다.

 

activity_main의 text 탭에서는 어떻게 바뀌었는지 확인해 보자.

text탭을 클릭하면 마찬가지로 string에서 참조한다는 표시로 바뀌어있다.

참고로 텍스트 창의 한 줄을 선택하려면 왼쪽의 해당 코드 숫자를 클릭하면 된다.

연속으로 여러 줄 선택할 때는 드래그(drag)하면 된다.

 

 

이번에는 Hello Kotlin!의 문자색(text color)을 바꿔보자.

다시 Design 화면으로 이동한 후 텍스트뷰를 선택힌다.

'문자 색(text color)' 도 텍스트뷰(TextView)의 속성(Attribute)이므로

속성창에서 찾을 수 있다.

속성들이 많기 때문에 쉽게 찾으려면 search(찾기)를 이용하면 편리하다.

 

찾기를 클릭한 후 'text'를 입력해 보자.

text와 연관된 속성들이 나타난다.

텍스트뷰의 문자색 속성인 textColor도 찾을 수 있다.

속성 textColor의 속성값에 마우스 포인터를 대 보면 이 값은 이미 어떤 곳의 값을 참조하고 있다는 것을 알 수 있다.

뷰의 색상 값을 관리하는 파일은 color.xml파일이다.

이 파일은 strings.xml과 같은 res > values 폴더 안에 있다.

맨 앞에 있는 default 는 기본값이라는 뜻이다.

 

이제 이 색상 값을 바꿔보자.

 색을 바꾸기 위해 textColor 옆에 있는 색 아이콘을 클릭한다.

색상 선택표가 나타나면 색을 선택하거나 준비되어 있는 색상표(Material A700)에서 선택할 수 있다.

Hex(16진수) 코드를 알고 있으면 직접 입력할 수 있다.

여기서는 녹색을 선택한다.

 

 

이번에는 Hello Kotlin!의 문자 크기를 바꿔보자.

 

'문자 크기(text size)' 도 텍스트뷰(TextView)의 속성(Attribute)이다.

textColor 아래에서 찾을 수 있다.

textSize 속성을 30sp로 바꾸자.

sp는 문자 속성에 사용하는 크기 단위다.

 

현재는 text를 검색 중이므로 속성 전체가 보이지 않는다.

속성 전체를 보려면 검색창 오른쪽에 있는 x 를 클릭한다.

 

참고로 위에서 살펴본 string(문자열), color(색) 등의 resource(리소스, 자원)을 한번에 관리하려면 왼쪽에 있는 세로탭 중에서 Resource Manager를 이용하면 편리하다. 자세한 사용법은 프로젝트를 만들면서 알아보기로 한다.

 

이제 지금까지 변경한 내용을 AVD(가상기기)로 확인해 본다.

등록한 AVD 중에서 Pixel2 를 선택한 후 오른쪽의 녹색 삼각형을 클릭한다.

잠시 기다리면 AVD에서 실행한 폰으로 확인할 수 있다.