6번째 프로젝트 만들기_03

 

계속해서 이번에는 프로젝트를 만들었을 때 기본으로 생성된 activity_main.xml을 수정한다.

activity_main.xml을 선택하자.

이 레이아웃 파일은 ConstraintLayout (컨스트레인트 레이아웃)으로 설정되어 있으며 기본으로 Hello World라는 text속성 값을 가진 TextView가 만들어져 있다.

 

ConstraintLayout은 각 뷰들에게 제약(constraint)을 걸어서 배치하는 것이 특징이다.

몇 가지 뷰들을 삽입하고 제약을 걸어서 어떤 모습이 되는 지 확인해 볼 것이다.

 

먼저 이 TextView를 삭제하여 깨끗한 상태에서 작업하자.

TextView를 마우스 오른쪽으로 누른 후 Delete(삭제)를 클릭한다.

 

Palette(팔레트)의 Widgets(위젯)에서 CalendarView(캘린더 뷰)를 추가한다.

모서리 부분을 움직여 크기를 조절하고 위와 같이 가운데 정렬이 되었을 때 놓는다.

 

calendarView에 빨간 경고아이콘이 나타난다.

"이 뷰에 제약이 되지 않았다. 실행하면 좌표 (0,0)으로 이동하게 되므로 제약을 추가하라"는 뜻이다.

 

참고로 디자인 창에 노란색으로 표시한 것은 '자동 제약' 아이콘이다. 뷰들의 제약을 자동으로 만들어 주지만 뷰가 많아지면 제약이 원하는 데로 만들어지지 않는 경우가 많으므로 수동으로 제약을 만드는 법을 익히는 것이 좋다.

제약 만드는 것은 이전 글에서 많이 다루었으므로 간단하게 설명한다.

 

제약을 만들려면 뷰의 사방에 있는 점을 바깥쪽으로 끌어서 만들거나 오른쪽 속성창에서 파란색 + 아이콘을 클릭해서 만들 수 있다.

 

일단 위와 같이 왼쪽, 오른쪽, 위쪽에 제약을 만들고 마지막으로 아래쪽 제약을 만든다.

 

 

제약은 3가지 옵션을 가지고 있다.

위 그림의 녹색 테두리 안에서 제약의 옵션을 3가지 중에서 선택할 수 있다.

Fixed(고정됨) , Wrap Content(콘텐츠 감싸기) , Match Constraints(제약에 맞추기)

 

오른쪽 속성창의 Vertical Bias(버티클 바이어스; 수직 편향)를 조절한다.

레이아웃과의 간격도 위와 같이 조정한다.

 

이번에는 아래쪽에 ImageView(이미지 뷰)를 넣는다.

ImageView를 끌어서 놓으면 이미지 선택 창이 나타난다.

 

리소스 창에서 ic_launcher 아이콘을 선택한다.

기존의 avatars(아바타) 이미지를 선택해도 상관없다.

 

위와 같이 왼쪽과 아래의 제약을 만든다.

 

 

그 다음에 imageView 위쪽을 마우스로 끌어서 달력 아래쪽에 제약을 건다.

 

팔레트에서 textView를 추가한다.

imageView와 마찬가지로 먼저 오른쪽과 아래쪽에 제약을 건다.

그 다음 textView 왼쪽을 imageView의 오른쪽에 제약을 건다.

그리고 윗쪽은 imageView의 윗쪽에 제약을 건다.

이렇게 하면 다음과 같이 될 것이다.

 

imageView의 왼쪽, 아래쪽 간격을 조정할 수 있다.

 

다 하면 대충 다음과 같이 될 것이다.

textView의 text 속성을 다음과 같이 바꾼다.

BACK TO THE MENU (메뉴로 돌아가기) 텍스트뷰를 클릭하면 메뉴로 돌아가야 한다.

이것을 속성에서 처리할 수 있다.

 

textView가 선택된 상태에서 속성 검색창에 on click을 입력하면 onClick 속성이 나타난다.

on은 '붙어있는 상태'를 나타내는 말이므로 on click은 '클릭하면' 이라는 의미이다.

 

클릭하면 메뉴로 이동해야 하므로 함수 이름을 불러올 레이아웃 이름을 사용해서 loadLayoutsMain 이라고 하자.

함수 이름을 입력한 후 이 함수를 MainActivity.kt에 만들어 준다.

 

이제 실행해서 레이아웃으로 이동이 되는지 테스트 해보자.

메뉴에서 ConstraintLayout을 불러오기 위해 LOAD버튼을 클릭하고 BACK TO THE MENU를 클릭하면 다시 메뉴 화면으로 이동해야 한다.

 

TableLayout을 불러오는 내용은 다음 글에서 작성하기로 하고, 

이번 글을 여기까지.

 

끝.

Wraven...