Создание фона с помощью ConstraintLayout

Question

Я хочу создать что-то вроде ящика, содержащего кнопку и метку, и имеющий белый холстом, который обычно делается с помощью:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:layout_alignParentBottom=true 
     android:background="#99ffffff 
     android:gravity="center_horizontal"> 
     <Button 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Button Text" 
      android:layout_margin="8dp"> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Label Text" 
      android:layout_margin="8dp"/> 
    </LinearLayout> 
</RelativeLayout> 

Что я сделал было:

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <View 
     android:id="@+id/scrim 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:background="#99ffffff" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/button"/> 
    <Button 
     android:id="@+id/button 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toTopOf="@+id/label"/> 
    <TextView 
     android:id="@+id/label 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent"/> 
</android.support.constraint.ConstraintLayout> 

Идея состоит в том, чтобы создать представление «Стрим», которое ограничено снизу родительской и верхней к верхней части кнопки, кнопка, расположенная поверх TextView и TextView, которая ограничена в нижней части родительского элемента ,

Проблема заключается в том, что холст не учитывает край кнопки, т. Е. Верхняя часть холста находится заподлицо с верхней частью кнопки вместо 8dp над ней.

Answer 1

Ожидаемый результат: вы указываете свой холст View, чтобы ограничить его верхнюю сторону верхней стороной кнопки - здесь нет поля. Ограничение соединяется с целью и может иметь (положительный) запас в дополнение к нему; поля будут применяться только к существующим соединениям.

Если бы мы могли использовать отрицательные поля, вы можете установить один из них на верхнем ограничении вида холста. Увы, в данный момент это не разрешено. Вместо этого вы можете использовать пространство, чтобы имитировать это: ограничить его верхнюю часть кнопки, а затем ограничить верхнюю часть холста в верхней части пространства, например:

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

    <View 
     android:id="@+id/scrim" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:background="#99ff00ff" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/topButton" /> 

    <Space 
     android:id="@+id/topButton" 
     android:layout_width="8dp" 
     android:layout_height="8dp" 
     app:layout_constraintBottom_toTopOf="@+id/button" 
     app:layout_constraintLeft_toLeftOf="@+id/button" /> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="Button Text" 
     app:layout_constraintBottom_toTopOf="@+id/label" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" /> 

    <TextView 
     android:id="@+id/label" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="8dp" 
     android:text="Label Text" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" /> 

</android.support.constraint.ConstraintLayout>