(기초) 화면 디자인 및 편집하는 방법

1. 오른쪽 위의 Code 탭에서는 Code를 확인할 수 있고, Design 탭에서는 화면 design을 확인할 수 있다.

2. Design 탭을 클릭한 후 왼쪽의 위젯 중에서 사용하고 싶은 위젯을 오른쪽에 끌어다놓는다. 위젯을 선택한 후 [Infer Constraints] 아이콘을 클릭.

* Infer Constraints - Constraints layout은 위젯이 연결되지 않으면 오류가 나는데 그걸 연결해주는 기능

오른쪽 아래의 확대/축소 아이콘으로 화면 크기를 조절할 수 있다.

3. 오른쪽 위의 Split 탭을 클릭하면 XML코드와 미리보기 화면 확인 가능

XML에서 삭제하거나 추가한 위젯은 Design에서도 적용됨

4. 왼쪽 상단의 저장 아이콘을 클릭하거나 메뉴의 [File] - [Save All]을 클릭하여 변경 사항 저장

 

 

* 왼쪽의 Attributes 탭에서 각 컴포넌트 attribute 조정 가능