Constraint Layout에서 할 수 없는 걸 찾아봤어요.

개인적으로 Relative Layout으로 쓰면 자유도가 크게 높아진다고 생각해서 Relative Layout이 할 수 있는 일을 Constraint Layout으로 써 보려고 합니다.
예전에 썼던 거.
RelativeLayout 사용 방법
결론부터 말하자면, 나는 할 수 없는 일이 없다고 생각한다.
다만, 어려운 부분과 사소한 수정이 이뤄질 때는 어떻게 변할지 다소 불안한 느낌이 든다.

여러 관점을 병렬하여 중심으로 하다


이런 거.Linter Layout의 경우 중첩이 추가됩니다.

LinerLayout 시
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="スター" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_star" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_star" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/btn_star" />
    </LinearLayout>
</LinearLayout>

RelativeLayout의 경우
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="スター" />

    <!-- 真ん中 -->
    <ImageView
        android:id="@+id/star2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/text"
        android:src="@android:drawable/btn_star" />

    <!--  -->
    <ImageView
        android:id="@+id/star1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toStartOf="@id/star2"
        android:layout_below="@id/text"
        android:src="@android:drawable/btn_star" />

    <!--  -->
    <ImageView
        android:id="@+id/star3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/star2"
        android:layout_below="@id/text"
        android:src="@android:drawable/btn_star" />
</RelativeLayout>

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:text="スター"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageView
        android:src="@android:drawable/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageView
        android:src="@android:drawable/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView2"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        app:layout_constraintBottom_toBottomOf="@+id/imageView1"
        app:layout_constraintTop_toTopOf="@+id/imageView1" />

    <ImageView
        android:src="@android:drawable/btn_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView3"
        app:layout_constraintBottom_toBottomOf="@+id/imageView1"
        app:layout_constraintTop_toTopOf="@+id/imageView1"
        app:layout_constraintLeft_toRightOf="@+id/textView" />
</android.support.constraint.ConstraintLayout>
다 했어!

어플리케이션 패러디


괜찮을 것 같아 리플레이 레이트와 컨스트레이트 레이트로 즐겨 먹는 로그 앱 레이아웃을 만들었다.
검색 결과에 나타나는 칸을 눈으로 보았다.
이미지와 디테일이 잘 어울려요.왼쪽은 Relative, 오른쪽은 Constraint입니다.
 
쓴 소스는 여기 뒀어요.
https://github.com/kojimamasahiro/CopyTabelogLayout
끼워 넣는 수량은 모두 같다.
그렇게 지도 모른다, 아마, 아마...

끝말


좋은 곳
즐거우실 수 있어요.직관적으로 사용할 수 있어서 좋아요.
디자인이 잘 되어 있어요.네스트도 적습니다.
좋지 않은 곳
· 제약으로 인해 링크된 View로 변경되었습니다.
무겁다제약할 때 애니메이션이 무거워요?
익숙해졌다는 말도 있었지만, 결과적으로 Relative Layout으로 제작해 더 빨리 완성했다.
마음대로 다른 곳으로 이동하는 데다 변경까지 하기 때문에 그곳은 고통스럽다.
응, 베타 버전이니까 정식 버전이 나오면 쓸 수 있을 것 같아.
콘straintLayout의 장점 중 하나는 플러그인이 가장 적은 레이아웃을 자동으로 만들 수 있다는 것이기 때문에 정식 버전이 나오면 플러그인이 줄어들지 않는 현황 앱의 레이아웃을 콘straintLayout으로 확인하고 싶다.

좋은 웹페이지 즐겨찾기