정상에서 IT를 외치다

[Android, ConstraintLayout, GuideLine] 2. ConstraintLayout 가이드라인 설정하기 본문

안드로이드

[Android, ConstraintLayout, GuideLine] 2. ConstraintLayout 가이드라인 설정하기

Black-Jin 2018. 5. 18. 18:04
반응형

ConstraintLayout 에서 가이드 라인을 설정하는 법에 대해 포스팅 하겠습니다.


ConstraintLayout 1. 체인

ConstraintLayout 2. 가이드라인 

ConstraintLayout 3. 배리어 


레이아웃 상에서 가이드 라인을 그리게 되면 그 값을 기준으로 뷰들을 배치시킬 수 있습니다.


<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />


위와 같이 가이드 라인을 설정 하면 왼쪽에서부터 100dp 떨어진 곳에 가상의 세로 선이 그어집니다.


app:layout_constraintGuide_percent="0.2"


또는 다음과 같이 퍼센트를 통해서 배치할수 있습니다. (1.0 ~ 0.0)


그럼 그 선을 시준으로 뷰를 배치 할 수 있는데요


아래와 같이 코드를 설정하면 

<?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=".MainActivity">

<TextView
android:text="BlackJin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="@id/guideline"
app:layout_constraintBottom_toBottomOf="parent"/>

<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />

<TextView
android:text="Welcom tistory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
app:layout_constraintStart_toEndOf="@id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>


짜잔!


세로줄의 가이드 라인을 기준으로 왼쪽에 BlackJin 이 붙어있고


오른쪽에 Welcom tistory 가 marginLeft 10dp 로 붙어있게 됩니다.



반응형
Comments