Android Studio 공부 3일 차(기초적인 화면 구성 요소)

View라고 하는 것은 사용자의 눈에 보이는 화면 구성요소들을 말한다.

이러한 View를 여러 개 모아 놓은 것을 'View Group'이라고 하며 View Group안에서 View의 위치를 지정할 수 있다.(View Group은 View를 담는 그릇과 비슷하다.) 이 그룹 안에는 또 다른 View나 View Group을 넣을 수도 있다. 이 View Group 중에서는 내부에 View를 포함하면서 View들을 배치하는 역할을 하는 것을 레이아웃(Layout)이라고 한다.

정리와 동시에 내용을 추가하자면

View: 사용자의 눈에 보이는 화면 구성요소(그 중 컨트롤 기능을 하는 View를 Widget View Group: View를 담고 있는 그릇 Layout: View Group안의 View를 배치 하는것

 

이제부터는 화면 구성 요소들을 배치하면서 한 번 살펴보자 

처음 Project를 생성하면 이런 화면이 나올 것이다.

왼쪽 하단에 'Compnent Tree'의 밑에 'Constraint Layout'과 'TextView'가 보일 것이다.

여기서 ConstraintLayout 부분이 지금 화면에 보이는 하얀 화면 즉 가장 첫 번째로 화면을 구성하는 틀이라고 생각할 수 있다. 그리고 TextView 부분은 우리가 처음에 봤던 Hello World를 말한다. 그리고 TextView의 입장에서 자신을 감싸는 ConstraintLayout은 부모 레이 아웃이 될 것이다.(즉 ConstraintLayout에서부터 처음 화면 구성이 되어있고 그 위에 지금 TextView가 올라와 있다고 생각할 수 있다.)

 

레이아웃에도 여러 종류가 있는데 오늘은 ConstraintLayout을 중점적으로 다뤄 보도록 할 것이다.

 

ConstraintLayout은 제약 레이아웃으로 View의 위를 결정할 때 제약조건을 사용한다는 특징을 가지고 있다.

이때 제약 조건은 View의 연결점과 대상(Target)을 연결한다는 것이다.(왼쪽의 점과, 위쪽의 점을 연결해야 한다.(이 두 가지가 꼭 필요한 제약 조건이다.))

제약조건을 충족하려면 연결점과 대상이 필요한데 이때 타깃이 될 수 있는 대상은 다음과 같다.

1. 같은 부모 레이아웃안의 다른 View들 2. 부모 레이아웃의 3. 가이드라인

 

이제 버튼을 하나 생성하여 왼쪽의 연결점과 위쪽의 연결점에 갖다 놓아보자 왼쪽과 위쪽의 연결점이 꽉 채워진 것을 볼 수 있는데 이렇게 되면 제약조건이 완료가 된 것이다. 

 

이번에는 버튼을 클릭하고 오른쪽에 있는 Layout을 한번 살펴보자

Layout밑에 보면 Constraint Widget이 있는데 여기서 왼쪽을 0, 위쪽을 80으로 바꾸어보니 왼쪽 벽과는 완전히 붙고 위쪽과는 일정 거리를 유지하게 된다. 이는 연결점과 대상과의 거리를 조절할 수 있다.

이 숫자를 보통 마진(Margin)이라 부른다.

 

이번에는 화면 가운데에 버튼을 배치해보자 

연결점이 모두 연결된 것이 보인다. 만약 연결점이 자동으로 연결되지 않는다면 위의 자석 모양에 빗금이 쳐져 있는지 확인해보고 그렇다면 클릭해 취소해주자(자동으로 연결점을 연결해주는 시스템이다.)

이번에는 아까와 다르게 마진을 조정하는 부분 옆과 밑에 줄이 하나 생긴 것을 확인할 수 있다.

이 부분은 가로 연결점과 세로 연결점을 전부 연결했을 때 나타나는데 이 부분은 화면상의 비율에 맞춰 버튼의 위치를 조절할 수 있다.(숫자가 50으로 설정되어 있는데 50이 가운데 기준점이라고 생각하면 된다.)

 

이번에는 Constraint Widget에 있는 사각형 안의 꺾은선을 한번 클릭해보자 보면은 첫 번째 사진에서는 직선의 모양으로 바뀐 것을 확인할 수 있다. 두 번째 사진에서는 구불구불한 선으로 바뀌고 화면이 꽉 찬 것으로 바뀐 것을 알 수 있다.

이것들이 의미하는 바를 밑에서 한번 정리하겠다.

>>: warp_content(글자크기에 맞추어 크기 조정) l-l: 고정 크기 l~l: match_constraint or 0dp (부모레이아웃의 여유 공간을 채운다. 때문에 부모레이아웃안의 View들에 따라 채워짐의 정도가 달라진다.)

 

 

이제 마지막으로 가이드라인을 한번 정리하고 포스팅을 마치도록 하겠다.

첫 번째 사진의 아이콘에서 Vertical Guidline을 선택해보자 그러면 두 번째 사진과 같이 줄이 하나 생기는 것을 알 수 있다.

이 가이드라인은 아까 한번 언급하였지만 연결점의 타깃이 되어 줄 수 있다. 그래서 생성한 View들의 위치 조정 시 유용하게 사용할 수 있다.