Evenly spacing views using ConstraintLayout
A common use for LinearLayout is to evenly space (weight) views, for example: 
새로운 기능을 사용하여 이와 같이 균일한 간격의 뷰를 구현하는 방법은 무엇입니까?ConstraintLayout?
ConstraintLayout참고용 링크 : 블로그 포스트, I/O세션 비디오
다음을 사용하여 이를 달성하는 두 가지 방법이 있습니다.ConstraintLayout: 체인과 지침.체인을 사용하려면 다음을 사용하고 있는지 확인합니다.ConstraintLayoutAndroid Studio에서 시각적 레이아웃 편집기를 사용하려면 Android Studio 2.3 Beta 1 이상을 사용해야 합니다.
Method 1 - Using Chains
Open the layout editor and add your widgets as normal, adding parent constraints as needed. In this case, I have added two buttons with constraints to the bottom of the parent and side of the parent (left side for Save button and right side for Share button):
Note that in this state, if I flip to landscape view, the views do not fill the parent but are anchored to the corners:
Highlight both views, either by Ctrl/Cmd clicking or by dragging a box around the views:
Then right-click on the views and choose "Center Horizontally":
이렇게 하면 뷰 간에 양방향 연결이 설정됩니다(이것이 체인이 정의되는 방법입니다).기본적으로 체인 스타일은 XML 특성이 포함되지 않은 경우에도 적용되는 "spread"입니다.이 체인 스타일을 고수하되 뷰의 폭을 다음과 같이 설정합니다.0dp뷰가 사용 가능한 공간을 채워 상위 영역에 고르게 퍼지도록 합니다.
This is more noticeable in landscape view:
If you prefer to skip the layout editor, the resulting XML will look like:
<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">
<Button
android:id="@+id/button_save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/button_save_text"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="4dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="@+id/button_share"
app:layout_constraintHorizontal_chainStyle="spread" />
<Button
android:id="@+id/button_share"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/button_share_text"
android:layout_marginStart="4dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintLeft_toRightOf="@+id/button_save"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Details:
- 각 항목의 너비 설정
0dp아니면MATCH_CONSTRAINT보기가 상위 항목을 채우도록 합니다(선택 사항). - the views must be linked together bidirectionally (right of save button links to share button, left of share button links to save button), this will happen automatically via the layout editor when choosing "Center Horizontally"
- 체인의 첫번째 뷰는 다음을 통해 체인 스타일을 지정할 수 있습니다.
layout_constraintHorizontal_chainStyle, 다양한 체인 스타일에 대한 설명서를 참조하십시오. 체인 스타일이 생략된 경우 기본값은 "spread"입니다. - 체인의 가중치는 다음을 통해 조정될 수 있습니다.
layout_constraintHorizontal_weight - 이 예제는 수평 체인의 경우이고 수직 체인에 해당하는 속성이 있습니다.
방법 2 - 가이드라인 사용
편집기에서 레이아웃을 열고 가이드라인 버튼을 클릭합니다.
그런 다음 "수직 가이드라인 추가"를 선택합니다.
기본적으로 상대값(좌향 화살표로 표시)으로 왼쪽에 고정되는 새 지침이 나타납니다.
왼쪽 방향 화살표를 클릭하여 백분율 값으로 전환한 다음 가이드라인을 50% 표시로 끕니다.
가이드라인은 이제 다른 보기의 앵커로 사용할 수 있습니다.예를 들어, Save 버튼의 오른쪽과 Share 버튼의 왼쪽을 가이드라인에 첨부했습니다.
뷰가 사용 가능한 공간을 채우도록 하려면 제약 조건을 "모든 크기"(수평으로 실행되는 꼬불꼬불한 선)로 설정해야 합니다.
(는 (과 는 )를 layout_width0dp).
레이아웃 편집기를 사용하지 않고 XML로 가이드라인을 쉽게 만들 수도 있습니다.
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
동일한 선에 너비로 두 개의 뷰를 만들려면 다음을 정의하기만 하면 됩니다.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 1"
app:layout_constraintEnd_toStartOf="@+id/button2"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button1" />
</android.support.constraint.ConstraintLayout>
메모
- 폭 0dp (
MATCH_CONSTRAINT) - 의 제약
button1그리고.button2의 것을 좋아해야만 .
결과
이 원한다면 View1보다 큰View2을 사용할 수 .weight아니면percent.
예를 들어,예,View1=*세로= 2 *View2폭 사용 중량
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 3"
app:layout_constraintEnd_toStartOf="@+id/button4"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toStartOf="parent"
/>
<Button
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@+id/button3"
/>
</android.support.constraint.ConstraintLayout>
결과
예를 들어, ,View1=*세로= 2 *View2폭 사용 백분율
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:id="@+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 5"
app:layout_constraintEnd_toStartOf="@+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintWidth_percent="0.667"
/>
<Button
android:id="@+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button 6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/button5"
app:layout_constraintWidth_percent="0.333"
/>
</android.support.constraint.ConstraintLayout>
결과
그게 누군가에게 도움이 된다면
열쇠는 여기에 있습니다.app:layout_constraintHorizontal_weight="1"그리고.
제약 조건 레이아웃에서 가장 좋은 점은 순환 의존성을 지원한다는 것입니다. 그리고 이것이 바로 제가 사용한 것입니다.
첫째아이의 경우
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
둘째아이의 경우
app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
여기 완전한 데모가 있습니다.
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputParent"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<EditText
android:id="@+id/editTextParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/state" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputFirstChild"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="@+id/textInputSecondChild"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textInputParent">
<EditText
android:id="@+id/editTextChildOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/pin_code" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/textInputSecondChild"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/textInputFirstChild"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textInputParent">
<EditText
android:id="@+id/editTextChildSecond"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/country" />
</android.support.design.widget.TextInputLayout>
가중치가 부여된 체인에 대해서 읽어보셔야 합니다.코드의 예는 여기에 있습니다.
<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="wrap_content"
>
<TextView
android:id="@+id/figure_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toStartOf="@id/figure_2"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
tools:text="1"
/>
<TextView
android:id="@+id/figure_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toStartOf="@id/figure_3"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/figure_1"
tools:text="2"
/>
<TextView
android:id="@+id/figure_3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toStartOf="@id/figure_4"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/figure_2"
tools:text="3"
/>
<TextView
android:id="@+id/figure_4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/figure_3"
tools:text="4"
/>
</android.support.constraint.ConstraintLayout>
그래서 세트android:layout_width="0dp",app:layout_constraintHorizontal_weight="1"모든 뷰를 이웃과 연결할 수 있습니다.
app:layout_constraintStart_toEndOf="@id/figure_2"
app:layout_constraintEnd_toStartOf="@id/figure_4"
체인으로 연결된 항목이 있으면 상대 레이아웃처럼 항목에 가중치를 사용하여 균일한 간격을 유지할 수 있습니다.아래 예에서는 크기가 다른 텍스트 보기로 균일한 간격을 유지하는 방법을 보여 줍니다.
<TextView1
app:layout_constraintHorizontal_weight="1" />
<TextView2
app:layout_constraintHorizontal_weight="1" />
<TextView3
app:layout_constraintHorizontal_weight="1" />
<TextView4
app:layout_constraintHorizontal_weight="1" />
언급URL : https://stackoverflow.com/questions/37518745/evenly-spacing-views-using-constraintlayout
'programing' 카테고리의 다른 글
| Spring HATEOAS 내장 리소스 지원 (0) | 2023.09.13 |
|---|---|
| Context.startForegroundService()가 Service.startForeground()를 호출하지 않았습니다. (0) | 2023.09.13 |
| 컴파일된 .apk를 장치에 설치하려고 하면 INSTALL_FAILED_UPDATE_INCOBLATE (0) | 2023.09.13 |
| Concat 스크립트 순서대로 Gulp (0) | 2023.09.13 |
| GCC linaro 컴파일러가 "알 수 없는 유형 name size_t" 오류를 던집니다. (0) | 2023.09.13 |