Part1_Ch03_02 길이변환 UI 그리기 (1)

1) Constraint View

ConstraintLayout 에서 보기의 위치를 정의하려면

뷰의 가로 및 세로 제약조건을 각각 하나 이상 추가해야 한다.

 

각 뷰에는 축마다 하나 이상의 제약조건이 있어야 하며, 흔히 더 많이 필요하다.

 

---

2) 살펴보기

1) 프로젝트 생성하기

Empty Activity > chapter3 프로젝트 만들기

 

2) constraint 미지정 오류

2-1) textView 추가

activity_main.xml 에서 textView 를 추가해보자.

res > layout > acitivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="안녕하세요"
         />

</androidx.constraintlayout.widget.ConstraintLayout>

---

2-2) constraint 미지정 오류 발생

만약 위와 같이 코드를 구성한다면

아래와 같은 오류가 발생한다.

 

 

This view is not constrained.

It only has designtime positions,

so it will jump to (0,0) at runtime unless you add the constraints.

 

뷰에 제약조건이 없다. designtime positions 만 존재한다.

Supress : Add tools: ignore = “MissingConstraints” attribute

제약조건을 설정하지 않을 것이라면, “MissingConstraints” 라는 attribute 를 추가해야 한다.

---

3) constraint 추가하기

constraint 을 추가하는 방법에는 2가지가 있다.

1. Design 에서 화살표의 끝을 constraint 에 지정
2. 코드로 작성

 

화살표를 부모뷰의 오른쪽으로 붙이면,

textView 가 오른쪽에 붙는다.

 

동시에 아래 코드가 생성된다.

app:layout_constraintEnd_toEndOf="parent"

---

3-1) 가로방향 constraint

좌측 (노란색) 은 뷰에 대한 내용

우측 (초록색) 은 제약조건에 대한 내용으로 생각하자.

 

 

layout_constraintEnd_toEndOf

• layout_constraintEnd뷰의 가로방향 constraint 는 어디에 둘 것인가?

       뷰에 대한 내용.

       toEndOf부모의 끝을 제약조건으로 하겠다.

       어디를 제약조건으로 하겠다.

---

3-2) 세로방향 constraint

app:layout_constraintBottom_toBottomOf="parent"

 

• layout_constraintBottom뷰의 세로방향 constraint 는 어디에 둘 것인가?
• 뷰에 대한 내용.
• toBottomOf부모의 아래를 제약조건으로 하겠다.
• 어디를 제약조건으로 하겠다.

---

3-3) constraint 미지정 오류 해결

아래와 같이 가로/세로 constraint 이 모두 주어지면

constraint 지정하라는 오류가 사라진다.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="32dp"
        android:text="안녕하세요"
        
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" 
/>

---

3-4) 4가지 방향 constraint 지정하기

1) ConstraintView 에서

각 뷰에는 축마다 하나 이상의 제약조건이 있어야 하며, 흔히 더 많이 필요하다.

라는 설명이 있었다.

 

위 코드에는 오른쪽/아래쪽 constraint 만 지정되어있다.

 

 

 

왼쪽/위쪽 constraint 도 지정할 수 있다.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="안녕하세요"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

/>

이렇게 4가지 방향 constraint 를 모두 지정하면

textView 가 중앙에 배치된다.

 

---

3-5) bias 지정하기

constraint 를 지정하되, 중앙배열이 아닌

한 쪽으로 치우친 형태로 만들고 싶다면

 

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="안녕하세요"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.173"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.353" />

/>

위와 같이 bias 를 추가해주면 된다.

    app:`layout_constraintHorizontal_bias` = "0.173"
    app:`layout_constraintVertical_bias`     = "0.353" 

bias 는 0 (시작점) 부터 1 ( 끝점 ) 까지 범위가 있다.

app:layout_constraintVertical_bias = "0.3" 이면, 위쪽으로 치우친다.

 

app:layout_constraintVertical_bias = "0.7" 이면, 아래쪽으로 치우친다.

---

3) 전체코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="안녕하세요"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.67"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.407" />


    />

</androidx.constraintlayout.widget.ConstraintLayout>