이 페이지는 Cloud Translation API를 통해 번역되었습니다.

ConstraintLayout으로 반응형 UI 빌드 Android Jetpack의 구성요소

ConstraintLayout 드림 를 사용하면 플랫 뷰 계층 구조로 크고 복잡한 레이아웃을 만들 수 있습니다. 중첩 뷰 그룹을 만듭니다. 이 명령어는 RelativeLayout 드림 모든 뷰가 동위 뷰 사이의 관계에 따라 배치된다는 점에서 상위 요소 레이아웃이지만 RelativeLayout보다 유연합니다. Android 스튜디오의 Layout Editor로 더 쉽게 사용할 수 있습니다.

ConstraintLayout의 모든 기능을 Layout Editor의 시각적 도구에도 적합합니다. Layout API와 Layout Editor는 서로를 위해 특별하게 만들어졌다는 것입니다. 다음을 사용하여 레이아웃을 빌드할 수 있습니다. 수정하는 대신 드래그하여 ConstraintLayout XML입니다.

이 페이지에서는 ConstraintLayout을 사용하여 레이아웃을 빌드하는 방법을 보여줍니다. Android 스튜디오 3.0 이상 Layout Editor에 관한 자세한 내용은 Layout Editor로 UI 빌드를 참고하세요.

ConstraintLayout로 만들 수 있는 다양한 레이아웃을 보려면 다음 안내를 따르세요. 자세한 내용은 GitHub의 제약조건 레이아웃 예시 프로젝트

제약조건 개요

ConstraintLayout에서 뷰의 위치를 정의하려면 뷰에 대한 가로 및 세로 제약 조건 각각 하나 이상 각 제약조건 은 다른 뷰, 상위 레이아웃 또는 안내선에 표시됩니다. 각 제약 조건은 위치를 따라 뷰의 위치를 정의합니다. 표시됩니다. 각 뷰에는 최소 하나의 제약조건이 각 축마다 다르지만 종종 더 많이 필요합니다.

뷰를 Layout Editor에 놓아도 그대로 두어도 그대로 유지됨 사용할 수 있습니다. 이는 편집을 더 쉽게 하기 위함일 뿐입니다. 보기에 기기에서 레이아웃을 실행할 때 [0,0] 위치에 그려집니다. (왼쪽 상단)

그림 1에서는 편집기에서 레이아웃이 제대로 보이지만 세로로 표시되지 않습니다. 제약 조건을 적용할 수 있습니다. 이 레이아웃이 기기에 그려지면 C를 가로로 봅니다. 는 보기 A의 왼쪽 및 오른쪽 가장자리와 일치하지만 화면에 세로 제약 조건이 없기 때문입니다.

그림 1. 편집기에 뷰 C가 A 아래에 표시되지만 세로 제약 조건 없음

그림 2. 이제 보기 C가 세로로 제한됩니다. A가 표시됩니다.

제약 조건이 누락되어도 컴파일 오류가 발생하지는 않지만 레이아웃은 편집기에 제약 조건 누락이 툴바에 오류로 표시됩니다. 보기 오류 및 기타 경고가 표시되면 경고 및 오류 표시를 클릭합니다. 입니다. 제약 조건 누락을 방지하기 위해 Layout Editor는 자동으로 제약 조건을 추가적으로 자동 연결 및 제약 조건 추론 기능을 살펴보겠습니다

ConstraintLayout을 프로젝트에 추가

프로젝트에서 ConstraintLayout를 사용하려면 다음 단계를 진행하세요.

maven.google.com 저장소가 선언되었는지 확인합니다. (settings.gradle 파일에서:

Groovy

    dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    )

Kotlin

    dependencyResolutionManagement {
      ...
      repositories {
          google()
      }
    }

라이브러리를 모듈 수준에서 종속 항목으로 추가 build.gradle 파일을 엽니다. 최신 버전이 예에 표시된 것과 다를 수 있습니다.

Groovy

dependencies {
    implementation "androidx.constraintlayout:constraintlayout:2.2.0-alpha14"
    // To use constraintlayout in compose
    implementation "androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14"
}

Kotlin

dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.0-alpha14")
    // To use constraintlayout in compose
    implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha14")
}

