뷰의 레이아웃

Compose 방식 사용해 보기
Jetpack Compose는 Android에 권장되는 UI 도구 키트입니다. Compose에서 레이아웃을 사용하는 방법을 알아보세요.
<ph type="x-smartling-placeholder"></ph> Compose 레이아웃 기본사항 알아보기 → 를 통해 개인정보처리방침을 정의할 수 있습니다.

레이아웃은 다음과 같이 앱에서 사용자 인터페이스의 구조를 정의합니다. - Activity를 시작할 수 있습니다. 이 빌드되는 것은 View 및 ViewGroup 객체입니다. View는 일반적으로 사용자가 볼 수 있는 것을 그립니다. 있습니다. ViewGroup는 보이지 않는 컨테이너로, 컨테이너는 View 및 기타 ViewGroup의 레이아웃 구조 객체의 현재 상태를 나타냅니다.

그림 1. 뷰를 정의하는 뷰 계층 구조 삽화 UI 레이아웃.

View 객체는 종종 위젯이라고 하며 다음 중 하나일 수 있습니다. 많은 서브클래스(예: Button 또는 TextView입니다. 이 ViewGroup 객체는 일반적으로 레이아웃이라고 하며 다음 중 하나일 수 있습니다. 예: 다양한 레이아웃 구조를 제공하는 LinearLayout 또는 ConstraintLayout입니다.

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

  • UI 요소를 XML로 선언합니다. Android는 간단한 XML을 제공합니다. View 클래스 및 서브클래스에 해당하는 어휘 할 수 있습니다. 또한 Android 스튜디오의 Layout Editor: XML 빌드 드래그 앤 드롭 인터페이스를 사용하여 레이아웃을 제공할 수도 있습니다.

  • 런타임에 레이아웃 요소를 인스턴스화합니다. 앱에서 만들 수 있는 View 및 ViewGroup 객체를 사용하고 이러한 객체를 조작합니다. 속성을 프로그래매틱 방식으로 사용할 수 있습니다.

XML에서 UI를 선언하면 동작을 제어하는 코드가 생성됩니다. 또한 XML 파일을 사용하면 다양한 화면 크기와 방향에 대해 다른 레이아웃을 제공할 수 있습니다. 이것은 자세한 내용은 다양한 화면 지원 크기를 참조하세요.

Android 프레임워크는 다음 중 하나 또는 둘 다 사용할 수 있는 유연성을 제공합니다. 이러한 메서드를 사용하여 앱의 UI를 빌드할 수 있습니다. 예를 들어 앱의 기본 레이아웃을 만든 다음 런타임에 레이아웃을 수정할 수 있습니다.

<ph type="x-smartling-placeholder">

XML 쓰기

Android의 XML 어휘를 사용하면 UI 레이아웃과 HTML에서 웹페이지를 만드는 것과 동일한 방식으로 화면에 있는 요소를 표시할 수 있습니다. 일련의 중첩된 요소가 있습니다.

각 레이아웃 파일은 정확히 하나의 루트 요소를 포함해야 하며, 이 요소는 View 또는 ViewGroup 객체 루트를 정의한 후 추가 레이아웃 객체나 위젯을 하위 요소로 추가하여 레이아웃을 정의하는 View 계층 구조를 점진적으로 빌드합니다. 대상 다음은 세로 LinearLayout를 사용하여 TextView와 Button를 보유합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

레이아웃을 XML로 선언한 후 Android 프로젝트의 res/layout/에 있는 .xml 확장 프로그램 그러면 제대로 컴파일됩니다

레이아웃 XML 파일의 구문에 대한 자세한 내용은 다음을 참조하세요. 레이아웃 리소스.

XML 리소스 로드

앱을 컴파일하는 경우, 각 XML 레이아웃 파일이 View 리소스 안에 컴파일됩니다. 앱의 Activity.onCreate() 콜백 구현을 제공합니다. 이렇게 하려면 setContentView(), 다음과 같은 형식으로 레이아웃 리소스에 참조를 전달합니다. R.layout.layout_file_name입니다. 예를 들어 XML이 main_layout.xml로 저장되어 있다면 다음 코드를 위해 로드합니다. Activity:

Kotlin

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

자바

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

Android 프레임워크는 다음에서 onCreate() 콜백 메서드를 호출합니다. Activity가 시작될 때 Activity 자세한 내용은 자세한 내용은 소개 활동을 참조하세요.

속성

모든 View 및 ViewGroup 객체는 자체 다양한 XML 속성이 있습니다. 일부 속성은 View와 관련이 있습니다. 객체를 지정합니다. 예를 들어 TextView는 textSize를 지원합니다. 속성의 값을 제공합니다. 하지만 이러한 속성은 View로도 상속됩니다. 객체를 정의합니다. 일부는 View 모두에 공통적으로 적용됩니다. 객체에 대한 기본 객체가 포함됩니다. 이는 다음과 같이 루트 View 클래스에서 상속되기 때문입니다. id 속성 다른 속성은 레이아웃으로 간주됨 매개변수(특정 레이아웃 방향을 설명하는 속성) 해당 객체의 상위 요소에 정의된 대로 View 객체의 하위 클래스 ViewGroup 객체.

ID

모든 View 객체는 트리 내에서 View를 고유하게 식별합니다. 앱이 컴파일된 경우 이 ID는 정수로 참조되지만 일반적으로 ID는 id 속성의 문자열로 레이아웃 XML 파일에 포함됩니다. 이것은 모든 View 객체에 공통으로 적용되는 XML 속성이며 View 클래스. 매우 자주 사용합니다. 구문 내부의 ID에 대한 구문은 XML 태그는 다음과 같습니다.

android:id="@+id/my_button"

문자열 시작 부분에 있는 at 기호 (@)는 XML 파서는 ID 문자열의 나머지를 파싱 및 확장하고 이를 생성할 수 있습니다 더하기 기호 (+)는 새 리소스 이름임을 의미합니다. 를 생성하여 R.java의 리소스에 추가해야 합니다. 파일에서 참조됩니다.

Android 프레임워크는 다른 여러 ID 리소스를 제공합니다. 인코더-디코더 아키텍처를 Android 리소스 ID이므로 더하기 기호는 필요하지 않지만 android 패키지 네임스페이스를 다음과 같이 정리합니다.

android:id="@android:id/empty"

android 패키지 네임스페이스는 다음을 참조하고 있음을 나타냅니다. 로컬 클래스 대신 android.R 리소스 클래스의 ID 리소스 클래스를 통해 학습합니다

뷰를 만들고 앱에서 이를 참조하려면 패턴은 다음과 같습니다.

  1. 레이아웃 파일에서 뷰를 정의하고 다음 예를 참고하세요. 
    <Button android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>
  2. 뷰 객체의 인스턴스를 만들어 레이아웃에서 캡처합니다. 일반적으로 onCreate() 메서드를 사용할 수 있습니다.

    Kotlin

    val myButton: Button = findViewById(R.id.my_button)

    자바

    Button myButton = (Button) findViewById(R.id.my_button);

뷰 객체의 ID를 정의하는 것은 RelativeLayout 상대 레이아웃에서 동위 뷰는 다른 뷰와 관련된 레이아웃을 정의할 수 있음 동위 뷰와 같으며, 이는 고유 ID로 참조됩니다.

ID는 트리 전체에서 고유할 필요는 없지만 다음과 같아야 합니다. 검색한 부분 내에서 고유해야 합니다. 종종 전체 가능한 경우 고유하게 만드는 것이 좋습니다.

레이아웃 매개변수

layout_something이라는 XML 레이아웃 속성은 다음에 적합한 View의 레이아웃 매개변수를 상주하는 ViewGroup입니다.

모든 ViewGroup 클래스는 중첩 클래스를 구현합니다. ViewGroup.LayoutParams입니다. 이 서브클래스에는 각 객체의 크기와 위치를 정의하는 속성 유형이 포함되어 있습니다. 하위 뷰를 뷰 그룹에 적절하게 할당합니다. 그림 2와 같이 상위 요소는 뷰 그룹은 하위 뷰를 포함한 각 하위 뷰의 레이아웃 매개변수를 정의함 뷰 그룹

그림 2. 레이아웃을 사용한 뷰 계층 구조 시각화 각 뷰와 연결된 매개변수입니다.

모든 LayoutParams 서브클래스에는 설정을 위한 자체 문법이 있습니다. 값으로 사용됩니다. 각 하위 요소는 다음과 같은 LayoutParams를 정의해야 합니다. 서로 다른 포드를 정의할 수도 있지만 자체 하위 요소의 경우 LayoutParams

모든 뷰 그룹에는 layout_width를 사용하여 너비와 높이가 포함됩니다. 및 layout_height를 정의하고 각 뷰는 이들을 정의해야 합니다. 여러 항목 LayoutParams에는 선택적으로 여백과 테두리가 포함됩니다.

너비와 높이는 정확한 치수로 지정할 수 있지만 자주 하는 것이 좋습니다. 이런 상수 중 하나를 사용하여 너비 또는 높이:

  • wrap_content: 뷰에 자동으로 크기를 조절하도록 지시합니다. 필요한 크기일 수 있습니다.
  • match_parent: 뷰에 상위 요소만큼 커지도록 지시합니다. 뷰 그룹이 허용합니다.

일반적으로 다음과 같이 레이아웃의 너비와 높이를 지정하지 않는 것이 좋습니다. 절대적인 단위를 사용하지 않습니다. 더 나은 접근 방식은 상대적 측정값을 사용하는 것입니다. 밀도 독립형 픽셀 단위 (dp), wrap_content 또는 match_parent: 앱이 여러 플랫폼에서 올바르게 표시되는 데 다양한 기기 화면 크기를 지원합니다. 허용되는 측정 유형은 레이아웃 리소스.

레이아웃 위치

뷰에는 직사각형 도형이 있습니다. 한 쌍으로 표현된 위치가 있고 왼쪽 및 상단 좌표, 두 차원으로, 지정할 수 있습니다. 위치와 치수의 단위는 픽셀입니다.

메서드를 호출하여 뷰의 위치를 가져올 수 있습니다. getLeft() 및 getTop()입니다. 전자는 선을 나타내는 직사각형의 왼쪽 (x) 좌표를 반환합니다. 볼 수 있습니다. 후자는 직사각형의 상단 (y) 좌표를 반환합니다. 뷰를 나타냅니다. 이러한 메서드는 kube-APIserver입니다 예를 들어 getLeft()가 20을 반환하면 20픽셀 오른쪽에 있는 뷰는 왼쪽에 있는 있습니다.

또한 불필요한 계산을 피할 수 있는 편리한 메서드가 있습니다. 즉, getRight() 및 getBottom()입니다. 이 메서드는 뷰를 나타내는 직사각형입니다. 예를 들어 getRight()를 호출하는 것은 다음과 같습니다. 이는 getLeft() + getWidth()의 계산과 유사합니다.

크기, 패딩, 여백

뷰의 크기는 너비와 높이로 표현됩니다. 하나의 뷰에 두 쌍이 있는 지정할 수 있습니다.

첫 번째 쌍을 측정된 너비라고 하며 측정된 높이입니다. 이러한 치수는 뷰의 크기를 정의합니다. 를 포함해야 합니다. 다음을 호출하여 측정된 크기를 가져올 수 있습니다. getMeasuredWidth() 및 getMeasuredHeight()입니다.

두 번째 쌍은 너비 및 높이라고 하며, 그림 너비 및 그리기 높이 이러한 측정기준은 그리기 시간 및 레이아웃 후 화면에 표시되는 뷰의 실제 크기입니다. 이러한 값은 측정된 너비 및 높이와 다를 수 있지만 반드시 되는 것은 아닙니다. 나 를 호출하여 너비와 높이를 가져올 수 있습니다. getWidth() 및 getHeight()입니다.

뷰의 치수를 측정하기 위해 뷰는 자신의 패딩을 감안합니다. 패딩 뷰의 왼쪽, 상단, 오른쪽 및 하단 부분에 대해 픽셀로 표시됩니다. 패딩을 사용하여 뷰의 콘텐츠를 특정 수만큼 오프셋할 수 있습니다. 픽셀 예를 들어 왼쪽 패딩이 2이면 뷰의 콘텐츠를 2픽셀 푸시합니다. 드래그 앤 드롭하면 됩니다. 패딩을 설정할 수 있습니다. setPadding(int, int, int, int) 메서드를 호출하고 다음을 호출하여 쿼리합니다. getPaddingLeft(), getPaddingTop(), getPaddingRight(), 및 getPaddingBottom()입니다.

뷰는 패딩을 정의할 수 있지만 여백은 지원하지 않습니다. 하지만 뷰 그룹은 여백을 지원합니다. 자세한 내용은 ViewGroup 및 ViewGroup.MarginLayoutParams 를 참조하세요.

측정기준에 대한 자세한 내용은 다음을 참고하세요. 크기.

프로그래밍 방식으로 여백 및 패딩을 설정하는 것 외에 다음과 같이 설정할 수도 있습니다. 를 XML 레이아웃에 넣어야 합니다.

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >
      <TextView android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:padding="8dp"
                android:text="Hello, I am a TextView" />
      <Button android:id="@+id/button"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"
              android:paddingBottom="4dp"
              android:paddingEnd="8dp"
              android:paddingStart="8dp"
              android:paddingTop="4dp"
              android:text="Hello, I am a Button" />
  </LinearLayout>

앞의 예는 여백과 패딩이 적용되는 것을 보여줍니다. 이 TextView에 전체적으로 균일한 여백과 패딩이 적용됩니다. Button은(는) 다양한 애플리케이션에 독립적으로 적용할 수 있는 방법을 보여줍니다. 합니다.

<ph type="x-smartling-placeholder">

일반 레이아웃

ViewGroup 클래스의 각 서브클래스는 다음과 같은 고유한 방법을 제공합니다. 그 안에 중첩된 뷰를 표시합니다. 가장 유연한 레이아웃 유형 중 하나는 레이아웃 계층 구조를 얕게 유지하는 데 가장 적합한 도구를 제공하는 것이 ConstraintLayout

다음은 Android에 내장된 몇 가지 일반적인 레이아웃 유형입니다. 있습니다.

<ph type="x-smartling-placeholder">
선형 레이아웃 만들기

하위 요소를 하나의 가로 또는 세로 행으로 구성하고 창의 길이가 화면 길이를 초과하는 경우 스크롤바를 표시합니다.

WebView에서 웹 앱 빌드

웹페이지를 표시합니다.

동적 목록 만들기

레이아웃의 콘텐츠가 동적이거나 미리 정의되지 않은 경우 사용 RecyclerView 또는 서브클래스로 AdapterView입니다. RecyclerView는 메모리를 사용하므로 일반적으로 더 나은 옵션입니다. AdapterView보다 더 효율적입니다.

RecyclerView 및 AdapterView에는 다음이 포함됩니다.

목록

스크롤 단일 열 목록을 표시합니다.

그리드

열과 행의 스크롤 그리드를 표시합니다.

RecyclerView은(는) 더 많은 가능성을 제공하고 kubectl 명령어 맞춤 레이아웃 관리자가 필요합니다.

데이터로 어댑터 뷰 채우기

맞춤 인벤토리 라벨을 사용하여 AdapterView ListView 등 또는 GridView에 의해 AdapterView 인스턴스를 Adapter, 이 메서드는 외부 소스에서 데이터를 가져와 View를 만듭니다. 데이터 세트는 각 데이터 항목을 나타냅니다.

Android는 유용한 Adapter의 여러 서브클래스를 제공합니다. 다양한 종류의 데이터를 검색하고 AdapterView입니다. 가장 보편적인 어댑터 두 가지를 예로 들면 다음과 같습니다.

ArrayAdapter
데이터 소스가 배열인 경우에 이 어댑터를 사용합니다. 기본적으로 ArrayAdapter는 다음을 호출하여 각 배열 항목의 뷰를 만듭니다. toString() TextView에 콘텐츠를 배치하는 것입니다.

예를 들어, 문자열의 배열이 ListView, 새 ArrayAdapter 초기화 생성자를 사용하여 각 문자열과 문자열 배열의 레이아웃을 지정합니다.

Kotlin

    val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, myStringArray)

