[Jetpack Compose] Button 사용법의 모든것

Button

말 그대로 버튼을 화면에 나타내고자 할 때 사용된다.

Button(onClick = { /*TODO*/ }) {
	Text(text = "Button")
}

어우 많다.

하나씩 가보자.

 

onClick

버튼을 클릭했을 때 발생시킬 액션이다.

api를 호출시킬 수도 있고, Toast를 띄울 수도 있고 페이지를 이동시킬 수도 있다. 

그냥 버튼 클릭시 실행시키고 싶은 모든것을 넣으면 된다.

 

 

enabled

Button(
	onClick = { /*TODO*/ }, 
	enabled = false
) {
	Text(text = "Button")
}

버튼을 활성화시킬지 여부를 나타낸다.

기본값은 true이고, false로 설정하면 버튼이 클릭되지 않는다.

 

그럼 이건 어떨때 쓸까?

난 최근에 썼을때 입력받은 정보를 검증 후 잘못됐다면 버튼 자체를 비활성화 시키는 방식을 사용했다.

 

enabled = true

enabled = fasle

 

shape

Button(
	onClick = { /*TODO*/ },
	shape = RectangleShape
) {
	Text(text = "Button")
}

버튼 모양을 결정해준다.

CircleShape : 기본값이다. 끝부분이 동글동글

RectangleShape : 직사각형. 넴모넴모 버튼이다.

넴모넴모

shape

Button(
	onClick = { /*TODO*/ },
	colors = ButtonDefaults.buttonColors(
		// enabel == true 일때
		containerColor = Color.Blue, // 배경색
		contentColor = Color.Red, // 내부 컨텐츠(글자) 색

		// enabel == false 일때
 	   	disabledContainerColor = Color.Black,
		disabledContentColor = Color.White
	)
) {
	Text(text = "Button")
}

버튼 색상을 결정해준다.

근데 거참 설정할게 많다. 

 

물론 위에 적혀있는 4개 다 설정해줄 필요는 없다. 하나만 해줘도 된다

 

 

elevation

Button(
	onClick = { /*TODO*/ },
	elevation = ButtonDefaults.buttonElevation(
    	// 기본값이다.
		defaultElevation = 2.dp,
		pressedElevation = 8.dp,
		disabledElevation = 0.dp,
		hoveredElevation = 4.dp,
		focusedElevation = 4.dp
	),
) {
	Text(text = "Button")
}

버튼이 허공에 약간 떠있는것 처럼 보이게 해준다.

얘도 기본값이 적용돼있기 때문에 조정을 해주고 싶다면 아래와 같이 원하는 값을 수정해주면 된다.

얘도 물론 모든 값을 다 바꾸지 않아도 된다. 원하는거만 바꿔주자

 

 

 

elevation

Button(
	onClick = { /*TODO*/ },
	border = BorderStroke(1.dp, Color.Black),
) {
	Text(text = "Button")
}

테두리를 만들어준다.

dp로 두께를 조정하고, 색을 원하는값을 넣어주면 된다.

 

 

 

 

contentPadding

Button(
	onClick = { /*TODO*/ },
	contentPadding = PaddingValues(100.dp)
) {
	Text(text = "Button")
}

컨텐츠(텍스트)의 패딩 값 설정이다.

버튼 크기가 커진다.

 

 

interactionSource

사실 안써도 된다. 기존의 레거시한 코드와 상호작용하기 위해 존재하는 코드이다. 

필요하면 그때 공식문서를 보자.

 

 

content

버튼 내부에 들어오는 값을 넣는 곳이다.