ConstraintLayout 제약 조건 종속 뷰가 사라지면 레이아웃 뷰가 이상하게 동작합니다.

ConstraintLayout 제약 조건 종속 뷰가 사라지면 레이아웃 뷰가 이상하게 동작합니다.

제약 조건 레이아웃을 사용하고 있으며, 아래와 같이 표시됩니다.

싶습니다.First짐),뷰(엘라스틱 바디곳)First공간을 보기도 합니다.

First.gone, 제가 보기에 아래와 같이 보입니다. (모든 이미지는 Android Studio Design view에서 본 것과 같습니다.) 제Elastic Body실종됐고 키도 이상하게 커졌어요

아래와 같은 나의 레이아웃 코드

<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:padding="16dp">

    <TextView
        android:id="@+id/txt_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0ff"
        android:text="First"
        android:visibility="gone"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/txt_body"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_body"
        android:layout_width="0dp"
        android:background="#f0f"
        android:layout_height="wrap_content"
        android:text="Elastic Body"
        android:textSize="26sp"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/txt_tail"
        app:layout_constraintStart_toEndOf="@+id/txt_first"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_tail"
        android:background="#ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tail"
        android:textSize="26sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/txt_body"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

를 하면 (: gone.왜 그럴까요?요를 할 때 ?First전e을 할 수 Elastic Body정확하게 뻗었습니까?

p/s: 선형 배치 및 상대 배치에서 수행하는 방법을 알고 있습니다.이것이 제약 레이아웃에 대한 제한인지 궁금하십니까?

따라 해보세요.

첫 번째 보기의 왼쪽 및 위쪽 제약 조건을 "parent"(부모)로 설정합니다.그 후:

• txt_body 텍스트 보기 너비를 "0dp"로 설정합니다.
• 왼쪽 제약 조건을 첫 번째 뷰의 오른쪽으로 설정합니다.
• 오른쪽 구속조건을 테일 뷰의 왼쪽으로 설정합니다.

따라서 첫 번째 뷰의 가시성을 "사라짐"으로 설정할 때마다 바디 뷰는 원하는 대로 확장됩니다.

<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:padding="16dp">

    <TextView
        android:id="@+id/txt_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0ff"
        android:text="First"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/txt_body"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <TextView
        android:id="@+id/txt_body"
        android:layout_width="0dp"
        android:background="#f0f"
        android:layout_height="wrap_content"
        android:text="Elastic Body"
        android:textSize="26sp"
        app:layout_constraintRight_toLeftOf="@+id/txt_tail"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/txt_first"
        />

    <TextView
        android:id="@+id/txt_tail"
        android:background="#ff0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tail"
        android:textSize="26sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

갱신하다

장벽을 사용하고 싶다면 할 수도 있습니다.

<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="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/txt_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0ff"
        android:text="First"
        android:textSize="26sp"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/barrier"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_body"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#f0f"
        android:text="Elastic Body"
        android:textSize="26sp"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintEnd_toStartOf="@+id/txt_tail"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txt_tail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff0"
        android:text="Tail"
        android:textSize="26sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="txt_body,txt_first" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="txt_body,txt_tail" />

</androidx.constraintlayout.widget.ConstraintLayout>

예를 들어, 다음과 같은 사진을 갖고 싶다고 할 수 있습니다.

여기에는 제목과 "Nice work" 사이에, "Nice work"와 시간 사이에, 또한 "Opinions" 사이에 가로로 들여쓰기가 있습니다.그들은 수직으로 가운데 있습니다.

"의견"은 항성에 붙어 있기 때문에 다중선을 이루며 중심을 유지할 수 있습니다.두 가지 변형에 대한 결과를 보여줍니다. 첫 번째 행에서는 의견이 다중 행인 반면 다음 행에서는 단일 행입니다.열에는 2개 레이블을 표시/숨김의 4가지 변형을 볼 수 있습니다.

1. 더 하는 방법은 두 을 모두 입니다.LinearLayout합니다.ConstraintLayout그런 수 있으며 . 를 수 .LinearLayout그 자체.

2. 합니다를 합니다.Barrier모래를Group할 수 그것은 많은 시간을 낭비할 수 있는 어려운 일입니다.다가 .View정렬용 ("가 2개(공백.여기에 숨김 라벨 2개("Nice work", "의견")가 있고, 보기 2개(공백)를 추가해야 합니다.

오른쪽 공간의 높이는 별의 높이(14dp)와 같습니다.

여러 개의 보기를 숨기기 위해 그룹으로 묶었습니다.

수평 점선을 볼 수 있습니다 - 점선은Barriers. 가장 큰 뷰의 상단과 하단에 정렬합니다(barrier_2는 유사합니다).

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="top"
    app:constraint_referenced_ids="left_text,opinion" />

수직 정렬은 이 두 가지 추가 사항을 기반으로 합니다.Spaces(marginTop="10dp" 참조):

<Space
    android:id="@+id/left_text_space"
    android:layout_width="25dp"
    android:layout_height="10dp"
    android:layout_marginTop="10dp"
    app:layout_constraintStart_toEndOf="@id/left_text"
    app:layout_constraintTop_toBottomOf="@id/title" />

모든 상황을 다루는 것은 어려우므로 다음 레이아웃을 참조하십시오.

<?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"
    android:paddingLeft="15dp"
    android:paddingTop="5dp"
    android:paddingRight="15dp"
    android:paddingBottom="5dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lineSpacingExtra="4sp"
        android:lines="1"
        android:paddingBottom="5dp"
        android:text="«Title text»"
        android:textColor="#333333"
        android:textSize="15sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top"
        app:constraint_referenced_ids="left_text,opinion" />

    <TextView
        android:id="@+id/left_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#112233"
        android:paddingLeft="5dp"
        android:paddingTop="4dp"
        android:paddingRight="5dp"
        android:paddingBottom="4dp"
        android:text="Nice work"
        android:textColor="#ffffff"
        android:textSize="13sp"
        app:layout_constraintBottom_toBottomOf="@id/barrier_2"
        app:layout_constraintStart_toStartOf="@id/title"
        app:layout_constraintTop_toTopOf="@id/left_text_space" />

    <Space
        android:id="@+id/left_text_space"
        android:layout_width="25dp"
        android:layout_height="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toEndOf="@id/left_text"
        app:layout_constraintTop_toBottomOf="@id/title" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/left_text_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="left_text,left_text_space" />

    <Space
        android:id="@+id/opinion_space"
        android:layout_width="1dp"
        android:layout_height="14dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="@id/left_text_space"
        app:layout_constraintTop_toBottomOf="@id/title" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="left_text,opinion" />

    <ImageView
        android:id="@+id/opinion_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:contentDescription="@null"
        app:layout_constraintBottom_toBottomOf="@id/barrier_2"
        app:layout_constraintStart_toEndOf="@id/left_text_space"
        app:layout_constraintTop_toTopOf="@id/opinion_space"
        app:srcCompat="@drawable/ic_filled_rate_star" />

    <TextView
        android:id="@+id/opinion"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginLeft="5dp"
        android:lineSpacingExtra="1sp"
        android:text="1. Opinion 1.\n2. Opinion 2.\n3. Opinion 3.\n4. Opinion 4."
        android:textColor="#1122aa"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/opinion_icon"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/opinion_icon"
        app:layout_constraintTop_toTopOf="@id/opinion_icon" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/opinion_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="opinion_icon,opinion,opinion_space" />

    <ImageView
        android:id="@+id/time_icon"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_gravity="center_vertical"
        android:layout_marginTop="8dp"
        android:contentDescription="@null"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/barrier_2"
        app:srcCompat="@drawable/ic_time" />

    <TextView
        android:id="@+id/time"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="7dp"
        android:layout_marginLeft="7dp"
        android:ellipsize="end"
        android:lineSpacingExtra="1sp"
        android:lines="2"
        android:paddingBottom="7dp"
        android:text="17:00"
        android:textColor="#9e9e9e"
        android:textSize="11sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toEndOf="@id/time_icon"
        app:layout_constraintTop_toTopOf="@id/time_icon" />

</androidx.constraintlayout.widget.ConstraintLayout>

그런 다음 활동에서 레이블을 표시/숨길 수 있습니다.숨다Groups, 이상하게도 안에 있는 것은 보기가 아닙니다.Group뷰는 항상 보입니다.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_activity)

    left_text_group.visibility = View.GONE
    opinion_group.visibility = View.VISIBLE
}

