ConstraintLayout 원형 배치

안녕하세요. 삐질삐질 개발하는 개발자 삐질입니다.

오늘은 XML을 작성하는데 있어서 기준이 되는 뷰의 원형 둘레를 따라 배치해야할 일들이 종종 생기게 됩니다.

이 부분에 대해 아주 간단하게 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"

    android:orientation="vertical">

    <ImageView

        android:id="@+id/image"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="#000000"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.5"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintVertical_bias="0.5" />

    <ImageView

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:background="#E70707"

        app:layout_constraintCircle="@id/image"

        app:layout_constraintCircleAngle="0"

        app:layout_constraintCircleRadius="70dp" />

    <ImageView

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:background="#E70707"

        app:layout_constraintCircle="@id/image"

        app:layout_constraintCircleAngle="180"

        app:layout_constraintCircleRadius="70dp" />

    <ImageView

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:background="#E70707"

        app:layout_constraintCircle="@id/image"

        app:layout_constraintCircleAngle="270"

        app:layout_constraintCircleRadius="70dp" />

    <ImageView

        android:layout_width="48dp"

        android:layout_height="48dp"

        android:background="#E70707"

        app:layout_constraintCircle="@id/image"

        app:layout_constraintCircleAngle="90"

        app:layout_constraintCircleRadius="70dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 간단하게 배치할 수 있습니다.

기존의 코드에서 추가되는 코드는 단 3줄! 

   app:layout_constraintCircle="@id/image"

        app:layout_constraintCircleAngle="90"

        app:layout_constraintCircleRadius="70dp"

제약을 걸 View의 ID를 지정하고,

CircleAngle: 뷰의 중심 부분에서 0 ~ 360도 까지 각도를 지정할 수 있습니다.

CircleRadius: 중심으로 부터 반지름(마진)을 설정할 수 있습니다.

이렇게 제약을 설정하고 나면, Design탭에서는 아래와 같이 보입니다.

안드로이드 초보 개발자를 위해 아래와 같은 카카오 오픈톡을 운영 중입니다. 

https://open.kakao.com/o/gn4xqQ6