툴바 또는 동기화 알림에서 Sync Project with Gradle(Gradle과 프로젝트 동기화)을 클릭합니다. Files로 이동하세요.

이제 ConstraintLayout으로 레이아웃을 빌드할 준비가 되었습니다.

레이아웃 변환

그림 3. 레이아웃을 변환하는 메뉴 ConstraintLayout

기존 레이아웃을 제약조건 레이아웃으로 변환하려면 다음 단계를 따르세요.

Android 스튜디오에서 레이아웃을 열고 를 클릭합니다.
Component Tree 창에서 레이아웃을 마우스 오른쪽 버튼으로 클릭하고 LinearLayout을 ConstraintLayout으로 변환

새 레이아웃 생성

새 제약조건 레이아웃 파일을 시작하려면 다음 단계를 따르세요.

Project 창에서 모듈 폴더를 클릭하고 파일 > 신규 > XML > 레이아웃 XML
레이아웃 파일의 이름을 입력하고 'androidx.constraintlayout.widget.ConstraintLayout' 태그를 참조하세요.
Finish를 클릭합니다.

제약조건 추가 또는 삭제

제약조건을 추가하려면 다음 단계를 따르세요.

동영상 1. 왼쪽으로 제한된 뷰의 왼쪽 있습니다.

Palette 창에서 편집기로 보기를 드래그합니다.

ConstraintLayout에 뷰를 추가하면 각 모서리에 정사각형 크기 조절 핸들이 있는 경계 상자와 원형 제약 조건 핸들을 표시합니다.
보기를 클릭하여 선택합니다.
다음 중 한 가지 방법을 사용합니다. <ph type="x-smartling-placeholder">
- 제약조건 핸들을 클릭하여 사용 가능한 앵커 포인트로 드래그합니다. 이 지점은 다른 뷰의 가장자리, 레이아웃의 가장자리 또는 가이드라인입니다. 제약 조건 핸들을 드래그할 때 레이아웃은 편집기에 잠재적인 연결 앵커와 파란색 오버레이가 표시됩니다.
- 연결 만들기 중 하나를 클릭합니다. <ph type="x-smartling-placeholder"></ph> Attributes 창의 Layout 섹션에 있는 (그림 4 참조)
  
  그림 4. 레이아웃 Attributes 창의 섹션을 사용하면 속성을 지정할 수 있는 연결을 설정할 수 있습니다

제약조건이 생성되면 편집기는 기본 여백을 사용하여 두 뷰를 분리합니다.

제약조건을 만들 때 다음 규칙을 기억하세요.

모든 뷰에는 가로와 세로 중 각각 하나씩 최소 두 개의 제약 조건이 있어야 합니다. 세로로 표시됩니다.
제약 조건 핸들과 앵커 사이에만 제약 조건을 만들 수 있습니다. 여러 개의 동일한 평면을 공유하기 때문입니다 수직 평면 - 왼쪽과 오른쪽 측면—뷰는 다른 수직 평면으로만 제한될 수 있습니다. 기준은 다른 기준으로만 제한할 수 있습니다.
각 제약조건 핸들은 하나의 제약조건에만 사용할 수 있지만 여러 뷰에서 동일한 앵커 포인트에 대한 여러 제약 조건을 생성합니다.

다음 중 하나를 실행하여 제약조건을 삭제할 수 있습니다.

제약조건을 클릭하여 선택한 후 삭제를 클릭합니다.
Control-클릭 (macOS에서는 Command-클릭) 제약 조건 앵커입니다. 제약조건이 빨간색으로 바뀌면 클릭하여 삭제합니다.

그림 5. 빨간색 제약 조건은 클릭하여 삭제할 수 있습니다.
Attributes 창의 Layout 섹션에서 제약 조건 앵커를 사용해야 합니다.

그림 6. 제약조건 클릭 앵커를 클릭하여 삭제하세요.

동영상 2. 기존 제약조건에 반대하는 제약조건 추가

