CardView in ConstraintLayout Höhe nicht umhüllen

Question

CardView in ConstraintLayout Höhe nicht einwickelnd.

die similar issue mit stabiler CL Bibliothek Ausrichtung

compile 'com.android.support.constraint:constraint-layout:1.0.2' 

Android Studio: 2.3.2

Beobachtungen:

1. fest codierte cardview-Höheneinstellung werden das Problem behoben.
2. Ändern von CardView mit Fixes RelativeLayout.

Gibt es immer noch eine issue mit Cardview, die es schwer findet, ConstraintLayout zu bewältigen.

XML:

<?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="match_parent" 
    tools:layout_editor_absoluteX="0dp" 
    tools:layout_editor_absoluteY="25dp"> 


    <android.support.v7.widget.CardView 
     android:id="@+id/cardView" 
     android:layout_width="0dp" 
     android:layout_height="122dp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginStart="8dp" 
     app:cardBackgroundColor="@color/io15_blue_grey_100" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHeight_default="wrap" 
     app:layout_constraintHorizontal_bias="0.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintWidth_default="spread"> 

     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <ImageView 
       android:id="@+id/mobLeftIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="8dp" 
       android:layout_marginLeft="16dp" 
       android:layout_marginRight="16dp" 
       android:layout_marginTop="8dp" 
       app:layout_constraintBottom_toBottomOf="@+id/mobInputLayout" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintRight_toLeftOf="@+id/mobInputLayout" 
       app:layout_constraintTop_toTopOf="@+id/mobInputLayout" 
       app:srcCompat="@drawable/ic_up" /> 

      <android.support.design.widget.TextInputLayout 
       android:id="@+id/mobInputLayout" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="8dp" 
       app:layout_constraintLeft_toRightOf="@+id/mobLeftIcon" 
       app:layout_constraintRight_toRightOf="parent" 
       app:layout_constraintTop_toTopOf="parent"> 

       <EditText 
        android:id="@+id/editText4" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="Mobile Number" 
        android:text="123123123" /> 
      </android.support.design.widget.TextInputLayout> 

      <ImageView 
       android:id="@+id/phoneLeftIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="8dp" 
       android:layout_marginLeft="16dp" 
       android:layout_marginRight="16dp" 
       android:layout_marginTop="8dp" 
       app:layout_constraintBottom_toBottomOf="@+id/phoneInputLayout" 
       app:layout_constraintLeft_toLeftOf="parent" 
       app:layout_constraintRight_toLeftOf="@+id/phoneInputLayout" 
       app:layout_constraintTop_toTopOf="@+id/phoneInputLayout" 
       app:srcCompat="@drawable/ic_up" /> 

      <android.support.design.widget.TextInputLayout 
       android:id="@+id/phoneInputLayout" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="8dp" 
       app:layout_constraintLeft_toRightOf="@+id/phoneLeftIcon" 
       app:layout_constraintRight_toRightOf="parent" 
       app:layout_constraintTop_toBottomOf="@id/mobInputLayout"> 

       <EditText 
        android:id="@+id/editText5" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="Telphone Number" 
        android:text="123123123" /> 
      </android.support.design.widget.TextInputLayout> 

     </android.support.constraint.ConstraintLayout> 

    </android.support.v7.widget.CardView> 

</android.support.constraint.ConstraintLayout> 

Screenshot:

Answer 1

<android.support.v7.widget.CardView 
 
     android:id="@+id/cardView" 
 
     android:layout_width="0dp" 
 
     android:layout_height="122dp"

Sie die Höhe als 0DP verwenden können und verwenden Sie die Linie

 app:layout_constraintHeight_default="wrap"

Answer 2

Um CardView Wrap Inhalt von ConstraintLayout vertreten zu machen, haben Sie 3 Ketten Ansichten innerhalb ConstraintLayout hinzuzufügen:

1. horizontale Ausbreitung Kette zwischen mobLeftIcon und mobInputLayout
2. horizontale Ausbreitung Kette zwischen phoneLeftIcon und phoneInputLayout
3. Vertikale verteilte Kette zwischen mobInputLayout und phoneInputLayout

Siehe diesen Screenshot von Layouteditor:

---

Hier ist die letzte Quellcode für Ihr Layout:

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

    <android.support.v7.widget.CardView 
     android:id="@+id/cardView" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginBottom="8dp" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent"> 

     <android.support.constraint.ConstraintLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"> 

      <ImageView 
       android:id="@+id/mobLeftIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="8dp" 
       android:layout_marginStart="16dp" 
       android:layout_marginBottom="8dp" 
       app:srcCompat="@drawable/ic_up" 
       app:layout_constraintTop_toTopOf="@+id/mobInputLayout" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintBottom_toBottomOf="@+id/mobInputLayout" 
       app:layout_constraintEnd_toStartOf="@+id/mobInputLayout" 
       app:layout_constraintHorizontal_chainStyle="spread" /> 

      <android.support.design.widget.TextInputLayout 
       android:id="@+id/mobInputLayout" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="8dp" 
       android:layout_marginStart="16dp" 
       android:layout_marginEnd="8dp" 
       app:layout_constraintTop_toTopOf="parent" 
       app:layout_constraintStart_toEndOf="@+id/mobLeftIcon" 
       app:layout_constraintEnd_toEndOf="parent" 
       app:layout_constraintBottom_toTopOf="@+id/phoneInputLayout" 
       app:layout_constraintVertical_chainStyle="spread"> 

       <EditText 
        android:id="@+id/editText4" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="Mobile Number" 
        android:text="123123123" /> 
      </android.support.design.widget.TextInputLayout> 

      <ImageView 
       android:id="@+id/phoneLeftIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="8dp" 
       android:layout_marginStart="16dp" 
       android:layout_marginBottom="8dp" 
       app:srcCompat="@drawable/ic_up" 
       app:layout_constraintTop_toTopOf="@+id/phoneInputLayout" 
       app:layout_constraintStart_toStartOf="parent" 
       app:layout_constraintBottom_toBottomOf="@+id/phoneInputLayout" 
       app:layout_constraintEnd_toStartOf="@+id/phoneInputLayout" 
       app:layout_constraintHorizontal_chainStyle="spread" /> 

      <android.support.design.widget.TextInputLayout 
       android:id="@+id/phoneInputLayout" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="8dp" 
       android:layout_marginStart="16dp" 
       android:layout_marginEnd="8dp" 
       app:layout_constraintTop_toBottomOf="@+id/mobInputLayout" 
       app:layout_constraintStart_toEndOf="@+id/phoneLeftIcon" 
       app:layout_constraintEnd_toEndOf="parent" 
       app:layout_constraintBottom_toBottomOf="parent"> 

       <EditText 
        android:id="@+id/editText5" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:hint="Telphone Number" 
        android:text="123123123" /> 

      </android.support.design.widget.TextInputLayout> 

     </android.support.constraint.ConstraintLayout> 

    </android.support.v7.widget.CardView> 

</android.support.constraint.ConstraintLayout> 

Als Ergebnis, erhalten Sie etwas wie: