ConstraintLayout에서 뷰를 세로 또는 가로로 배치하는 방법은 무엇입니까?

Question

여기에 3 개 전망과 함께 Constraintlayout입니다 :

<?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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/iv_profile_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     app:layout_constraintBottom_toTopOf="@+id/tv_name" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"/> 

    <TextView 
     android:id="@+id/tv_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/iv_profile_image" /> 

    <TextView 
     android:id="@+id/tv_headline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/tv_name" /> 

</android.support.constraint.ConstraintLayout> 

결과 :

당신이 볼 수 있듯이, 각 뷰 사이에 큰 차이가있다. 이러한 틈을 제거하고 화면 중앙에 배치하려면 어떻게합니까? RelativeLayout 또는 LinearLayout을 사용하여이 작업을 쉽게 수행 할 수 있지만이 ConstraintLayout에서 어떻게 할 수 있습니까? ConstraintLayout이 RelativeLayout을 대신한다고 생각하십니까?

Answer 1

뷰에 두 개의 상응하는 제약 조건이있는 경우 ConstraintLayout은 해당 제약 조건간에 뷰의 중심을 맞 춥니 다. 이것이 레이아웃에서 일어나는 일입니다.

화면 가운데에 뷰를 쌓아 올리려는 방법 중 하나는 packed chain을 사용하는 것입니다. 여기

은 XML입니다 :

여기에 수직 포장 체인을 사용하여 레이아웃입니다. 보기가 수직으로 제한되는 방법에 유의하십시오.

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

    <ImageView 
     android:id="@+id/iv_profile_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:src="@mipmap/ic_launcher" 
     app:layout_constraintBottom_toTopOf="@+id/tv_name" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_chainStyle="packed" /> 

    <TextView 
     android:id="@+id/tv_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="tv_name" 
     app:layout_constraintBottom_toTopOf="@+id/tv_headline" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" /> 

    <TextView 
     android:id="@+id/tv_headline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="tv_headline" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/tv_name" /> 

</android.support.constraint.ConstraintLayout> 

Answer 2

ConstraintLayouts는 평범한 RelativeLayouts보다보기 계층이 더 아름답고 성능이 좋다고합니다.

나는 이상한 행동을 일으킬 수있는 몇 가지 것을 봅니다. 이 뷰의 예를 들면 다음과 같습니다

<TextView 
    android:id="@+id/tv_name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/iv_profile_image" /> 

이보기의 상단은 @ + ID/iv_profile_image 뷰의 상단에 정렬되어야한다고 말한다. 이보기의 상단이 하단의 @ + id/iv_profile_image-view와 정렬되어야한다는 것을 의미하지 않습니까? 다른 뷰에도 계속 적용됩니다 ...

Answer 3

이

난 항상 선호하는 당신을 생각 don'nt이도 같이 구현할 수 left,right,top and bottom

같은 네 constraints을 사용하기 위해, 당신

• 우리를 위해 도움이되었다이를했습니다 시도 Drag and Drop 프로그래밍 방식으로 접근 할 수도 있습니다.

당신에게 도와 10

<?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" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 
    android:id="@+id/iv_profile_image" 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    app:layout_constraintBottom_toTopOf="@+id/tv_name" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent"/> 

<TextView 
    android:id="@+id/tv_name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toTopOf="@+id/tv_headline" /> 

<TextView 
    android:id="@+id/tv_headline" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/tv_name" /> 

    </android.support.constraint.ConstraintLayout> 

---

해피