뷰에 반대 제약 조건을 추가하면 제약 조건 선이 반대쪽 힘을 나타내기 위해 스프링처럼 감아져 있습니다. 동영상 2에 나와 있습니다. 이 뷰 크기가 '고정'으로 설정되어 있을 때 가장 잘 보입니다. '콘텐츠 줄바꿈'을 사용하면 이 경우 뷰가 제약 조건 사이의 중앙에 배치됩니다. 대신 제약 조건에 맞게 보기의 크기를 늘리고, '제약조건과 일치'하도록 크기를 전환합니다. 만약 현재 크기를 유지하면서 뷰가 중앙에 위치하지 않도록 이동하려고 합니다. 제약조건 편향을 조정할 수 있습니다.

제약 조건을 사용하여 다양한 유형의 레이아웃 동작을 구현할 수 있습니다. 다음 섹션에 설명되어 있습니다.

상위 요소 포지셔닝

뷰의 측면을 레이아웃의 상응하는 가장자리로 제한합니다.

그림 7에서 뷰의 왼쪽은 상위 요소 레이아웃입니다. 여백을 사용하여 가장자리로부터의 거리를 정의할 수 있습니다.

그림 7. 가로 제약조건 있습니다.

위치 순서 지정

두 보기의 표시 순서를 수직 또는 가로 방향으로 돌립니다.

그림 8에서 B는 항상 A의 오른쪽에 있도록 제한되고 C는 A 미만으로 제한됩니다. 그러나 이러한 제약 조건은 정렬을 의미하지 않으므로 B는 여전히 위아래로 움직입니다.

그림 8. 가로 및 세로 방향 제약이 있습니다

정렬

보기의 가장자리를 다른 보기의 가장자리에 맞게 정렬합니다.

그림 9에서 B의 왼쪽은 A의 왼쪽에 맞게 정렬됩니다. 원하는 경우 뷰 중심을 정렬하려면 양쪽에 제약 조건을 만듭니다.

제약 조건에서 안쪽으로 보기를 드래그하여 정렬을 오프셋할 수 있습니다. 예를 들어, 그림 10에서는 24dp 오프셋 정렬의 B를 보여줍니다. 오프셋은 제한된 뷰의 여백으로 정의됩니다.

정렬할 보기를 모두 선택한 다음 정렬 <ph type="x-smartling-placeholder"></ph> 정렬 유형을 선택합니다.

그림 9. 가로 정렬 제약이 있습니다

그림 10. 오프셋 가로 정렬 제약조건이 있습니다.

기준선 정렬

보기의 텍스트 기준선을 다른 보기의 텍스트 기준선에 맞춥니다.

그림 11에서 B의 첫 번째 줄은 A의 텍스트에 맞게 정렬됩니다.

기준 제약조건을 만들려면 원하는 텍스트 뷰를 마우스 오른쪽 버튼으로 클릭합니다. 제약 조건을 선택한 다음 Show Baseline을 클릭합니다. 텍스트를 클릭하세요. 선을 다른 기준선으로 끕니다.

그림 11. 기준 정렬 제약이 있습니다

안내선으로 제한

세로 또는 가로 안내선을 추가하여 앱 사용자에게 표시되지 않습니다. 가이드라인을 배치할 때 dp 단위 또는 배치할 수 있습니다.

가이드라인을 만들려면 가이드라인을 클릭합니다. <ph type="x-smartling-placeholder"></ph> 를 클릭한 다음 카테고리 가이드라인 추가 또는 추가 가로 가이드라인.

점선을 드래그하여 위치를 조정하고 가이드라인을 따라 측정 모드를 전환합니다.

그림 12. 뷰는 가이드라인입니다.

경계선으로 제한

안내선과 마찬가지로 경계선은 제약할 수 있는 보이지 않는 선입니다. 경계선은 자체 위치를 정의하지 않는다는 점만 다릅니다. 대신 위치는 내부에 포함된 뷰의 위치를 기준으로 이동합니다. 이것은 뷰를 하나가 아닌 뷰 세트로 제한하려는 경우에 유용합니다. 확인할 수 있습니다

예를 들어, 그림 13에서 뷰 C는 있습니다. 경계선이 'end'로 설정되어 있습니다. (또는 오른쪽을 왼쪽에서 오른쪽으로 레이아웃)을 만들어야 합니다. 장벽은 보기 A 또는 보기 B의 오른쪽이 맨 오른쪽에 있습니다.

