Computer >> 컴퓨터 >  >> 체계 >> Android

많은 Android 레이아웃을 이해하는 방법

선형, 상대, 제약, 테이블, 프레임 등. Android 애플리케이션에는 애플리케이션을 디자인할 때 선택할 수 있는 다양한 레이아웃이 있습니다. 문제는 어느 것이 최고입니까?

다양한 레이아웃에 대해 자세히 설명하기 전에 먼저 보기 개체 계층 구조와 Android의 그리기 프로세스를 살펴보겠습니다.

보기 및 보기 그룹

ViewGroup을 모든 보기의 상위 클래스이자 레이아웃의 기본 클래스로 생각하십시오. 다른 보기의 컨테이너인 개체를 나타냅니다. 예를 들어, LinearLayout ViewGroup 입니다. 뷰 및 기타 레이아웃도 포함할 수 있기 때문입니다.

반면 보기는 UI 요소의 기본 빌딩 블록입니다. 보기는 ViewGroup의 일부일 수 있습니다. 예를 들어, TextView 보기입니다. .

많은 Android 레이아웃을 이해하는 방법
ViewGroup과 View의 계층

측정 -> 레이아웃 -> 그리기 -> 반복

레이아웃은 Android에서 XML 파일로 저장됩니다. 그러나 그것들은 우리가 화면에서 보는 객체로 어떻게 변환됩니까? 각 XML 파일은 인스턴스화되고(읽기:확장됨) 뷰 계층 트리가 형성됩니다. 즉, 레이아웃 A 내부에 중첩된 레이아웃 B가 있는 경우 하위 - 상위 관계가 있습니다(레이아웃 A는 레이아웃 B의 상위임). 트리가 형성되면 측정, 레이아웃 및 그리기의 3단계가 수행됩니다. 이러한 각 단계는 깊이 우선 검색 순서로 트리를 탐색합니다.

측정

첫 번째 단계에서 각 상위 노드는 크기와 관련하여 하위 노드가 갖는 특정 제약 조건을 파악합니다. 이러한 제한 사항을 자식에게 전달합니다. 여기서 각 어린이는 자신의 크기(얼마나 크고 싶은지)를 평가하고 주어진 제한 사항과 자식의 제한 사항을 고려합니다.

레이아웃

여기에서 각 노드는 화면에서 각 자식의 최종 크기와 위치를 결정합니다.

그리기

자신을 그리는 루트 노드에서 시작하여 자식에게 스스로를 그리라고 지시합니다. 이런 식으로 부모가 그려지고 자식이 그 위에 그려집니다.

위의 프로세스를 염두에 두고 애플리케이션의 레이아웃을 가능한 한 얕게 유지하여 뷰 계층 구조를 탐색하는 데 걸리는 시간을 줄여야 합니다.
많은 Android 레이아웃을 이해하는 방법
Unsplash에 대한 Markus Spiske의 "다양한 색상의 포토 프레임 로트"

레이아웃 분석

선형

세로 또는 가로 방향으로 자식을 한 행으로 구성합니다. 즉, 보기는 모두 한 행 또는 한 열에 있습니다. android:orientation을 사용하여 방향을 지정할 수 있습니다. 속성.

선형 레이아웃의 흥미로운 기능 중 하나는 layout_weight입니다. 기인하다. 이것은 Linear Layout에 자식 뷰 사이의 공간을 분할하는 방법을 알려주는 데 사용됩니다. 장치 및 방향 간에 레이아웃을 일관되게 유지하려는 경우에 유용합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        />

</LinearLayout>
간단한 선형 레이아웃

Hello, 라는 단어가 포함된 첫 번째 TextView를 원한다고 가정해 보겠습니다. 항상 화면 너비의 3/4을 차지합니다. 이를 위해 layout_weight 속성을 사용할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="4"        // <-- We added a total weight for our layout (4)
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="3"   // <-- Will have a weight of 3 out of 4 (3/4)
        android:text="Hello" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:layout_weight="1"   // <-- Will have a weight of 1 out of 4 (1/4)
        />

</LinearLayout>
레이아웃_무게

친척

이름에서 알 수 있듯이 이 레이아웃은 내부 자식 보기를 상대적 위치에 설정합니다. 이렇게 하면 중첩된 보기 그룹 없이 레이아웃 계층을 평평하게 유지할 수 있습니다. 그러나 동시에 각 상대 레이아웃은 성능에 영향을 줄 수 있는 두 번의 측정 단계를 거쳐야 합니다.

RelativeLayout의 유용한 기능 중 하나는 centerInParent 를 사용하여 하위 보기를 중앙에 배치하는 기능입니다. 속성.

많은 Android 레이아웃을 이해하는 방법
layout_centerInParent가 TextView를 중앙에 배치합니다.

제약조건

제약조건 구속조건이 연결된 요소에 대한 연결 또는 정렬입니다. 존재하는 다른 보기와 관련하여 모든 하위 보기에 대해 다양한 제약 조건을 정의합니다. 이를 통해 평면 보기 계층 구조(중첩된 ViewGroup 없음)로 복잡한 레이아웃을 구성할 수 있습니다. RelativeLayout과 유사하게 이 레이아웃에도 두 개의 측정 패스가 필요합니다.

많은 Android 레이아웃을 이해하는 방법
TextView의 제약 조건 확인

프레임

이 레이아웃은 단일 자식 보기를 유지하는 데만 사용되므로 레이아웃의 다른 보기를 차단합니다. 레이아웃 자체는 가장 큰 자식 보기(표시 여부)와 약간의 패딩만큼 커집니다.

자식 뷰가 서로 겹치는 것을 피하기 어렵기 때문에 FrameLayout 안에 여러 자식 뷰를 갖는 것을 피하세요. layout_gravity를 할당하여 이러한 하위 보기의 위치를 ​​제어할 수 있습니다. 각 어린이에게 속성을 부여합니다.

많은 Android 레이아웃을 이해하는 방법

목록 보기/격자 보기

레스토랑 메뉴와 같이 화면에 여러 항목을 표시해야 할 때 사용합니다. 목록 보기는 사용자가 스크롤할 수 있는 단일 열 목록입니다. 그리드 보기는 두 개 이상의 열이 있는 목록 보기로 생각할 수 있습니다.

이러한 레이아웃에 대해 알아야 할 중요한 사항은 보기가 동적이며 런타임에 생성된다는 것입니다. 런타임에 항목을 채우려면 AdapterView를 사용해야 합니다.

많은 Android 레이아웃을 이해하는 방법
layout_column 및 layout_row를 사용하여 레이아웃에서 각 항목의 위치를 ​​지정할 수 있습니다.

테이블 레이아웃

그리드 보기와 매우 유사한 이 레이아웃은 자식을 행과 열로 정렬합니다. 각 레이아웃에는 각각 행을 정의하는 여러 TableRow 개체가 포함됩니다.

많은 Android 레이아웃을 이해하는 방법
TableRow 요소가 두 개 있습니다.

가장 적합한 레이아웃을 찾을 때까지 다른 레이아웃을 시도하는 것을 두려워하지 마십시오. 귀하에게 가장 유용한 레이아웃과 그 이유를 아래 의견에 자유롭게 알려주십시오.