2017-09-21 9 views
1

저는 최근에 안드로이드 스튜디오에서 ConstraintLayout으로 재생하기 시작했습니다. (나중에 내 앱에서 사용할 수 있습니다.) 한 행에 5 개의 버튼이 있고 5 개의 행이 10 개있는 레이아웃을 만들고 싶습니다. 버튼. 버튼 전체 간격을 채우는 동안 버튼이 모두 같은 너비로 크기 조정되기를 바랄 뿐이다.안드로이드 ConstraintLayout 센터 여러개의 버튼으로 수평 정렬하기

A example of the problem:

내 현재 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:context="lotterynumbergenerator.johnferrazlopez.com.southafricanlotteryguide.other.SaveNumbers"> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="01" 
     android:textStyle="bold" 
     app:layout_constraintHorizontal_chainStyle="spread_inside" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/button2" 
     tools:layout_editor_absoluteY="16dp" /> 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="02" 
     android:textStyle="bold" 
     app:layout_constraintLeft_toRightOf="@+id/button" 
     app:layout_constraintRight_toLeftOf="@+id/button3" 
     tools:layout_editor_absoluteY="16dp" /> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="03" 
     android:textStyle="bold" 
     app:layout_constraintLeft_toRightOf="@+id/button2" 
     app:layout_constraintRight_toLeftOf="@+id/button4" 
     tools:layout_editor_absoluteY="16dp" /> 

    <Button 
     android:id="@+id/button4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="04" 
     android:textStyle="bold" 
     app:layout_constraintLeft_toRightOf="@+id/button3" 
     app:layout_constraintRight_toLeftOf="@+id/button5" 
     tools:layout_editor_absoluteY="16dp" /> 

    <Button 
     android:id="@+id/button5" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="05" 
     android:textStyle="bold" 
     app:layout_constraintLeft_toRightOf="@+id/button4" 
     app:layout_constraintRight_toRightOf="parent" 
     tools:layout_editor_absoluteY="16dp" /> 

    <Button 
     android:id="@+id/button6" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="06" 
     tools:layout_editor_absoluteY="64dp" 
     app:layout_constraintRight_toLeftOf="@+id/button7" 
     app:layout_constraintLeft_toLeftOf="parent" /> 

    <Button 
     android:id="@+id/button7" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="07" 
     tools:layout_editor_absoluteY="64dp" 
     app:layout_constraintRight_toLeftOf="@+id/button8" 
     app:layout_constraintLeft_toRightOf="@+id/button6" /> 

    <Button 
     android:id="@+id/button8" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="08" 
     tools:layout_editor_absoluteY="64dp" 
     app:layout_constraintRight_toLeftOf="@+id/button9" 
     app:layout_constraintLeft_toRightOf="@+id/button7" /> 

    <Button 
     android:id="@+id/button9" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="09" 
     tools:layout_editor_absoluteY="64dp" 
     app:layout_constraintRight_toLeftOf="@+id/button10" 
     app:layout_constraintLeft_toRightOf="@+id/button8" /> 

    <Button 
     android:id="@+id/button10" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="10" 
     tools:layout_editor_absoluteY="64dp" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintLeft_toRightOf="@+id/button9" /> 
</android.support.constraint.ConstraintLayout> 

나는 XML에서 볼 또 다른 점은 태그에서이 메시지가 "이보기는 세로로 제한되어 있지 않은 것입니다 : 런타임에 왼쪽으로 이동합니다 수직 제약 조건을 추가하지 않는 한 "

미리 감사드립니다.

편집 : 여기

How i want it to space out on a bigger scrn

답변

3

은 여백으로 10dp을 사용하여 찾고있는 무슨의 샘플입니다. 하나의 행을 만들었지 만 추가 행은 동일한 패턴을 따릅니다. 이 모형은 "확산"체인 스타일의 가로 체인을 사용합니다. (app:layout_constraintHorizontal_chainStyle="spread") 버튼 폭은 "0dp"("match constraints")로 설정됩니다. 시작과 끝 마진은 간격을 올바르게 유지하도록합니다. 레이아웃은 세로 및 가로 및 다양한 화면 크기에서 작동합니다.

