레이아웃(Layout) 정리

레이아웃(Layout)

레이아웃이란 앱에서 사용자 인터페이스를 위한 구조를 말한다. 레이아웃의 모든 요소는 View와 ViewGroup 객체의 계층 구조를 사용하여 빌드된다. View는 사용자가 보고 상호작용할 수 있는 것을 말하며, ViewGroup은 View 및 ViewGroup 객체의 레이아웃 구조를 정의하는 보이지 않는 컨테이너이다.

View 객체는 일반적으로 '위젯'이라 하며, Button 또는 TextView를 예로 들 수 있다.
ViewGroup 객체는 일반적으로 '레이아웃'이라 하며, LinearLayout 또는 ConstraintLayout과 같은 다양한 레이아웃을 예로 들 수 있다.

 

레이아웃을 선언하는 방법은 두 가지이다.

1. UI 요소를 XML로 선언

2. 런타임에 레이아웃 요소 인스턴스화

---

1. XML 쓰기

 

Android의 XML 어휘를 사용하면 UI 레이아웃과 그 안의 화면 요소를 신속하게 디자인할 수 있다.

- 각 레이아웃 파일에는 반드시 딱 하나의 루트 요소만 있어야 하며, 이는 View 또는 ViewGroup 객체여야 한다.

- 다양한 레이아웃 객체 또는 위젯을 루트 요소의 하위 요소로 추가하여 계층적으로 레이아웃을 정의할 수 있다.

 

2. XML 리소스 로드

 

앱을 컴파일하면 각 XML 레이아웃 파일이 View 리소스 안에 컴파일된다.

Activity.onCreate() 콜백 메소드 내에서 setContentView()를 호출해 레이아웃 리소스를 로드해야 한다.

예를 들어 XML 레이아웃이 main_layout.xml이라면 다음과 같이 작성하면 된다.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main_layout);
}

* onCreate() 콜백 메소드는 해당 액티비티의 활동이 시작될 때 Android 프레임워크에 의해 호출된다.

 

3. 속성

 

모든 View와 ViewGroup 객체는 고유한 여러 가지 XML 속성을 지원한다. 종류는 크게 3가지로 나눌 수 있다.

- View 객체에만 적용되는 속성

   TextView의 textSize 속성을 예로 들 수 있으며, 이 속성은 이 클래스를 확장할 수 있는 View 객체에 의해 상속받은 것이다.

 

- 루트 View 클래스로부터 상속되는 속성

   루트 요소로부터 상속되는 대표적인 속성은 id가 있으며 모든 View 객체에 공통적으로 적용된다.

 

- 기타 속성

   '레이아웃 매개변수'로 간주되며 이 매개변수는 View 객체의 특정 레이아웃 방향을 설명하는 속성으로,

   이 객체의 상위 ViewGroup 객체가 정의한다.

 

4. ID

 

View 객체는 트리 내에서 뷰를 고유하게 식별할 수 있는 정수 ID가 연결될 수 있다. 앱을 컴파일할 때 ID는 정수로 참조되지만, 일반적으로 레이아웃 XML 파일의 id 속성에서 문자열로 할당된다. XML 태그 내 ID 구문은 다음과 같다.

// XML 태그 내 ID 구문
android:id="@+id/my_button"

// Android 리소스 ID를 참조할 때에는 android 패키지 네임스페이스 추가
android:id="@android:id/empty"

android 패키지 네임 스페이스가 들어가면 이제 로컬 리소스 클래스가 아닌 android.R 리소스 클래스에서 ID를 참조하게 된다.

 

뷰를 생성하고 이릉 앱에서 참조하는 데 쓰이는 일반적인 패턴은 다음과 같다.

 

   1. 레이아웃 파일에서 뷰/위젯을 정의한 후 고유 ID를 할당한다.

   2. 뷰 객체 인스턴스를 생성하고 이를 레이아웃에서 캡처한다.

 

* ID는 트리 전체를 통틀어 고유할 필요는 없지만, 트리에서 검색하고 있는 부분 내에서는 고유해야 한다.

 

5. 레이아웃 매개변수

 

위 속성 파트에서 언급한 그 레이아웃 매개변수이다.

layout_something이라는 이름의 레이아웃 속성이 View가 존재하는 상위 ViewGroup에 적절한 레이아웃 매개변수를 정의한다.

하위 뷰의 크기와 위치를 상위 ViewGroup에 적절한 방식으로 정의하는 속성 유형이 들어있다.

즉, 상위 뷰 그룹이 각 하위 뷰의 레이아웃 매개변수를 정의한다(하위 뷰그룹 포함).

 

모든 뷰 그룹에는 너비와 높이가 포함되며(layout_height, layout_width), 각 뷰는 이를 정의해야 한다.

너비와 높이는 정확한 치수를 지정할 수 있으나 화면 크기에 따른 유연한 화면 구성이 불가능하므로 이런 방식은 지양하는 것이 좋다.

그보다는 다음과 같은 상수를 이용해 설정하는 경우가 많다.

 

   - wrap_content : 콘텐츠의 크기에 맞게 알아서 크기를 조절한다.

   - match_parent : 상위 뷰 그룹의 크기에 맞춰 최대한 커지도록 조절한다.

 

* 일반적으로 픽셀과 같이 절대적인 단위를 사용하여 레이아웃 크기를 지정하는 것은 권장하지 않는다.

밀도 독립형 픽셀 단위(dp)나 위의 두 상수와 같은 상대적인 측정값을 사용하는 것이 좋다. 이렇게 하면 앱을 다양한 크기의 화면에서 적절하게 표시할 수 있다. 

 