자바

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, myStringArray);

이 생성자의 인수는 다음과 같습니다.

  • 내 앱 Context
  • 각 문자열의 TextView가 포함된 레이아웃은 배열
  • 문자열 배열

그런 다음 setAdapter() ListView:

Kotlin

    val listView: ListView = findViewById(R.id.listview)
    listView.adapter = adapter

자바

    ListView listView = (ListView) findViewById(R.id.listview);
    listView.setAdapter(adapter);

각 항목의 모양을 맞춤설정하려면 toString() 메서드를 사용해야 합니다. 또는 각 항목에 대한 뷰를 TextView: 예를 들어 ImageView 각 배열 항목 - ArrayAdapter 클래스를 확장하고 재정의하다 getView() 를 호출하여 각 항목에 원하는 뷰 유형을 반환합니다.

SimpleCursorAdapter
이 어댑터는 Cursor입니다. SimpleCursorAdapter 사용 시 사용할 레이아웃 지정 Cursor의 각 행과 원하는 레이아웃의 뷰에 삽입하려는 Cursor입니다. 예를 들어 사용자의 이름과 전화번호 목록을 만들고자 하는 경우 Cursor를 반환하는 쿼리를 실행할 수 있습니다. 각 사람에 대한 행과 이름과 숫자에 대한 열이 포함됩니다. 나 생성된 데이터 세트의 레이아웃에서 각 결과에 대해 원하는 Cursor 및 정수 각 열이 있어야 하는 해당 뷰를 지정하는 배열 배치:

