ConstraintLayout 여백

Question

간단한 레이아웃이 있습니다. 더 왼쪽과 오른쪽 여백이없는 당신이 볼 수 있듯이 디자인보기에서

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.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="wrap_content" 
    android:background="@color/colorDarkGray"> 


    <RelativeLayout 
     android:id="@+id/container3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:alpha="0.7" 
      android:fontFamily="sans-serif" 
      android:letterSpacing="0.03" 
      android:text="Another text" 
      android:textColor="@color/colorWhite" 
      android:textSize="11sp" 
      android:textStyle="normal" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true" 
      android:fontFamily="sans-serif" 
      android:letterSpacing="0.03" 
      android:text="Some text" 
      android:textColor="@color/colorWhite" 
      android:textSize="11sp" 
      android:textStyle="normal" /> 
    </RelativeLayout> 
</android.support.constraint.ConstraintLayout> 

, 그것은 너무 보인다. 상단 및 하단 여백이 잘 작동합니다. 왼쪽 또는 오른쪽 여백을 제거하면 상대 레이아웃이 화면을 약간 넘어서 이동합니다. 상대 레이아웃이 없어도 할 수있을 것 같지만, 그 이유는 무엇인지 관심이 있습니다.

Answer 1

이 android:layout_width="0dp"

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.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="wrap_content" 
    android:background="@color/colorDarkGray"> 


    <RelativeLayout 
     android:id="@+id/container3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginTop="8dp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintTop_toTopOf="parent"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:alpha="0.7" 
      android:fontFamily="sans-serif" 
      android:letterSpacing="0.03" 
      android:text="Another text" 
      android:textColor="@color/colorWhite" 
      android:textSize="11sp" 
      android:textStyle="normal" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentRight="true" 
      android:layout_centerVertical="true" 
      android:fontFamily="sans-serif" 
      android:letterSpacing="0.03" 
      android:text="Some text" 
      android:textColor="@color/colorWhite" 
      android:textSize="11sp" 
      android:textStyle="normal" /> 
    </RelativeLayout> 
</android.support.constraint.ConstraintLayout> 

Answer 2

에 RelativeLayout 너비를 변경하려고하면 다음과 같이 당신의 RelativeLayout을 정의 할 때 네, 물론 레이아웃에는 왼쪽과 오른쪽 여백을 거기 없다 :

<RelativeLayout 
    android:id="@+id/container3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="8dp" 
    android:layout_marginStart="8dp" 
    android:layout_marginLeft="8dp" 
    android:layout_marginRight="8dp" 
    android:layout_marginEnd="8dp" 
    android:layout_marginTop="8dp" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 

즉, RelativeLayout은 너비와 높이가 wrap_content이며이 값은 Parent (가운데 ConstraintTop, Bot ....)에 있습니다.

어떻게 해결할 수 있습니까? 상대 레이아웃의 width을 0dp으로 설정하면됩니다. constraints에 따르면 귀하의 RelativeLayout은 (는) 부모와 동등한 의미를 갖습니다.

Answer 3

ConstraintLayout 내부에서 중첩 된 뷰를 사용하지 마십시오. 그 이유는 다음과 같습니다

• ConstraintLayout 당신이 그것을 Build a Responsive UI with ConstraintLayout

• 전통 중첩 된 레이아웃 계층 구조의 성능에 부정적인 영향 등을 언급 한 것 같은 평면 뷰 계층 (아무 중첩 된 뷰 그룹)와 함께 크고 복잡한 레이아웃을 만들 수 있습니다

  : 그것과 같아야합니다 Understanding the performance benefits of ConstraintLayout

결과 레이아웃 소스에 명시된 것

<android.support.constraint.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="wrap_content" 
    android:background="@color/colorDarkGray"> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_centerVertical="true" 
     android:alpha="0.7" 
     android:fontFamily="sans-serif" 
     android:letterSpacing="0.03" 
     android:text="Another text" 
     android:textColor="@color/colorWhite" 
     android:textSize="11sp" 
     android:textStyle="normal" 
     android:id="@+id/textView" 
     android:layout_marginTop="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginBottom="8dp" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/textView2" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_chainStyle="spread" /> 

    <TextView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:gravity="end" 
     android:fontFamily="sans-serif" 
     android:letterSpacing="0.03" 
     android:text="Some text" 
     android:textColor="@color/colorWhite" 
     android:textSize="11sp" 
     android:textStyle="normal" 
     android:id="@+id/textView2" 
     android:layout_marginTop="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginBottom="8dp" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/textView" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

당신은 Google's Codelab에서 다음 단계로 ConstraintLayouts와 레이아웃을 만드는 방법을 배울 수 있습니다.