알렌보이스

이번 포스팅에서는 Compose를 활용하여 Gradient을 표시하는 방법에 대하여 알아보겠습니다. @Composable fun BrushBox( brush: Brush, modifier: Modifier = Modifier ) { Box( modifier = modifier .fillMaxWidth() .height(100.dp) .background(brush = brush) ) } private fun getColorList() = listOf( Color(0xFFFFE162), Color(0xFFFF6464) ) 시작에 앞서 기본 설정입니다. Gradient은 background의 brush 속성으로 적용이 가능합니다. 1) Gradient의 종류 BrushBox( brush = Brush.lin..

97 ~ 98일 차 코딩 일기입니다. 어제오늘은 게임 UI 디자인 작업을 진행하였습니다. 신발 UI할 때 글씨 애니메이션 효과를 주고 싶었는데 이번에 하면서 적용을 해보았습니다. 할 때는 약간 헤매긴 했지만 하고 싶은 것을 완성을 시키니까 역시 기분은 좋네요 ㅎㅎ 내일은 디자인은 쉬고 자료 조사를 조금 진행을 해볼 예정입니다.

이번에 작업한 UI 출처입니다. https://dribbble.com/shots/6289865-AXE-Game-Platform?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=AXE%E4%B8%A8Game+Platform&utm_medium=Social_Share @Composable fun GameScreen() { Box( modifier = Modifier .fillMaxSize() .background(getGameBlack()) ) { LazyColumn( contentPadding = PaddingValues(bottom = 70.dp), modifier = Modifier.fillMaxWidth() ) { /** 베너 영역 **/ ..

이번 포스팅에서는 기존 XML에서 ViewPager의 기능을 Compose로 유사하게 구현하는 방법에 대하여 알아보겠습니다. 시작하기 전에 다음의 내용을 build.gradle(:app)에 추가해 주세요 implementation "com.google.accompanist:accompanist-pager:0.20.1" implementation "com.google.accompanist:accompanist-pager-indicators:0.20.1" 1) 기본 사용 방법 Compose에서는 방향에 따라서 HorizontalPager와 VerticalPager로 사용합니다. val colorList = listOf( Color(0xFFFF1744), Color(0xFF651FFF), Color(0xFF2..

95 ~ 96일 차 코딩 일기입니다. 어제오늘은 Compose Animation 관련해서 정리하는 작업을 진행하였습니다. 생각보다 양이 많아서 시간이 오래 걸렸네요~ 기존 방식에서도 애니메이션이 가능하긴 했지만 애초에 디자인과 코드를 같이 작성하는 스타일이라 그런가 접근성면에서는 더 좋은 거 같아요 일단 내일은 작업을 못할 예정인데 틈틈이 다음 디자인을 찾아봐야겠습니다

Compose의 Animation은 간단하게 정리하면 다음과 같습니다. 어떤 애니메이션이 어떻게 동작시킨다. 어떤 애니메이션을 사용할지 여부는 Transition을 통해 지정하고, 이 Animation동작이 어떻게 작동할지는 AnimationSpec에 의해 정해집니다. 그전에 언제 애니메이션을 작동시킬 것인지가 필요합니다. 우선 간단하게 Visible 상태를 변경시키는 AnimatedVisibility에 대해 알아보겠습니다. var visible by remember { mutableStateOf(false) } Button(onClick = { visible = visible1.not() }) { Text(text = "Click") } AnimatedVisibility(visible = visible..

94일 차 코딩 일기입니다. 오늘은 어제 작업을 했던 나이키 UI에 애니메이션 효과를 적용해보았습니다. 기존에 해봤던 것도 있었고 오늘 처음 적용해보는 애니메이션 효과도 있었습니다. 하면서 느낀 점은 한번 애니메이션 관련해서 정리를 해봐야겠다는 생각이 들었습니다. 그래서 내일은 정리하면서 포스팅 준비해서 모래 올릴 예정입니다.

디자인 출처 메인화면 왼쪽의 UI를 오른쪽과 같이 3등분으로 분리하여 UI를 구현하였습니다. @Composable fun ShoesMainScreen() { Column( modifier = Modifier .fillMaxSize() .background(ShoesBlack) ) { /** 상단 타이틀 영역 **/ ShoesMainHeader() /** 텝 메뉴, 뷰페이져 **/ ShoesMainBody( modifier = Modifier .fillMaxWidth() .weight(1f) ) /** 하단 메뉴 **/ ShoesMainFooter() } } 1) Header @Composable fun ShoesMainHeader() { Row( modifier = Modifier .fillMaxWidt..