Kotlin

    val fromColumns = arrayOf(ContactsContract.Data.DISPLAY_NAME,
                              ContactsContract.CommonDataKinds.Phone.NUMBER)
    val toViews = intArrayOf(R.id.display_name, R.id.phone_number)

자바

    String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME,
                            ContactsContract.CommonDataKinds.Phone.NUMBER};
    int[] toViews = {R.id.display_name, R.id.phone_number};

SimpleCursorAdapter를 인스턴스화할 때 레이아웃으로 표시되며, Cursor 결과 및 다음 두 배열이 포함됩니다.

Kotlin

    val adapter = SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0)
    val listView = getListView()
    listView.adapter = adapter

자바

    SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
            R.layout.person_name_and_number, cursor, fromColumns, toViews, 0);
    ListView listView = getListView();
    listView.setAdapter(adapter);

그런 다음 SimpleCursorAdapter는 각 행의 뷰를 만듭니다. 제공된 레이아웃을 사용하는 Cursor fromColumns 항목을 해당하는 toViews에 추가 합니다.

앱의 수명이 진행되는 동안 어댑터에서 읽을 수 있는 경우 notifyDataSetChanged() 연결된 뷰에 데이터가 변경되었으며 새로고침된다고 알립니다. 있습니다.

클릭 이벤트 처리

AdapterView의 각 항목에서 클릭 이벤트에 응답할 수 있습니다. 이를 구현함으로써 AdapterView.OnItemClickListener 인터페이스에 추가되었습니다. 예를 들면 다음과 같습니다.

Kotlin

listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
    // Do something in response to the click.
}

Java

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
    public void onItemClick(AdapterView parent, View v, int position, long id) {
        // Do something in response to the click.
    }
};

listView.setOnItemClickListener(messageClickedHandler);

추가 리소스

다음에서 레이아웃이 사용되는 방법을 확인하세요. 해바라기 데모 앱을 참고하세요.