[안드로이드 코틀린] 6. 레이아웃(3) - 그리드 레이아웃/컨스트레인트 레이아웃(체이닝, 가이드라인)/+ 안드로이드 스튜디오 활용하기(자동저장, 코드자동완성, 디버깅)

레이아웃

 

그리드 레이아웃(GridLayout)

- 격자(grid) 내부의 셀에 자식 뷰를 배치하는 뷰 그룹

- 테이블 레이아웃과 비슷하지만, 각각의 자식 뷰가 자신의 위치와 차지하는 셀의 개수를 독립적으로 지정 가능

 

<GridLayout> 자체에 자주 사용되는 속성

- rowCount: 행의 수

- columnCount: 열의 수 

- orientation: 그리드를 수평 방향으로 우선할 것인지, 수직 방향으로 우선할 것인지를 결정 

 

그리드 레이아웃 안에 포함된 위젯에 설정하는 속성

- layout_row: 자신이 위치할 행 번호(0번부터 시작)

- layout_column: 자신이 위치할 열 번호(0번부터 시작)

- layout_rowSpan: 행을 지정된 수만큼 확장함

- layout_columnSpan: 열을 지정된 수만큼 확장함

- layout_ gravity: 주로 fill, fill_vertical, fill_horizontal 등으로 지정

    - layout_rowSpan이나 layout_ columnSpan으로 행 또는 열이 확장되었을 때 위젯을 확장된 셀에 꽉 채우는 효과를 냄

 

 

---

프레임 레이아웃(FrameLayout)

- 레이아웃 안의 위젯을 왼쪽 상단부터 겹쳐서 출력함 

 

프레임레이아웃의 속성 

- foreground: 프레임레이아웃의 전경 이미지를 지정함 

- foregroundGravity: 전경 이미지의 위치를 지정함 

    - fill, right, left, top, bottom 등의 값을 사용함

 

---

컨스트레인트 레이아웃(ConstraintLayout)

- 안드로이드 기본 레이아웃

- 화면에 배치되는 위젯들 사이에 간단한 제약조건 설정만으로 화면을 구성함

- 상대 위치 지정

    - 주어진 위젯을 다른 위젯에 상대적으로 배치함

 

 

---

기본화면 - 레이아웃 에디터

팔레트 창

- 팔레트 창은 레이아웃을 디자인할 때 필요한 여러 뷰를 제공함

 

컴포넌트 트리 창

- 컴포넌트 트리창에서 레이아웃의 전체 구조를 한눈에 볼 수 있음

    - ConstraintLayout에 TextView가 배치된 것을 알 수 있음

 

UI 편집(디자인) 창

- UI 편집창은 뷰를 배치하여 레이아웃을 작성하는 화면임

- 상단 툴바의 가장 왼쪽에 있는 보기 모드를 변환하는 아이콘(파란 레이어 아이콘)을 클릭하면 Design, Blueprint, Design + Blueprint 세 모드를 선택할 수 있음

- Design 모드는 디자인을 위주로 표시하고, Blueprint 모드는 제약을 위주로 표시함

+) 현재 사용 버전의 모습

 

---

액티비티(Activity)

- 화면을 구성하는 가장 기본적인 컴포넌트

- 앱을 실행시 보여지는 화면을 구성할 수 있도록 해주는 안드로이드 구성 요소 중 하나

- 앱은 한 개 또는 여러 개의 액티비티로 구성

 

액티비티 클래스

- 액티비티는 안드로이드의 Activity 클래스를 상속한 클래스를 의미

- Activity, FragmentActivity, AppCompatActivity 등의 다양한 액티비티 클래스 중에서 현재는 하위 호환성을 위해 AppCompatActivity를 사용

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

 

---

컨스트레인트 레이아웃

체이닝(Chaining)

- 컨스트레인트로 연결된 위젯끼리 서로의 위치값을 공유하여 상대적인 값으로 크기와 위치를 결정하도록함

 

체인으로 4개의 버튼 연결 → 화면을 돌려도 상대적으로 일정한 크기와 위치를 가짐 

 

가이드라인(GuideLine)

- 컨스트레인트 레이아웃에만 사용할 수 있는 보조 도구

- 가로세로 가이드라인을 화면 임의의 위치에 드래그하면 레이아웃에 배치되는 위젯에 가상의 앵커 포인트를 제공

 

---

안드로이드 스튜디오 활용하기

자동 저장(Auto Save)

- 작성한 소스 코드는 실시간으로 저장되기에 따로 저장할 필요가 없음

- 자동 저장 옵션은 메인 메뉴의 [File] – [Settings]를 선택하면 나타나는 세팅 창의 [System Settings]에서 선택 또는 해제

 

코드 자동 완성(Code Completion)

- 소스 코드를 작성할 경우 모든 코드를 작성하지 않아도 됨

- 앞자리 몇 글자만 입력하면 해당 글자가 포함된 코드를 나열해주는 코드 자동 완성 기능

- 예) ‘layout’까지 입력하면 ‘layout’이 포함된 이름이 나열되는데 마우스 스크롤을 위아래로 움직여 필요한 이름을 선택하면 됨

- 찾고자 하는 이름이 가장 위에 표시된다면 그냥 Enter 키를 눌러 입력

 

디버깅(Debugging)

- 에뮬레이터가 실행된 상태에서 편집기 창 좌측에 있는 숫자 옆을 클릭하여 중단점(Breakpoint)을 찍으면 해당 라인부터 소스 코드를 분석

- 중단점을 사용해서 앱을 디버깅하려면 중단점을 찍은 후 툴바의 [실행 아이콘]이 아닌 [디버그 아이콘]을 클릭해서 앱을 실행 

- 디버거로 앱이 실행되면 화면 하단의 [Debug] 탭에서 현시점의 앱 상태와 변수에 저장된 값을 확인