첫 프로젝트 만들기_07_Constraint 제약

컨스트레인트(제약)

 

앞 글에서 편집 화면에 추가한 버튼의 위치가

가상화면의 스크린에는 다른 위치에 나타났다.

이번에는 이 문제를 수정해 본다.

버튼을 클릭한 후 오른쪽 속성창을 보면 Constraint Widget(제약 위젯)에 현재 아무런 제약이 없는 상태를 나타낸다.

Constraint(제약)은 View(뷰: 화면에 등록한 것)를 어디에 배치할 것인지 또는 

다른 View들과는 어떤 상태로 할 것인지 등을 나타내는 말이다.

 

버튼을 선택하면 상하좌우에 동그라미가 나타난다.

이 동그라미를 사용해서 제약을 만들 수 있다.

마우스 포인터를 버튼의 위쪽 동그라미를 클릭한 상태로 위쪽으로 이동하여 textView 아래쪽 동그라미에 연결시켜보자.

textView에 붙는다. 오른쪽 속성창도 모양이 바뀌었다.

Text탭을 눌러서 코드 입력창에 가보면 Button(버튼) 태그 안에 방금 작업한 내용이 추가되어 있다.

코드의 내용은 '레이아웃(layout) 제약 위쪽(constraintTop)을 id/textView 의 바닥쪽으로(toBottomOf)'라는 뜻이다.

다시 Design창으로 돌아간다.

이번에는 컨스트레인트 위젯 창에 있는 왼쪽 더하기 모양 위에 마우스 포인터를 갖다 대 보자.

'왼쪽으로 연결하기'라는 메세지가 나타난다.

왼쪽 더하기 버튼을 클릭하자.

그러면 ConstraintLayout 왼쪽으로 제약이 만들어진다.

이렇게 제약을 만드는 방법은 화면에서 직접 끌어서 하는 방법과 위젯창에서 더하기 버튼을 클릭하는 방법이 있다.

 

오른쪽과 아래쪽 제약도 만들자.

textView를 클릭해서 제약이 어떻게 되어 있는지 확인하자.

아래쪽은 버튼이 아니라 ConstraintLayout의 아래쪽에 제약이 걸려있는 것을 알 수 있다.

 

제약을 끊으려면 x 모양을 클릭하면 된다.

위젯의 아래 Constraints 부분에 뷰의 제약이 모두 표시된다.

Start(시작)은 화면의 왼쪽편

End(끝)은 오른쪽

Top(꼭대기)은 위쪽

Bottom(바닥)은 아래쪽을 나타낸다.

그리고 parent는 여기서는 이 뷰들을 포함하고 있는 ConstraintLayout을 나타낸다.

 

위쪽 도구 모음에는 제약을 자동으로 만들어 주는 버튼(마법지팡이? 모양)도 있다.

제약을 모두 끊고 자동 제약 버튼을 클릭해서 어떻게 되는지도 확인해 보자.

 

연습을 다 했으면

아래 그림처럼 제약을 다시 만들자.

위 그림에서 Hello Kotlin 텍스트뷰에 제약이 걸려있는 버튼의 위치를 조금 아래로 이동하고 싶으면

bias(편향) 버튼을 이용하면 된다.

위와 같은 위치와 비슷하게 만든다.

다음 글에서는 String에 대해 알아본다.

끝.