본문 바로가기

ANDROID/UI - UX

(28)
[안드로이드] 사용자 기기의 글꼴 사이즈에 앱 대응하기 어떤 UI/UX 가이드라인에 맞추어 설계한 앱의 경우에도 사용자가 임의로 기기의 폰트 사이즈를 변경하거나, 혹은 크거나 작게 사용하고 있는 경우에는 기존의 의도와 다르게 앱의 몇몇 뷰들이 겹치거나 텍스트가 잘려보인다는 등의 현상이 발생하기 마련이다. 이와 같은 경우, constraintLayout으로 구성되어 있는 레이아웃들을 전부 손봐서 기본 폰트 사이즈의 경우 기존 UI/UX 가이드라인에 알맞게 보여지도록 하고, 큰 폰트 사이즈를 사용할 경우 잘려나가는 부분이 없도록 최소한의 조정을 하는 방안이 있었는데, 몇몇 뷰 요소에 엄격하게 들어가있는 width 값들이 있어 손대기가 조금 난해한 부분이 있었다. 그래서 다르게 생각하기로, 기존 가이드라인이 노령 연령대를 고려해 맞추어진 UI/UX라면 (큰 폰트사..
[안드로이드] RecyclerView의 사이즈를 애니메이션과 함께 바꾸기, 아이템이 추가될 때 애니메이션 적용하기 UI/UX를 구성하는 중에 유동적으로 사이즈를 바꾸는 RecyclerView의 구현이 필요했다. 목표로는 두가지 목표가 있었는데, 첫째로는 2개 이상의 아이템이 RecyclerView에 추가될 때 RecyclerView의 사이즈를 늘리기. 둘째로는 신규 아이템이 추가될 때 Fade in 애니메이션 적용하는 것이었다. 여러 방법들을 동원하던 중 코드 수도 적고 무난하게 사이즈를 늘릴 수 있는 레퍼런스를 찾았다. https://stackoverflow.com/questions/32835397/android-property-animation-how-to-increase-view-height Android property animation: how to increase view height? How to inc..
[안드로이드] Lottie 3.0.7 적용기 (json 파일 재생 라이브러리) 기존 안드로이드 프로젝트에 튜토리얼 단계에 적용하고자 GIF 에셋을 활용했었는데(Glide 라이브러리), GIF의 단점은 사이즈가 대체적으로 커질 수 있다는 점과, 기기별로 재생 속도가 천차만별로 달라지던 현상이 발생한다는 것이었다. 이를 대체하기 위해 새로 도입하게 된 게 JSON 애니메이션이다. JSON은 현재 여타 웹사이트에도 다양하게 적용되고 있는 애니메이션 포맷인데, 이를 안드로이드 등 기타 플랫폼에서 간편하게 적용이 가능하도록 만들어진 Lottie 라이브러리를 추가로 알게되었다. Lottie의 상세 소개는 아래에서. https://airbnb.design/lottie/ Lottie Easily add high-quality animation to any native app. Lottie is ..
[안드로이드] 레이아웃에 실시간 Blur 효과 주기 (가우시안 블러) 배경 레이아웃에 Blur 효과를 주기 위한 몇몇 방법들을 조금 살펴보았는데, 적용할 정도에 비해 작업이 투머치가 들어가는 것 같아 적용하다 롤백을 반복했는데 그 와중에 좋은 라이브러리를 찾아 적용까지 마칠 수 있었다. https://github.com/mmin18/RealtimeBlurView mmin18/RealtimeBlurView A realtime blurring overlay for Android (like iOS UIVisualEffectView) - mmin18/RealtimeBlurView github.com 우선 일반적인 라이브러리 적용하는 대로 gradle에 implementation을 마치고 나면 Blur를 적용하고자 하는 영역 위에 전체 혹은 원하는 크기만큼 BlurView를 레이아..
[안드로이드] 이미지를 포함한 커스텀 ListView 구현 단순히 텍스트를 포함하는 리스트 뷰를 만드는 데는 적은 수의 리소스와 코드로 이를 구현할 수 있지만, 이미지나 기타 다양한 내용을 담은 row item을 출력하고자 한다면, 좀 더 많은 준비물이 필요하다. 우선 구현하고자 하는 item의 구성과 그에 따른 준비물을 나열해보자면 ** 텍스트뷰 한 개와 이미지 한 개를 포함하는 row item을 쓰고자 할 때 ** 1. row item의 구성을 정의하는 xml 레이아웃 여기에는 텍스트뷰와 이미지뷰 하나가 레이아웃 구성으로 들어가며 당연히 필히 id값을 달아두어야 한다. 2. row item의 레이아웃을 코드에 링크 시켜주는 커스텀 BaseAdapter 3. 각 row item의 텍스트에 적용하고자 하는 String 배열 : 여기에는 각 item에 넣고자 하는..
[안드로이드] 각도 표시를 위한 간단한 호 그리기 데이터에 따른 각도 값을 하이라이트 해서 시각화하기 위해 채워진 호를 그리고자 하였다. Stack Overflow에서 아주 어렵지 않게 결과물을 얻을 수 있는 예제를 발견했고, 거의 원큐에 가깝게 목표를 달성해버렸다; 원본 내용은 가운데가 빈 도넛 형태의 도형을 그리고자 작성된 코드가 들어가있는데, 이는 중앙에 지우고자 하는 작은 원을 추가로 캔버스에 그려준 것이라, 가운데 원을 그리지만 않으면 원하는 호 모양을 그릴 수 있게 된다. -- 순서 -- 1. Bitmap 객체를 만들고 2. 캔버스 객체를 만든 Bitmap 객체로 생성 3. 지름과 startAngle, sweepAngle 설정. startAngle은 0f로 설정할 경우 수평방향에서 시작하며, 음수값을 주는 만큼 반시계 방향에서 시작.sweep..
[안드로이드] canvas에 선을 따라 원 그리기 기존에 선을 드로잉 하는 중에 분기점마다 원을 그려줘야 했는데 단순히 선을 드로잉하던 방법처럼은 잘 수행이 안되는 걸 알 수 있었다. 우선 선의 경우 Path 클래스가 따로 있어 드로잉 할 전체 선의 위치들을 moveTo, lineTo 등으로 지정해 줄 수 있었는데 원의 경우 물론 선이 아니었기에 다른 방법이 필요했다. 자료를 참조하던 중에 배열을 쓰던 사용자가 있었는데 이를 참조하여 x,y 좌표값을 저장하는 ArrayList를 사용하기로 했다. 순서로는 1. 선의 path를 세팅하는 곳에서 최초 시작점인 moveTo나 lineTo로 이어지는 곳의 좌표를 2차원 배열에 저장 2. 2차원 배열을 ArrayList에 add 3. 마지막으로 onDraw에서 ArrayList의 사이즈 만큼 canvas.draw..
[안드로이드] Custom animation 정의를 통한 액티비티 전환 애니메이션 적용하기, static 클래스 내부에서 overridePendingTransition 사용하기 overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out); 기존에는 위와 같은 간단한 안드로이드 기본 애니메이션을 활용해서 액티비티 전환 애니메이션을 사용했는데, 단순한 Fade in, fade out을 떠나 슬라이드 쇼처럼 위 혹은 옆에서 액티비티 화면이 들어올 수 있도록 하고 싶었고, 서치를 통해 아주 유용한 페이지를 찾았다. http://wimir-dev.tistory.com/23 참조한 페이지를 통해 프로젝트의 res 폴더에 anim 리소스 폴더를 만들고, slide_up.xml, slide_down.xml 을 생성 이를 아래와 같이 적용해 응용하였다. overridePendingTransition(R.anim.slide..