6. 레이아웃 위치

 

뷰의 도형은 직사각형으로 뷰에는 위치가 있으며 여러 메소드를 통해 위치를 검색할 수 있다. 위치와 치수의 단위는 픽셀이다.

   - getLeft() : 직사각형의 왼쪽, 즉 X좌표를 반환한다.
   - getTop() : 직사각형의 상단, 즉 Y 좌표를 반환한다.
   - getRight() : 직사각형의 오른쪽 좌표를 반환한다.
   - getBottom() : 직사각형의 하단 가장자리 좌표를 반환한다.

 

위 메소드들은 뷰의 상위 요소에 상대적인 뷰의 위치를 반환한다는 점을 유의해야 한다.

 

7. 크기, 패딩 및 여백

 

뷰의 크기는 너비와 높이로 표현되는데 사실 하나의 뷰는 두 쌍의 너비 및 높이값을 소유한다.

 

   1. 측정된 너비 및 측정된 높이 : 이 치수는 상위 요소 내에서 원하는 뷰 크기를 정의한다.

       => getMeasuredWidth() 및 getMeasuredHeight() 호출

   2. 너비 및 높이 : 뷰가 화면에 표시되는 실제 크기를 정의한다.

       => getWidth() 및 getHeight() 호출

 

너비 및 높이 외에도 패딩(padding)과 여백(margin)을 지정할 수 있다.

패딩은 뷰 자체에서 정의할 수 있지만 여백은 지원하지 않는다. 다만 뷰 그룹이 그와 같은 지원을 제공하고 있다. 

 

8. 일반 레이아웃

 

Android 플랫폼에서 기본으로 제공하는 일반적인 레이아웃 유형은 다음과 같다.

 

   1) 선형 레이아웃(LinearLayout)

        - 여러 하위 요소를 하나의 가로 또는 세로 방향행으로 정리하는 레이아웃

        - 창의 길이가 화면 길이를 웃도는 경우 스크롤바를 생성한다.

 

   2) 상대적 레이아웃(RelativeLayout)

        - 여러 하위 객체의 위치를 서로 상대적으로 나타내거나 상위 요소와 상태적으로 나타낼 수 있도록 한다.

 

   3) 웹 보기

 

9. 어댑터로 레이아웃 빌드

 

레이아웃의 콘텐츠가 동적이거나 미리 정의되지 않은 경우, AdpaterView의 서브클래스가 되는 레이아웃을 사용하여 런타임에 뷰를 레이아웃으로 채울 수 있다. 

 

AdapterView 클래스의 서브 클래스는 Adapter를 사용하여 자신의 레이아웃에 데이터를 바인딩한다.

Adapter가 데이터와 레이아웃(AdapterView) 사이의 중개자 역할을 하며, Adapter가 데이터를 검색하면 각 항목을 뷰로 변환하여 레이웃에 추가될 수 있도록 한다. 어댑터로 지원되는 레이아웃으로는 리스트뷰(ListView), 그리드뷰(GridView) 등이 있다.

 

* 안드로이드에서 제공하는 어댑터를 사용하지 않는 경우, 필요한 어댑터 클래스를 확장해 getView()를 재정의하여 원하는 뷰 유형을 반환해 사용할 수 있다.

* 앱 수명이 남아있는 동안 어댑터가 읽는 기본 데이터를 변경하는 경우, notifyDataSetChanged()를 호출해 연결된 뷰의 데이터가 변경되었으며 새로고침 해야 함을 알린다.

* 어댑터 뷰에 있는 각 아이템에 클릭 이벤트를 적용하려면 AdapterView.OnItemClickListener 인터페이스를 구현하면 된다.

 

10. 자주 사용하는 레이아웃 총 정리

 

레이아웃마다 성질이 달라 구상한 것에 맞게 구현하려면 레이아웃의 성질을 파악해야 한다.

자주 사용하는 레이아웃들에 대해 모아 정리해 보았다.

 

1) LinearLayout(선형 레이아웃)

     - 뷰의 위치를 지정하지 않아도 중첩되지 않고 자동으로 나열된다.

 

2) RelativeLayout(상대적 레이아웃)

     - 뷰를 특정 뷰나 부모의 위치에 맞게 배치할 수 있다.

 

3) TableLayout(테이블 레이아웃)

     - 뷰를 표처럼 배치할 수 있으며 표의 크기와 모양, 테두리 색 변경이 가능하다.

 

4) FrameLayout(프레임 레이아웃)

     - 뷰들을 액자처럼 배치할 수 있다. 

 

5) DrawerLayout(드로어 레이아웃)

     - 뷰들을 서랍에서 꺼내듯 배치할 수 있다. 메뉴나 프로필 정보를 표시할 때 많이 사용한다.

 

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

     - 뷰의 위치를 강제(Constraint)적으로 지정해줘야 하며, 따라서 뷰 마다 위치를 세세하게 배치할 수 있다.

     - ConstraintLayout은 뷰들을 세세하게 원하는 대로 배치할 수 있는 만큼 손이 더 많이 간다.

     - 안드로이드 스튜디오에서 빈 액티비티를 생성하면 자동으로 생성되는 레이아웃이 ConstraintLayout이다.

 

* 여러 레이아웃을 한 XML 파일에 섞어 사용할 수도 있다.

 

 

Reference

https://developer.android.com/guide/components/activities?hl=ko#Lifecycle 

활동  |  Android 개발자  |  Android Developers

https://developer.android.com/guide/topics/resources/layout-resource?hl=ko 

레이아웃 리소스  |  Android 개발자  |  Android Developers