2017-09-30 12 views
1

여기에 3 개 전망과 함께 Constraintlayout입니다 :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> 

결과 :

enter image description here

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

답변

3

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

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

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

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와 정렬되어야한다는 것을 의미하지 않습니까? 다른 뷰에도 계속 적용됩니다 ...

0

  • 난 항상 선호하는 당신을 생각 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> 
    

    해피