Android Jetpack Compose

    [Android Compose Material] 1. Compose에서 Snackbar을 만드는 방법 : Scaffold를 이용해 Snackbar만들기

    Scaffold란? Snackbar을 원하는대로 만들기 위해서는 Scaffold Layout을 알아야 한다. Scaffold란 Material Component들을 편하게 사용할 수 있도록 하기 위해 미리 디자인된 레이아웃이다. Snackbar도 Material Component이므로 Compose에서 Snackbar을 기존 Snackbar의 동작대로 이용하기 위해서는 Scaffold State로 감싸야 한다. 만약 Scaffold로 감싸지 않으면 보통의 Composable과 똑같이 동작한다. Snackbar 만들기 Snackbar을 만들기 위한 Composable을 먼저 정의해보자. 우리의 목표는 TextField와 Button을 두고 Button을 눌렀을 때 TextField 속의 Text가 Snac..

    [Android Compose Modifier] 7. padding과 border을 조합하여 중첩 테두리 만들기(Multiple Border)

    이번 글에서는 하나의 modifier에서 여러개의 border을 만드는 방법을 살펴본다. Modifier에 중첩 border만들기 하나의 Modifier에 여러개의 border을 적용시키는 방법은 간단하다. border사이에 padding을 주면 border을 여러개 중첩해서 만들 수 있다. *내부 로직은 너무 깊은 내용이므로 이 글에서 다루지 않는다. 자 바깥부터 5dp씩 파란색, 빨간색, 초록색 순서로 border을 만들어보자. border 사이에 padding을 주면 중첩해서 border을 만들 수 있다. @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun KotlinWorldColor() { Column( m..

    [Android Compose Modifier] 6. border을 이용해 테두리 만들기

    border border은 border의 너비(width) 색상(color) 모양(shape)을 설정함으로써 설정 가능하다. fun Modifier.border(width: Dp, color: Color, shape: Shape = RectangleShape) = border(width, SolidColor(color), shape) border의 구성요소 width : 너비(dp) color :색상 shape :모양 네모 border만들기 예를 들어 아래와 같이 너비가 5dp이고 파란색 색상의 네모 모양 border을 만들어보자. width에 5.dp를 color에는 Color.Blue를 shape에는 RectangleShape을 넘김으로써 네모 모양 border을 만들 수 있다. @Preview(sh..

    [Android Compose Modifier] 5. Color에 alpha 적용해 투명도 설정하기

    alpha란? alpha란 불투명도를 설정하는 float값이다. alpha가 1에 가까워질수록 불투명해지며 0에 가까워질 수록 투명해진다. alpha = 1f : default값. 불투명 alpha = 0f : 완전 투명 alpha란 무엇인가를 한 눈에 이해하기 위해 아래 그림을 보자. 1f일때는 완전히 불투명한 반면, 0f에서는 완전히 투명(transparent)해졌다. 위 그림을 만든 코드는 아래 접어두었다. 이해를 위해 직관적으로 작성해두었으니 참고 바란다. 더보기 @Preview(showBackground = true, widthDp = 200, heightDp = 200) @Composable fun KotlinWorldAlpha() { Column { Box( Modifier .fillMaxW..

    [Android Compose Modifier] 4. Modifier.background에서 Brush 다루기 : 그라데이션 만들기

    background에 brush를 이용해서 그라데이션(Gradient) 만들기 그라데이션 처리는 아래 그림과 같이 여러개의 색을 섞어 그라데이션을 만드는 것을 뜻한다. Modifier에서는 파라미커로 Brush를 받을 수 있는 메서드가 있다. 우리는 이 Brush를 이용해 그라데이션을 만들 수 잇다. fun Modifier.background( brush: Brush, shape: Shape = RectangleShape, /*@FloatRange(from = 0.0, to = 1.0)*/ alpha: Float = 1.0f ) 이 메서드에서는 세개의 파라미터를 받는다 Brush : Gradient 방향 설정 Shape : 모양 설정 alpha : 투명도 설정 이전 글에서 Shape은 자세히 다뤘으므로 ..