programing tip

ConstraintLayout 내부의 Wrap_content 뷰가 화면 밖으로 확장됩니다.

itbloger 2020. 8. 17. 08:20
반응형

ConstraintLayout 내부의 Wrap_content 뷰가 화면 밖으로 확장됩니다.


을 사용하여 간단한 채팅 거품을 구현하려고합니다 ConstraintLayout. 이것이 내가 달성하려는 것입니다.

여기에 이미지 설명 입력 여기에 이미지 설명 입력

그러나 wrap_content제약 조건에서 제대로 작동하지 않는 것 같습니다. 여백을 존중하지만 사용 가능한 공간을 제대로 계산하지 않습니다. 내 레이아웃은 다음과 같습니다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0"
        tools:background="@drawable/chat_message_bubble"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum."
        android:layout_marginStart="64dp"
        android:layout_marginLeft="64dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

이것은 다음과 같이 렌더링됩니다.

여기에 이미지 설명 입력

나는 com.android.support.constraint:constraint-layout:1.0.0-beta4.

내가 뭘 잘못하고 있니? 버그입니까, 아니면 직관적이지 않은 동작입니까? 를 사용하여 적절한 동작을 수행 할 수 있습니까 ConstraintLayout(다른 레이아웃을 사용할 수 있다는 것을 알고 있습니다 ConstrainLayout. 구체적으로 묻고 있습니다).


오래된 : 더 나은 답변보기

아니요, 현재와 같이 ConstraintLayout으로 원하는 것을 할 수 없습니다 (1.0 베타 4).

  • wrap_content 위젯에 자체 측정 만 요청하지만 최종 제약에 대한 확장을 제한하지 않습니다.
  • match_constraints(0dp) 제약 조건에 대해 위젯의 크기를 제한하지만 wrap_content더 작 더라도 일치합니다 (첫 번째 예제).

그래서 지금, 당신은 그 특별한 경우에 운이 좋지 않습니다 :-/

이제 ... match_constraints이 정확한 시나리오를 처리 하기 위해에 추가 기능을 추가하는 것을 고려하고 있습니다 ( wrap_content크기가 제약 조건 이상이 되지 않는 한 작동 ).

이 새로운 기능이 1.0 릴리스 이전에 만들어 질 것이라고 약속 할 수는 없습니다.

편집 : 속성 app:layout_constraintWidth_default="wrap"(폭이 0dp로 설정 됨)을 사용하여 1.0에서이 기능을 추가했습니다 . 설정되면 위젯은 wrap_content를 사용하는 것과 동일한 크기를 갖지만 제약 조건에 의해 제한됩니다 (즉, 그 이상으로 확장되지 않음).


업데이트 됨 (ConstraintLayout 1.1. +)

사용 app:layout_constrainedWidth="true"에 폭 세트wrap_content

이전 (사용되지 않음) :

app:layout_constraintWidth_default="wrap" 너비가 0dp


네, Nikolas Roard의 답변에서 언급했듯이 app:layout_constraintWidth_default="wrap"너비를 0dp로 추가 하고 설정 해야합니다 . 그리고 말풍선을 올바르게 정렬하려면 layout_constraintHorizontal_bias.

다음은 최종 소스 코드입니다.

<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="match_parent" >

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginStart="64dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/chat_message_bubble"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

</android.support.constraint.ConstraintLayout>

결과적으로 다음과 같이 보입니다.

여기에 이미지 설명 입력


이미 말한 다른 답변과 마찬가지로 ConstraintLayout 1.0 이후로이를 달성 할 수 있지만 최신 릴리스 (1.1.x)에서는 작업 방식이 변경되었습니다.

Since the release of ConstraintLayout 1.1 the old app:layout_constraintWidth_default="wrap" and app:layout_constraintHeight_default="wrap" attributes are now deprecated.

If you want to provide a wrap_content behavior, but still enforce the constraints on your View, you should set its width and/or height to wrap_content combined with the app:layout_constrainedWidth=”true|false” and/or app:layout_constrainedHeight=”true|false” attributes, as stated on the docs:

WRAP_CONTENT : enforcing constraints (Added in 1.1) If a dimension is set to WRAP_CONTENT, in versions before 1.1 they will be treated as a literal dimension -- meaning, constraints will not limit the resulting dimension. While in general this is enough (and faster), in some situations, you might want to use WRAP_CONTENT, yet keep enforcing constraints to limit the resulting dimension. In that case, you can add one of the corresponding attribute:

app:layout_constrainedWidth=”true|false” app:layout_constrainedHeight=”true|false”

As for the latest release, by the time I've answered this, ConstraintLayout is on version 1.1.2.


app : layout_constraintWidth_default 텍스트 및 그 대안의 지원 중단

@nicolas-roard's answer of app:layout_constraintWidth_default="wrap" and android:layout_width="0dp" is now DEPRECATED.

계속해서 app:layout_constrainedWidth="true"android:layout_width="wrap_content".

지원 중단의 이유는 모르겠습니다. 그러나 ConstraintLayout의 소스 코드에서 그 권리


나는 이것을 사용한다

app:layout_constraintEnd_toEndOf="parent"

당신은 교체해야

android:layout_width="wrap_content"

android:layout_width="match_parent"

TextView에서 그에 따라 패딩과 여백을 조정하십시오. 귀하의 코드를 업데이트했습니다.

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/chat_message"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="10dp"
    android:layout_marginLeft="60dp"
    android:layout_marginRight="10dp"
    android:layout_marginStart="60dp"
    android:layout_marginTop="8dp"
    android:padding="16dp"
    app:layout_constraintTop_toTopOf="parent"
    tools:background="#c9c7c7"
    tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />

이 결과를 얻을 수 있습니다 여기에 이미지 설명 입력

참고 URL : https://stackoverflow.com/questions/40850966/wrap-content-view-inside-a-constraintlayout-stretches-outside-the-screen

반응형