2017-01-31 9 views
2

사용하여 배경 만들기 : 내가했습니다 무엇이를 통해 내가 일반적으로 할 것입니다 상자 버튼과 레이블을 포함하고 흰색 스크림을 가진 같은 것을 만들 ConstraintLayout

<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가 아닌 버튼의 상단과 같은 높이가됩니다.

답변

2

당신이 얻는 결과는 기대할 수 있습니다 - 스크림 뷰에 버튼의 윗면에 대한 윗면을 제한하도록 지시합니다 - 여백은 여기에 포함되지 않습니다. 제약 조건은 대상에 연결되며, 제약 조건 외에도 (긍정적 인) 여백을 가질 수 있습니다. 여백은 기존 연결에만 적용됩니다.

음수 여백을 사용할 수 있으면 스크림보기의 상단 구속 조건에 하나를 설정할 수 있습니다. 아아,이 순간에는 승인되지 않았습니다. 대신에 스페이스 뷰를 사용하여이를 시뮬레이트하고 버튼 위쪽으로 제한 한 다음 스크림 뷰의 맨 위를 스페이스 뷰의 맨 위로 제한하십시오 (예 :

<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> 
).