각 단추를 부모 상단에 연결하는 제약 조건을 추가하면 "수직으로 제한되지 않음"오류 메시지가 처리됩니다. 뷰는 가로 및 세로로 구속되어야합니다.

세로

enter image description here

풍경 enter image description here

그리고 XML :

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

    <Button 
     android:id="@+id/button" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="10dp" 
     android:layout_marginStart="10dp" 
     android:layout_marginTop="8dp" 
     android:text="01" 
     android:textStyle="bold" 
     app:layout_constraintEnd_toStartOf="@+id/button2" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintHorizontal_chainStyle="spread" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="10dp" 
     android:layout_marginTop="8dp" 
     android:text="02" 
     android:textStyle="bold" 
     app:layout_constraintEnd_toStartOf="@+id/button3" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintStart_toEndOf="@+id/button" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <Button 
     android:id="@+id/button3" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="10dp" 
     android:layout_marginTop="8dp" 
     android:text="03" 
     android:textStyle="bold" 
     app:layout_constraintEnd_toStartOf="@+id/button4" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintStart_toEndOf="@+id/button2" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <Button 
     android:id="@+id/button4" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="10dp" 
     android:layout_marginTop="8dp" 
     android:text="04" 
     android:textStyle="bold" 
     app:layout_constraintEnd_toStartOf="@+id/button5" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintStart_toEndOf="@+id/button3" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <Button 
     android:id="@+id/button5" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="10dp" 
     android:layout_marginTop="8dp" 
     android:text="05" 
     android:textStyle="bold" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintHorizontal_bias="0.5" 
     app:layout_constraintStart_toEndOf="@+id/button4" 
     app:layout_constraintTop_toTopOf="parent" /> 

</android.support.constraint.ConstraintLayout> 
+0

내가 모든 버튼이 고르게 퍼져 원이다. 그래서 디스플레이의 크기에 관계없이 버튼은 모두 축소되거나 커집니다. 기본적으로 그들은 모두 10dp의 동일한 마진을 가져야합니다. 나는 내가 원하는 것을 보여주기 위해 나의 대답을 편집했다. 감사합니다 –

+0

@Think_Twice 업데이트 된 답변보기. – Cheticamp

0

당신은 vertic에 각 행의 모든 ​​첫 번째 버튼을 연결하면 al chain을 사용하면 오류 메시지를 없애고 줄의 높이도 자동으로 조정됩니다. 0dp 또는 40dp 또는 @dimen/buttonHeight과 같은 고정 값을 사용하여 버튼 높이를 최적화하십시오. 코드 및 Cheticamp의 코드에

건물, 여기에 당신이 할 수있는 것입니다 : 내가 무엇을 의미하는지

<Button 
    android:id="@+id/button" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="10dp" 
    android:layout_marginTop="8dp" 
    android:layout_marginBottom="5dp" 
    android:text="01" 
    android:textStyle="bold" 
    app:layout_constraintEnd_toStartOf="@+id/button2" 
    app:layout_constraintHorizontal_chainStyle="spread" 
    app:layout_constraintVertical_chainStyle="spread" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintBottom_toTopOf="@+id/button6" 
    /> 

<Button 
    android:id="@+id/button2" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="02" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button" 
    app:layout_constraintEnd_toStartOf="@+id/button3" 
    app:layout_constraintTop_toTopOf="@+id/button" 
    app:layout_constraintBottom_toBottomOf="@+id/button" 
    /> 

<Button 
    android:id="@+id/button3" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="03" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button2" 
    app:layout_constraintEnd_toStartOf="@+id/button4" 
    app:layout_constraintTop_toTopOf="@+id/button" 
    app:layout_constraintBottom_toBottomOf="@+id/button" 
    /> 

