안드로이드 스튜디오 layout editor 개념정리

 

프로젝트의 폴더구조

app > java > com.example.myfirstapp > MainActivity
이는 기본 활동으로, 앱의 진입점입니다. 앱을 빌드하고 실행하면 시스템에서 이 Activity의 인스턴스를 실행하고 레이아웃을 로드합니다.

app > res > layout > activity_main.xml
이 XML 파일은 활동의 사용자 인터페이스(UI) 레이아웃을 정의합니다. 이 파일에는 'Hello, World!'라는 텍스트가 있는 TextView 요소가 포함되어 있습니다.

app > manifests > AndroidManifest.xml
매니페스트 파일은 앱의 기본 특성을 설명하고 앱의 각 구성요소를 정의합니다.

 

 

 

 

Android Layout Editor의 기능과 계층구조

 

Android Layout Editor는 Android Studio 의 작업 공간으로 , XML 코드를 작성하는 대신 UI 요소를 편집기로 드래그하여 Android 앱의 디자인 부분을 수행합니다. Android Studio Layout Editor를 사용하면 구성요소를 화면으로 드래그하거나 XML 레이아웃 파일을 편집하여 레이아웃을 구축할 수 있습니다.

안드로이드 앱의 사용자 인터페이스 (UI)는 레이아웃 및 위젯의 계층구조로 빌드됩니다
‘뷰(View)’는 텍스트, 단추, 이미지, 텍스트 상자, 체크박스, 라디오 버튼 등의 UI 요소를 말합니다.
반면에 , 뷰그룹(ViewGroup)은 레이아웃 요소입니다이다. 뷰그룹은 뷰를 그룹화하고 정렬하는데 사용된다.

 

 

Layout Editor 열기

1. 프로젝트 창에서 app > res > layout > activity_main.xml을 엽니다.
   
   
2. Layout Editor를 위한 공간을 확보하려면 Project 창을 숨깁니다. 이렇게 하려면, View > Tool Windows > Project를 선택하거나 간단히 Android 스튜디오 화면 왼쪽에 있는 Project를 클릭합니다.
   
   
3. 편집기에 XML 소스가 표시되면 창 오른쪽 상단에 있는 Design 탭을 클릭합니다.
   
   
4. (Select Design Surface)를 클릭하고 Blueprint를 선택합니다.
   - Blueprint 모드는 레이아웃의 구조를 시각화하고 분석하는 데 사용되며, 특히 복잡한 레이아웃을 디버그하거나 최적화하고자 할때 유용하다

5. Layout Editor 툴바에서  (View Options)를 클릭하고 Show All Constraints가 선택되어 있는지 확인합니다.
-모든 제약조건을 보여줌

6. 자동 연결이 사용 중지되어 있는지 확인합니다. 자동 연결이 사용 중지되어 있으면 툴바의 도움말에 (Enable Autoconnection to Parent)가 표시됩니다.

7. 툴바에서 (Default Margins)를 클릭하고 16을 선택합니다. 필요한 경우, 나중에 각 뷰의 여백을 조정할 수 있습니다.

8.툴바에서 (Device for Preview)를 클릭하고 5.5, 1440 × 2560, 560 dpi (Pixel XL)을 선택합니다.

9. UI문자열 변경
Project 창을 열고 app > res > values > strings.xml을 엽니다.이 파일은 모든 UI 문자열을 지정할 수 있는 문자열 리소스 파일입니다. 이 파일을 사용하면 모든 UI 문자열을 한곳에서 관리할 수 있으므로 문자열을 쉽게 찾고 업데이트하고 현지화할 수 있습니다.

ConstraintsLayout을 만들때 - 주위 버튼과 여백 고려후 텍스트 상자 확대 

1. 유연한 크기의 텍스트 상자 만들기
   체인은 둘 이상의 뷰 간에 존재하는 양방향 제약 조건입니다. 체인을 사용하면 체인으로 연결된 뷰를 일관성 있게 배치할 수 있습니다.
2. 여백 제약 조건에 맞게 상자 너비 확장
   
   
   