경계선을 만들려면 다음 단계를 따르세요.

가이드라인을 클릭합니다. <ph type="x-smartling-placeholder"></ph> 클릭하고 수직 장벽 추가를 클릭하거나 가로 장벽 추가
Component Tree 창에서 경계선 구성요소로 드래그합니다.
Component Tree에서 배리어를 선택하고 속성 <ph type="x-smartling-placeholder"></ph> 다음 barrierDirection을 설정합니다.

이제 다른 보기에서 경계선으로의 제약조건을 만들 수 있습니다.

경계선 내부에 있는 보기를 있습니다. 이렇게 하면 경계선의 모든 보기를 서로에 맞게 정렬할 수 있습니다. 어느 뷰가 가장 길거나 높은지 모르는 경우에도 가능합니다.

또한 경계선 안에 안내선을 포함하여 위치를 지정합니다.

그림 13. 보기 C는 경계선으로 제한되고 이는 뷰 A와 뷰 B 모두의 위치와 크기에 따라 움직입니다.

제약조건 편향 조정

뷰의 양쪽에 제약 조건을 추가하고 뷰의 뷰 크기를 같은 측정기준이 '고정'되어 있거나 '콘텐츠 래핑'을 선택하면 뷰가 중앙에 배치되고 편향은 기본적으로 50% 로 할 수 있습니다. 이 Attributes 창에서 편향 슬라이더를 드래그하거나 동영상 3에서 볼 수 있습니다.

제약 조건을 충족하도록 뷰의 크기를 확장하려면 '제약조건과 일치'하도록 크기를 전환합니다.

동영상 3. 제약 조건 편향 조정

보기 크기 조정

그림 14. 보기를 선택할 때 Attributes 창에는 크기 비율 1, 2 제약 조건 삭제, 3 높이 또는 너비 모드, 여백 4 5 제약 편향 편향. 또한 강조 표시를 할 수도 있습니다. Layout Editor의 개별 제약 조건을 변경하려면 6 제약조건 목록.

모서리 핸들을 사용하여 뷰의 크기를 조절할 수 있지만 이렇게 하면 크기 - 다른 콘텐츠나 화면 크기에 맞게 보기의 크기가 조정되지 않습니다. 받는사람 다른 크기 조정 모드를 선택하고 뷰를 클릭한 다음 Attributes <ph type="x-smartling-placeholder"></ph> 클릭합니다.

Attributes 창 상단 근처에는 뷰 검사기가 있습니다. 에는 그림 14와 같이 여러 레이아웃 속성을 위한 컨트롤이 포함되어 있습니다. 이것은 제약 조건 레이아웃의 뷰에만 사용할 수 있습니다.

높이와 너비가 계산되는 방식을 변경하려면 그림 14에서 설명선 3으로 표시된 기호 이러한 기호는 다음과 같이 크기 모드를 나타냅니다. 전환하려면 기호를 클릭하세요. 변경할 수 있습니다.

고정: 다음 텍스트 상자에서 또는 편집기에서 뷰 크기를 조절하는 것입니다.
콘텐츠 래핑: 보기는 뷰에 맞게 필요한 만큼만 확장됩니다. 있습니다.

layout_restrictedWidth

가로 크기가 다음과 같이 변경되도록 하려면 true로 설정합니다. 제약 조건을 충족해야 합니다 기본적으로 WRAP_CONTENT로 설정된 위젯 제약이 없는 것으로 제한되지 않습니다

Match Constraints: 뷰가 최대한 많이 확장되어 제약 조건을 적용할 수 있습니다. 하지만 다음 속성과 값으로 해당 동작을 수정할 수 있습니다. 이러한 속성은 뷰 너비를 '제약 조건과 일치'로 설정한 경우에만 적용됩니다. <ph type="x-smartling-placeholder">
- layout_constraintWidth_min
  보기의 최소 너비에 dp 측정기준을 사용합니다.
- layout_constraintWidth_max
  보기의 최대 너비에 dp 측정기준을 사용합니다.
하지만 지정된 측정기준에 제약조건이 하나만 있으면 보기는 는 콘텐츠에 맞게 확장됩니다. 높이 또는 너비에도 이 모드를 사용하면 크기 비율을 설정할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> 참고: match_parent는 ConstraintLayout 대신 'match constraints'를 사용하세요. (0dp)