<Button 
    android:id="@+id/button4" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="04" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button3" 
    app:layout_constraintEnd_toStartOf="@+id/button5" 
    app:layout_constraintTop_toTopOf="@+id/button" 
    app:layout_constraintBottom_toBottomOf="@+id/button" 
    /> 

<Button 
    android:id="@+id/button5" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="10dp" 
    android:layout_marginStart="5dp" 
    android:text="05" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button4" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/button" 
    app:layout_constraintBottom_toBottomOf="@+id/button" 
    /> 

<Button 
    android:id="@+id/button6" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="10dp" 
    android:layout_marginTop="5dp" 
    android:layout_marginBottom="5dp" 
    android:text="06" 
    android:textStyle="bold" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintEnd_toStartOf="@+id/button7" 
    app:layout_constraintTop_toBottomOf="@+id/button" 
    app:layout_constraintBottom_toTopOf="@+id/button11" 
    /> 

<Button 
    android:id="@+id/button7" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="07" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button6" 
    app:layout_constraintEnd_toStartOf="@+id/button8" 
    app:layout_constraintTop_toTopOf="@+id/button6" 
    app:layout_constraintBottom_toBottomOf="@+id/button6" 
    /> 

<Button 
    android:id="@+id/button8" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="08" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button7" 
    app:layout_constraintEnd_toStartOf="@+id/button9" 
    app:layout_constraintTop_toTopOf="@+id/button6" 
    app:layout_constraintBottom_toBottomOf="@+id/button6" 
    /> 

<Button 
    android:id="@+id/button9" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="09" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button8" 
    app:layout_constraintEnd_toStartOf="@+id/button10" 
    app:layout_constraintTop_toTopOf="@+id/button6" 
    app:layout_constraintBottom_toBottomOf="@+id/button6" 
    /> 

<Button 
    android:id="@+id/button10" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="10dp" 
    android:layout_marginStart="5dp" 
    android:text="10" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button9" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/button6" 
    app:layout_constraintBottom_toBottomOf="@+id/button6" 
    /> 

<Button 
    android:id="@+id/button11" 
    android:layout_width="0dp" 
    android:layout_height="wrap_content" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="10dp" 
    android:layout_marginTop="5dp" 
    android:layout_marginBottom="8dp" 
    android:text="11" 
    android:textStyle="bold" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintEnd_toStartOf="@+id/button7" 
    app:layout_constraintTop_toBottomOf="@+id/button6" 
    app:layout_constraintBottom_toBottomOf="parent" 
    /> 

<Button 
    android:id="@+id/button12" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="12" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button11" 
    app:layout_constraintEnd_toStartOf="@+id/button13" 
    app:layout_constraintTop_toTopOf="@+id/button11" 
    app:layout_constraintBottom_toBottomOf="@+id/button11" 
    /> 

<Button 
    android:id="@+id/button13" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="13" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button12" 
    app:layout_constraintEnd_toStartOf="@+id/button14" 
    app:layout_constraintTop_toTopOf="@+id/button11" 
    app:layout_constraintBottom_toBottomOf="@+id/button11" 
    /> 

<Button 
    android:id="@+id/button14" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="5dp" 
    android:layout_marginStart="5dp" 
    android:text="14" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button13" 
    app:layout_constraintEnd_toStartOf="@+id/button14" 
    app:layout_constraintTop_toTopOf="@+id/button11" 
    app:layout_constraintBottom_toBottomOf="@+id/button11" 
    /> 

<Button 
    android:id="@+id/button15" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginEnd="10dp" 
    android:layout_marginStart="5dp" 
    android:text="15" 
    android:textStyle="bold" 
    app:layout_constraintStart_toEndOf="@+id/button14" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/button11" 
    app:layout_constraintBottom_toBottomOf="@+id/button11" 
    />