- 속성을 보려면 텍스트 상자를 클릭합니다. 그런 다음, 너비 표시기를 두 번 클릭하면 그림 9의 설명선 1에 표시된 것처럼 삐죽삐죽한 선(Match Constraints)이 설정됩니다.
- Match Constraints는 가로 제약 조건과 여백의 정의에 맞게 너비가 확장된다는 의미입니다. 따라서, 버튼과 모든 여백을 고려한 후 남은 가로 공간을 채우기 위해 텍스트 상자가 확장됩니다.

 

 

레이아웃 종류

 

 

* LinearLayout
위젯을 orientation옵션에 따라 왼쪽 위에서 아래로, 혹은 왼쪽 위에서 오른쪽으로 순서대로 배치한다.

* TableLyaout
위젯을 테이블 태그와 같이 열과 행으로 구성된 형태로 배치한다.

* RelativeLaout
위젯 자신이 속해있는 레이아웃의 동서남북 위치를 정하여 배치하거나
다른 위젯을 기준으로 상하좌우 위치를 정한다.

* GirdLayout
테이블레이아웃과 비슷하지만 행 또는 열을 확장하여 2개의 열을 하나로 합치거나 할 때 유용하다.

* FrameLayout
위젯들을 왼쪽 위에 일률적(한결같이)으로 겹치게 배치하여 위젯안의 위젯이 중복되게 보여주는 레이아웃이다.
여러 위젯을 배치하고, 상황에따라 숨기거나 보여주는 방식으로 활용한다.

레이아웃별 성능 - 계층깊이가 깊어지지 않도록 하기

layout을 여러개 사용할 때, UI 디자인을 달성하기 위해 하나 이상의 레이아웃을 다른 레이아웃 안에 중첩할 수 있지만 레이아웃 계층 구조를 가능한 한 얕게 유지하도록 애써야 합니다. 

중첩된 레이아웃이 적을수록 레이아웃이 더 빠르게 그려집니다(가로로 넓은 뷰 계층 구조가 세로로 깊은 뷰 계층 구조보다 낫습니다).
한 화면 안에 두 개 이상의 레이아웃을 사용하는 것은 경우에 따라 장단점이 있습니다. 아래에는 여러 레이아웃을 사용하는 경우의 잠재적인 단점을 설명합니다:

• 복잡성 증가: 여러 레이아웃을 한 화면에 포함하면 레이아웃 구조가 복잡해질 수 있습니다. 이로 인해 레이아웃 디자인 및 유지 보수가 어려워질 수 있습니다.
• 레이아웃 계층 깊이: 여러 레이아웃을 중첩하면 레이아웃 계층의 깊이가 증가할 수 있습니다. 이는 렌더링 및 성능에 영향을 미칠 수 있으며, 깊은 계층 구조는 레이아웃 계산 및 렌더링 시간을 증가시킬 수 있습니다.
• 자원 소모: 각 레이아웃은 메모리와 CPU 자원을 사용하므로 여러 개의 레이아웃을 사용하면 더 많은 자원이 필요할 수 있습니다.

참고자료

 

https://novlog.tistory.com/entry/Android-2-%EB%B7%B0%EC%9D%98-%EC%98%81%EC%97%ADBox-Margin%EB%A7%88%EC%A7%84-Padding%ED%8C%A8%EB%94%A9

[Android] #2 뷰의 영역(Box) - Margin(마진) & Padding(패딩)

뷰의 배치시 알아야 할, 마진과 패딩 정리

https://luvris2.tistory.com/255

Android Studio - UI 디자인 - 자주 쓰는 속성(Attributes) 설명

안드로이드 스튜디오 자주 쓰이는 attribute


https://developer.android.com/training/basics/firstapp/building-ui?hl=ko

간단한 사용자 인터페이스 빌드  |  Android 개발자  |  Android Developers

간단한 사용자 인터페이스 빌드

 

https://developer.android.com/studio/write/layout-editor?hl=ko

Layout Editor로 UI 빌드  |  Android 개발자  |  Android Developers

Layout Editor로 UI 빌드