Android：ConstraintsLayout VS制約なしViewGroups

Question

私は同じ結果をもたらす2つのレイアウトを持っています。最初のものは制約なしで作成され、2つ目は制約を使用して作成されました。その結果は、2つの兄弟セクションから構成されます（もう一方は上にあります）。 BottomセクションはTopセクションよりも優先されるため、Bottomセクションは、Bottomセクションで必要としないスペースに準拠する必要があります。また、Bottomセクションの上部は、その内容を持つ上部によって与えられます。 Example image

制約を使用してこの動作を実現するには、他のConstraintLayoutのBottomセクションをネストしなければなりませんでした。入れ子を使わずにConstraintLayoutを使って同じ振る舞いを達成する別の方法はありますか？ 私が見つけた別の問題は、入れ子になったConstraintLayoutの中にあるビューの制約をアニメートするときに、アニメーションを実行しないということです。入れ子になったConstraintsアニメーションを実行することは可能ですか？

制約のないバージョン：

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <RelativeLayout 
     android:id="@+id/top_container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_above="@+id/bottom_container"> 

     <Button 
      android:id="@+id/remove_button" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content"/> 
    </RelativeLayout> 

    <LinearLayout 
     android:id="@+id/bottom_container" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:gravity="bottom" 
     android:layout_alignParentBottom="true"> 

     <ImageView 
      android:id="@+id/car_image" 
      android:layout_width="60dp" 
      android:layout_height="60dp" 
      android:src="@drawable/ic_directions_car_black_24dp"/> 

     <ImageView 
      android:id="@+id/loto_image" 
      android:layout_width="60dp" 
      android:layout_height="80dp" 
      android:src="@drawable/ic_spa_black_24dp"/> 
    </LinearLayout> 

</RelativeLayout> 

ConstraintLayoutバージョン：

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:id="@+id/main_constlayout_container"> 

    <View 
     android:id="@+id/top_container_view" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toTopOf="@+id/bottom_constlayout_container"/> 

    <Button 
     android:id="@+id/remove_button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent"/> 

    <android.support.constraint.ConstraintLayout 
     android:id="@+id/bottom_constlayout_container" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent"> 

     <ImageView 
      android:id="@+id/car_image" 
      android:layout_width="60dp" 
      android:layout_height="60dp" 
      app:layout_constraintBottom_toBottomOf="parent" 
      app:layout_constraintLeft_toLeftOf="parent" 
      android:src="@drawable/ic_directions_car_black_24dp"/> 

     <ImageView 
      android:id="@+id/loto_image" 
      android:layout_width="60dp" 
      android:layout_height="80dp" 
      app:layout_constraintBottom_toBottomOf="parent" 
      app:layout_constraintLeft_toRightOf="@id/car_image" 
      android:src="@drawable/ic_spa_black_24dp"/> 

    </android.support.constraint.ConstraintLayout> 

</android.support.constraint.ConstraintLayout> 

よろしく は、これらのXMLファイルを使用しています！

Answer 1

ConstraintLayoutのバージョン1.1.xに更新する場合、バリアを使用して2つのセクションを次のように区切ることができます。障壁が2つの上に浮動し、上部セクションの底部が障壁の上部に拘束されるので、障壁が浮くと、上部セクションの底部も同様に機能する。

Here 1.このスタックオーバーフローanswerがConstraintLayoutの新機能のいくつかのドキュメントを参照しているConstraintLayout 1.0.1ベータ版のリリースノートです。

画像ビューのいずれかが常に他の画像よりも大きいことがわかっている場合は、障壁を避けて、上部ビューの下部をより大きな画像ビューの上部につなぐことができます。

これらの変更を加えれば、アニメーションのどこに立っているかがわかります。

<View 
    android:id="@+id/top_container_view" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:background="#FF00FF00" 
    app:layout_constraintBottom_toTopOf="@+id/barrier" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<Button 
    android:id="@+id/remove_button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toTopOf="parent" /> 

<android.support.constraint.Barrier 
    android:id="@+id/barrier" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    app:barrierDirection="top" 
    app:constraint_referenced_ids="car_image,loto_image" /> 

<ImageView 
    android:id="@+id/car_image" 
    android:layout_width="60dp" 
    android:layout_height="60dp" 
    android:src="@drawable/ic_directions_car_black_24dp" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" /> 

<ImageView 
    android:id="@+id/loto_image" 
    android:layout_width="60dp" 
    android:layout_height="189dp" 
    android:src="@drawable/ic_spa_black_24dp" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toRightOf="@id/car_image" 
    tools:layout_editor_absoluteY="322dp" />