크기를 비율로 설정

그림 15. 뷰는 16:9 가로세로 비율로 설정되며 높이의 비율에 따라 너비를 조정할 수 있습니다.

다음 중 적어도 하나가 16:9인 경우 보기 크기를 비율로 설정할 수 있습니다. 뷰 크기가 '제약 조건과 일치'하도록 (0dp) 사용 설정 가로세로 비율 제약 조건 전환을 클릭합니다 (콜아웃 1)을 입력하고 표시되는 입력의 width:height 비율입니다.

너비와 높이 모두 '제약 조건과 일치'로 설정된 경우 왼쪽 탐색창을 클릭하여 가로세로 비율 제약 조건 전환: 사용할 수 있습니다. 뷰 검사기는 실선으로 그 가장자리를 연결해 놓으세요.

예를 들어 양쪽을 'match constraints'로 설정하면 전환 버튼 가로세로 비율 제약 조건을 두 번 사용하여 너비를 높이의 비율이 되도록 설정합니다. 전체 크기는 뷰의 높이에 따라 결정되며, 높이는 할 수 있습니다.

보기 여백 조정

보기 간격을 균일하게 조정하려면 여백을 클릭합니다. <ph type="x-smartling-placeholder"></ph> 를 클릭하여 창에 추가하는 각 보기의 기본 여백을 선택합니다. 있습니다. 기본 여백에 대한 모든 변경사항은 추가할 수 있습니다.

Attributes 창에서 각 뷰의 여백을 제어할 수 있습니다. 각 제약조건을 나타내는 선의 숫자를 클릭합니다. 그림 14에서는 설명선 4는 하단 여백이 16dp

그림 16. 툴바의 Margin 버튼을 클릭합니다.

도구에서 제공하는 모든 여백은 8dp의 배수이므로 뷰를 정렬하는 데 도움이 됩니다. 머티리얼 디자인의 8dp 정사각형 그리드 권장사항과 비슷합니다.

체인이 있는 선형 그룹 제어

그림 17. 가로 체인에는 두 가지 보기가 있습니다.

체인은 양방향으로 서로 연결된 뷰 그룹입니다. 위치를 지정할 수 있습니다. 체인 내의 보기는 가로 또는 세로로 표시됩니다.

그림 18. 각 체인의 예 있습니다.

체인 스타일은 다음 방법 중 하나로 지정할 수 있습니다.

분산: 여백을 줄인 후 보기가 고르게 분포됩니다. 고려되어야 합니다. 이는 기본값입니다.
내부로 확산: 첫 번째 및 마지막 보기가 제약조건이 있고 나머지는 균일하게 배포되었습니다.
가중치 적용: 체인이 넓히기 또는 안쪽으로 확산하는 경우 너비, 높이, 너비, 높이, 세로 중 '제약 조건과 일치'시키기 위한 뷰 (0dp) 기본적으로 스페이스는 '제약 조건과 일치'하도록 설정된 각 보기 간에 균등하게 분산됩니다. 그러나 layout_constraintHorizontal_weight 및 layout_constraintVertical_weight 속성 이는 layout_weight 선형 레이아웃: 가장 큰 가중치 값을 가진 뷰가 가장 많은 공간을 확보하며, 가중치가 같은 뷰는 같은 크기의 공간을 갖게 됩니다.
채우기: 여백을 고려한 후 조회수가 합산됩니다. 정의합니다. 전체 체인의 편향을 왼쪽 또는 오른쪽, 위쪽 또는 아래쪽으로 조정할 수 있습니다. 체인의 'head'를 변경하여 살펴보겠습니다.

체인의 'head' 뷰: 가로 체인에서 가장 왼쪽 뷰 (왼쪽에서 오른쪽 레이아웃)이고 세로 체인에서 최상위 뷰 - XML로 체인의 스타일을 정의합니다. 하지만 펼치기, 내부로 펼치기, 패킹을 선택합니다. <ph type="x-smartling-placeholder"></ph> 볼 수 있습니다.

체인을 만들려면 동영상 4와 같이 다음을 수행합니다.

체인에 포함할 모든 보기를 선택합니다.
보기 중 하나를 마우스 오른쪽 버튼으로 클릭합니다.
체인점을 선택합니다.
Center Horizontally 또는 Center Vertically를 선택합니다.

동영상 4. 가로 체인 만들기

다음은 체인을 사용할 때 고려해야 할 몇 가지 사항입니다.

보기는 가로 및 세로 체인의 일부가 될 수 있으므로 유연한 그리드 레이아웃을 빌드할 수 있습니다.
체인의 각 끝이 다른 객체를 생성할 수 있습니다.
체인의 방향은 세로 또는 가로이지만, 뷰를 해당 방향으로 정렬하지 않습니다. 이해관계자에게 적합한 포지션을 체인의 각 보기에는 정렬 제약 조건을 포함합니다.

자동으로 제약조건 만들기

레이아웃에 뷰를 배치할 때 모든 뷰에 제약 조건을 추가하는 대신 각 뷰를 Layout Editor에서 원하는 위치로 이동하고 그런 다음 Infer Constraints(제약조건 추론)를 클릭합니다. <ph type="x-smartling-placeholder"></ph> 자동으로 제약 조건을 만들 수 있습니다

제약 조건 추론은 레이아웃을 스캔하여 가장 효과적인 세트를 결정합니다. 제약 조건을 모두 적용할 수 있습니다 뷰를 현재 위치로 제한합니다. 유연성을 제공하면서 말이죠 입찰 전략이 더 이상 작동하지 않게 하려면 레이아웃이 다양한 화면 크기와 방향에 의도대로 반응해야 합니다.

상위 항목과 자동 연결은 별도로 사용 설정할 수 있습니다. 날짜 하위 뷰를 상위 요소에 추가하면 이 기능이 자동으로 뷰에 제약 조건을 추가하면 각 뷰에 두 개 이상의 제약 조건이 생성됩니다. 뷰를 상위 요소로 제한하는 것이 적절한 경우에만 있습니다. 자동 연결은 레이아웃의 다른 뷰에 관한 제약 조건을 생성하지 않습니다.

자동 연결은 기본적으로 사용되지 않습니다. 사용 설정 부모와 자동 연결 <ph type="x-smartling-placeholder"></ph> 를 클릭합니다.

키프레임 애니메이션

ConstraintLayout 내에서 크기 변경에 애니메이션을 적용할 수 있습니다. 요소의 위치와 위치를 ConstraintSet 및 TransitionManager입니다.

ConstraintSet는 다음을 나타내는 경량 객체입니다. 제약 조건, 여백, 패딩을 ConstraintLayout입니다. ConstraintSet를 ConstraintLayout가 표시되면 레이아웃이 모든 하위 요소가 있습니다.

ConstraintSet를 사용하여 애니메이션을 빌드하려면 두 개의 레이아웃을 지정하세요. 파일의 시작 및 종료 키프레임 역할을 합니다. 그런 다음 두 번째 키프레임 파일에서 ConstraintSet를 가져와서 이를 ConstraintLayout이(가) 표시됩니다.

</ph> 참고: ConstraintSet 애니메이션은 크기 및 위치를 지정할 수 있습니다. 색상과 같은 다른 속성에는 애니메이션을 적용하지 않습니다.

다음 코드 예는 단일 버튼을 단일 버튼으로 이동하는 애니메이션을 화면 하단에 위치합니다.

// MainActivity.kt

fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
}

fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition()
    constraintSet.applyTo(constraintLayout)
}

// layout/keyframe1.xml
// Keyframe 1 contains the starting position for all elements in the animation
// as well as final colors and text sizes.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

// layout/keyframe2.xml
// Keyframe 2 contains another ConstraintLayout with the final positions.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

</ph> 참고: Android 스튜디오 3.6 이상에서는 뷰 결합 기능은 findViewById() 통화 또한 컴파일 시간 유형 안전성을 제공합니다. 코드를 생성하는 데 사용됩니다. 뷰 결합 대신 뷰 결합 사용 findViewById()

추가 리소스

ConstraintLayout는 다음에서 사용됩니다. 해바라기 데모 앱을 실행할 수 있습니다