Android Compose Scroll Bottom Button

1. 상단 아이템의 갯수와 상관없이 무조건 버튼이 하단에 고정이 되야 하는 경우

 

    @Composable
    private fun initView() {
        val sampleData = mutableListOf<String>()
        (1..50).forEach {
            sampleData.add("Sample Data $it")
        }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp)
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            sampleData.forEach {
                Text(
                    text = it,
                    color = Color.Black,
                    fontSize = 14.sp,
                    modifier = Modifier.padding(10.dp)
                )
            }
            
            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxHeight()
            )
        }

        Box(
            contentAlignment = Alignment.BottomCenter
        ) {
            Button(
                onClick = { },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(62.dp)
            ) {
                Text(text = "버튼")
            }
        }

    }

결과화면

 

 

 

 

2. 상단 아이템이 전체 화면을 넘어갈 경우 버튼은 아이템의 하단에 위치해야 한다.
    단, 아이템이 없을경우에 버튼은 디바이스 하단에 위치해야 된다.

    @Composable
    private fun initView() {
        val sampleData = mutableListOf<String>()
        (1..50).forEach {
            sampleData.add("Sample Data $it")
        }

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp)
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            sampleData.forEach {
                Text(
                    text = it,
                    color = Color.Black,
                    fontSize = 14.sp,
                    modifier = Modifier.padding(10.dp)
                )
            }

            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxHeight()
            )

            Button(
                onClick = { },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(62.dp)
            ) {
                Text(text = "버튼")
            }

        }
        
    }

결과화면

아이템이 없을경우 버튼 하단 고정

 

 

아이템이 많아지면 아이템의 하단 마지막에 버튼이 위치한다.

    

 

Xml로 하면 금방 끝나는데 생각보다 오래걸렸다.

핵심은 코드에 나와있지만

Modifier
    .weight(1f)

기존 Xml과 똑같은 개념처럼 가중치를 주는 옵션을 이용하면 된다.