Constraint Layout(1) 맛보기

RelativeLayout에 비하여 2배 가까이 성능차이 및, 뷰 애니메이션에 관련하여 장점이 있다고 판단되어 사용해보기로 하였다.

한번 써보고 싶은 생각이 있다면 참조할 페이지 2개

상세한 설명을 보고싶다면? 

구글 트레이닝 : https://developer.android.com/training/constraint-layout/index.html

따라하면서 배우는게 편하면?

구글 예제 : https://github.com/googlesamples/android-ConstraintLayoutExamples

개인적인 요약정리는 구글 예제를 열어보았다는 전제하에 진행

상대적인 위치 설정

app:layout_constraintTop_toBottomOf="@+id/button32"
app:layout_constraintRight_toRightOf="@+id/button3"
app:layout_constraintStart_toEndOf="parent"
app:layout_constraintBaseline_toBaselineOf="parent"
 
app:layout_constraintHorizontal_bias="0.5"
 
tools:layout_constraintTop_creator="1"
tools:layout_constraintBottom_creator="1"

Constraint Layout 내부의 뷰 위치는 위와 같은 속성으로 위치 설정해준다

1~4 라인을 보면 RelativeLayout 써본 사람이라면 알 수 있듯이 상대적인 위치 속성이다 

layout_constraintRight_toRightOf :  현재뷰의 오른쪽을 타겟id의 뷰의 오른쪽 방향에 위치시킨다 

top, bottom, right, left, start, end + baseline 등으로 상대위치를 설정한다

* start, end 사용시에는 한국같이 좌->우로 읽는 언어에서는 left, right 좌<-우 로 읽는 언어권에서는 right, left로 치환된다고 보면 된다

* baseline기준은 android.widget.textview 또는 그로 부터 파생된 클래스인  button과 같은 경우 사용할 수 있으며, 텍스트의 TEXT 하단선을 기준으로 정렬한다

margin은 기존 뷰와 같이 layout_marginXx 로 설정하고,

추가된 부분으로는 layout_GoneMarginXx로 View가 VIsibility가 Gone 상태일 때의 마진 설정을 별도로 할 수 있다

가이드라인

<android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        /*가이드라인 위치 설정을 percent로 주고 싶다면 */
        app:layout_constraintGuide_percent="0.5" 
        /*가이드라인 위치 설정을 절대간격으로 주고 싶다면 */
        app:layout_constraintGuide_begin="58dp"/>

Vertical Horizontal 2방향이 있으며, 유저 눈에는 보이지 않으며, 위치 설정을 위해 사용할 수 있다.

_begin, _end 로는 절대적인 가이드라인 위치 설정을 할 수 있고 

_percent로는 상대적인 percent 위치 설정을 할 수 있다

현재 뷰가 wrap_content 상태일 때 왼쪽 parent, 오른쪽 parent로 상대적인 위치가 설정된다면?

현재 뷰의 왼쪽 끝은 부모 뷰 왼쪽 끝으로, 현재 뷰 오른쪽 끝은 부모 뷰 오른쪽 끝으로 가면서 현재뷰가 늘어나는것이 아니라,

왼쪽, 오른쪽 부모뷰의 정 중앙에 위치하게 된다

이때 부모뷰의 정 중앙이 아닌, 특정 비율 위치에 위치하게 하는것이 바이어스(Bias)

app:layout_constraintLeft_toLeftOf="@+id/guidelineVerticalLeft"
app:layout_constraintRight_toRightOf="@+id/guidelineVerticalRight"
app:layout_constraintHorizontal_bias="0.33"

위와같은 속성이라면 왼쪽, 오른쪽 가이드라인 사이의 33% 위치에 현재 뷰가 위치하게 된다

GuideVerticalLeft--------------- CurrentView(0.50 또는 기본)-------------------GuideVerticalRight

GuideVerticalLeft------------CurrentView(0.33)--------------------------------GuideVerticalRight

 뷰 크기 비율로 주기(Ratio)

android:layout_width="0dp"
android:layout_height="50dp"
app:layout_constraintDimensionRatio="2:1"
//또는
app:layout_constraintDimensionRatio="w,2:1"
//--> (width는 50dp) 50dp : height = 2:1   height = 100dp
 
android:text="Test Text"
android:layout_width="100dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="2:1"
//또는
app:layout_constraintDimensionRatio="h,2:1"
//--> height는 50dp
 
 
android:text="Test Text"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="2:1"
//또는
app:layout_constraintDimensionRatio="h,2:1"
//--> height는 "Test Text" 로 자동 생성되는 뷰 width의 절반
 

뷰의 width를 height의 2배로 설정하고 싶다거나, 뷰의 height를 width의 0.5배로 설정하고 싶다면 

layout_constraintDimensionRatio 속성을 사용해서 비율로 처리할 수 있다

비율로 변경되기 원하는 layout_width 또는 layout_height를 0으로 설정해주고 

그냥 w:h의 비율 2:1 과 같이 사용하던가, 또는 명시적으로 w,2:1 (w를  h의 2배로) 또는 h,2:1 (h를 w의 1/2로) 등과 같이 사용할 수 있다