장벽과 관련된 답변이 이미 주어졌습니다.제가 실제로 구현한 방법을 예로 들어보겠습니다.

<TextView
    android:id="@+id/textView1"
    app:layout_constraintTop_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:text="Some text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/textView2"
    app:layout_constraintTop_toBottomOf="@id/textView1"
    app:layout_constraintLeft_toLeftOf="parent"
    android:text="Some other text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="textView1,textView2" />

이 예제는 2를 보여줍니다.TextViews둘 중 하나가 될 수 있습니다.gone. 보기가 위에서 아래로 쌓여 있습니다.barrierDirection로 설정됩니다.bottom. 다른 방향이 필요하다면 그 선을 그에 맞게 바꾸세요.

둘 중 하나를 설정하기TextViews로.gone, 결과적으로Barrier다른 사람들의 밑바닥으로 옮겨가고, 만약 우리가 둘 다 그렇게 설정한다면.gone, 그것은 단지 우리가 그들을 도와줄 수 있다는 요소로 옮겨갈 것입니다.textView1가장 큰 제약 조건은 이 경우 부모를 참조하는 것이었습니다.

참고: 다음과 같은 경우textView1의 최상위 제약 조건은 다른 것입니다. 즉, 다른 요소 아래에 있습니다. 두 뷰가 모두 다음과 같이 설정되면 장벽이 끝납니다.gone.

언급URL : https://stackoverflow.com/questions/45080835/constraintlayout-when-constraint-dependent-view-is-gone-the-layout-view-behave