2016-11-17 14 views
1

나는이 같은 ConstraintLayout을 설정하려면 : 1 폭 유연하고 진짜 폭으로 조정할 것 :ConstraintLayout에서 고정 여백과 동적 너비로 고르게 뷰를 배치하는 방법은 무엇입니까?

enter image description here

내가 좌우 제약, 크기 치수 비율이 1로 고정해야합니다 화면의. 나는 다음과 같은 설정 :

  1. 좌우 제약이보기
  2. 크기가 설정 8dp있다 "어떤 크기"에
  3. layout_constraintDimensionRatio = "1 : 1"내가 가진 무엇

왼쪽 및 오른쪽 제약 조건을 설정 한 뷰 (다른 제약 조건 만 남아 있음)를 제외하고 모든 뷰가 점으로 설정된다는 것입니다. 저것은 1 : 1 비율의 규칙을 적용했다.

이 레이아웃을 수정하려면 어떻게해야합니까?

이 내가 추가 체인 BYT 시도 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:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    tools:context="rs.agilesolutions.constraintlayouttest.MainActivity"> 

    <TextView 
     android:id="@+id/textView" 
     android:text="1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     android:layout_marginStart="8dp" 
     android:layout_marginLeft="8dp" 
     app:layout_constraintTop_toTopOf="parent" 
     android:layout_marginTop="16dp" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView2" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView2" 
     android:text="2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView3" 
     app:layout_constraintLeft_toRightOf="@+id/textView" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView3" 
     android:text="3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView4" 
     app:layout_constraintLeft_toRightOf="@+id/textView2" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView4" 
     android:text="4" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     style="@style/TextViewCustom" 
     app:layout_constraintRight_toLeftOf="@+id/textView5" 
     app:layout_constraintLeft_toRightOf="@+id/textView3" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:id="@+id/textView5" 
     android:text="5" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintBaseline_toBaselineOf="@+id/textView" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/textView4" 
     style="@style/TextViewCustom" 
     app:layout_constraintDimensionRatio="1:1" /> 

</android.support.constraint.ConstraintLayout> 

는 그리고이 결과 :

enter image description here

아주 가까운,하지만 충분하지.

답변

3

chains을 만들어 동일한 위젯 (예 : 한 줄당 하나의 체인)을 만들 수 있습니다. 이렇게하면 각 위젯의 치수가 동일 해집니다. 당신이 설명하는 나머지 부분은 정확해야합니다.

편집 : 여기에 몇 가지 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:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView" 
     android:text="1" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginStart="8dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     android:layout_marginTop="8dp" 
     app:layout_constraintRight_toLeftOf="@+id/textView2" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView2" 
     android:text="2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toLeftOf="@+id/textView3" 
     app:layout_constraintLeft_toRightOf="@+id/textView" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView3" 
     android:text="3" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toLeftOf="@+id/textView4" 
     app:layout_constraintLeft_toRightOf="@+id/textView2" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView4" 
     android:text="4" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toLeftOf="@+id/textView5" 
     app:layout_constraintLeft_toRightOf="@+id/textView3" 
     app:layout_constraintDimensionRatio="1:1" /> 

    <TextView 
     android:background="@color/colorAccent" 
     android:id="@+id/textView5" 
     android:text="5" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     app:layout_constraintHorizontal_weight="1" 
     app:layout_constraintTop_toTopOf="@+id/textView" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/textView4" 
     app:layout_constraintDimensionRatio="1:1" /> 

</android.support.constraint.ConstraintLayout> 

enter image description here

+0

감사합니다! 나는 노력했지만 효과가 없었다. 사실 xml 코드와 스크린 샷 결과를 넣어서 내 질문을 편집하고 실제로 무엇이 잘못되었는지 찾을 수 없습니다. 아, 그리고 스타일'TextViewCustom'은 중력을 TextView의 중심과 색상 배경으로 설정합니다. –

+0

이봐, 나는 네가 대답 할 수있는 것 하나만 줄 수있어! :) –