JetPack Compose 9편 : ConstraintLayout

	class MainActivity : ComponentActivity() {
    @SuppressLint("InvalidColorHexValue")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        //xml은 setContentView

        setContent {
            //ConstraintSet 추가 먼저!
            val constraints = ConstraintSet {
                val greenBox = createRefFor("greenbox")
                val redBox = createRefFor("redbox")

                //제약 정의
                constrain(greenBox) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                constrain(redBox) {
                    top.linkTo(parent.top)
                    start.linkTo(greenBox.end)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
            }

            //레이아웃 추가
            ConstraintLayout(constraints, modifier = Modifier.fillMaxSize()) {
                Box(modifier = Modifier
                    .background(Color.Green)
                    .layoutId("greenbox")
                )
                Box(modifier = Modifier
                    .background(Color.Red)
                    .layoutId("redbox")
                )
            }

        }
    }
}

class MainActivity : ComponentActivity() {
    @SuppressLint("InvalidColorHexValue")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        //xml은 setContentView

        setContent {
            //ConstraintSet 추가 먼저!
            val constraints = ConstraintSet {
                val greenBox = createRefFor("greenbox")
                val redBox = createRefFor("redbox")
                //가이드라인
                val guideline = createGuidelineFromTop(0.5f) //화면 중간을 가로지르는 가이드라인

                //제약 정의
                constrain(greenBox) {
                    top.linkTo(guideline)
                    //top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                constrain(redBox) {
                    top.linkTo(parent.top)
                    start.linkTo(greenBox.end)
                    end.linkTo(parent.end)
                    width = Dimension.value(100.dp)
                    height = Dimension.value(100.dp)
                }
                //체인 걸기
                //가로 방향으로 하나의 묶음(체인)으로 연결, 체인의 전체 폭을 기준으로 정렬됨
                //A.end ↔ B.start
                //B.start ↔ A.end
                createHorizontalChain(greenBox, redBox, chainStyle = ChainStyle.Packed)
            }

            //레이아웃 추가
            ConstraintLayout(constraints, modifier = Modifier.fillMaxSize()) {
                Box(modifier = Modifier
                    .background(Color.Green)
                    .layoutId("greenbox")
                )
                Box(modifier = Modifier
                    .background(Color.Red)
                    .layoutId("redbox")
                )
            }

        }
    }
}