ANDROID/UI - UX (28) 썸네일형 리스트형 [안드로이드] SeekBar의 Thumb 색상 실시간 변화주기, BlendModeColorFilter 사용하기 (feat. ColorFilter deprecated) 금번에 SeekBar의 Thumb에 새로운 인터랙션을 주게 되면서 기존에 적용해 둔 Listener에 ColorFilter를 먹이고자 했다. 하지만 ColorFilter를 먹이던 시절은 이미 오래 전이었고.. 현재는 deprecated 된 요소였던 것이다. 그러면 무엇을 써야하는 것인가? 검색을 통해 BlendModeColorFilter라는 클래스를 찾을 수 있었다. BlendModeColorFilter | Android 개발자 | Android Developers BlendModeColorFilter public final class BlendModeColorFilter extends ColorFilter A color filter that can be used to tint the source pix.. [안드로이드/MpAndroidChart] MpAndroidChart에서 Marker 커스텀하기 그래프의 바를 터치할 때 해당 데이터를 보여주는 Marker를 구현중에 있었는데, 공식 문서에 안내되어 있는 getOffset()을 Override하는 방식으로는 위치조정을 하는 것이 어려웠다. 구글링을 더 해보니 getXOffset, getYOffset을 override해 사용하는 경우가 많았으나, Kotlin 환경때문인지 몰라도 override 메소드가 보이지 않았다. 최종적으로 MarkerView의 draw 메소드를 override하여 보여주고자 하는 위치를 조정해 보여주는 걸로 구현을 마칠 수 있었다. * MPAndroidChart 3.1.0 버전에서 진행 * BarChart 사용 * Kotlin 베이스 1. BarChart 구성 완료 BarEntry, BarDataSet, Ba.. [안드로이드] ConstraintLayout + CollapsingToolbarLayout 활용해 접히는 TabBar 구현하기 뱅크샐러드 및 야놀자 등 상단 탭영역이 접히는 UI/UX를 프로젝트에 적용하고자 했다. 구현을 위해 고르게 된 layout은 CollapsingToolbarLayout으로, 이름은 Toolbar로 딸려있지만 컴포넌트들을 추가해 툴바 이상의 요소들을 보여줄 수 있는 걸 확인할 수 있었다. 처음에는 레이아웃 코드 적용 후에도 동작이 되지 않거나, 스와이프 중 뷰가 제대로 접히지 않고 따로 논다던지 등의 이슈가 있었는데, 이하 문제들을 해결하면서 적용한 요소들을 정리를 해두고자 한다. 이번 구현에 있어 공식문서 외에 실구현 사례들을 레퍼런스로 삼아 차이점이 존재할 수 있으니, material.io에 나와있는 공식문서를 참조하는 것도 좋을 것 같다. Collapsing Toolbars - Material Com.. [안드로이드] RecyclerView에서 클릭한 아이템의 position을 간단히 받아오기 RecyclerView의 아이템 클릭시에 해당 아이템의 position을 받아와야 하는 상황이 있었는데, stack overflow에 나와있는 상당수 답변은 clickListener interface 따로 생성하고, 달아주는 등등 손이 가는것은 물론, 방식들도 굉장히 다양한 편이었다. 더 편한 길이 있을텐데(이거보단 덜 칠 수 있지 않을까) 싶은 마음에 둘러보다 좋은 솔루션을 찾았다. 1. RecyclerView에 달려있는 어댑터의 onBindViewHolder 메소드에서 파라미터로 넘어오는 holder의 itemView에 onClickListner를 설정한다. 2. onClickListener에 클릭시마다 holder.adapterPosition을 통해 아이템의 position을 가져온다.. [안드로이드 | 코틀린] 사용자 정의 커스텀 달력 만들고 ViewPager에 접목하기 커스텀 달력 구현을 위해 자료를 찾던 중 Medium에서 참조할만한 레퍼런스를 찾았으나 자바코드로 구성되어 있는것은 물론 일부 생략된 부분들이 있어 구현에 조금 어려움이 있었다. 우여곡절 끝에 기본구성을 마치고 구성에 필요했던 과정과 준비물들을 정리해두고자 한다. 준비물 1. 뷰로 선언할 캘린더의 xml Layout (calendar_layout) 2. 달력의 일자에 적용할 xml Layout (calendar_day_layout) 3. LinearLayout을 확장해 만든 커스텀 캘린더 클래스 4. 캘린더의 일자 구성, 색상변경등을 수행할 캘린더 어댑터 클래스 구성 방법 1. 뷰로 선언할 캘린더의 xml Layout (calendar_layout) 만들기 캘린더의 전체 틀로써 크게 LinearLayou.. [안드로이드 | MpAndroidChart] 바 그래프의 하단 영역이 생길 때의 대처법 그래프를 활용한 뷰를 만들면서 실제 데이터를 적용하기 이전에 랜덤 값으로 바 그래프 데이터를 만들어 보여주고 있었는데, 값이 바뀔 때마다 이상하게 바의 하단영역이 비는 현상이 생겼다. 이를 해결하기 위해 다양한 설정값을 먹여보았으나 잘 듣지 않았고, 얼마간의 시행착오를 거쳤는데 정답은 그래프의 min max 값을 정하는데에 있었다. 아래와 같은 설정 값을 먹인 뒤로 해당 현상은 사라지게 되었다. 차트.axisLeft.axisMinimum = 0f 이어 추가로 바 그래프를 설정한 뷰의 영역에 꽉 채우고 싶어서 자료를 찾아보았는데 잘 나오지 않았고 이윽고 스택 오버플로에 직접 질문을 하여 해답을 구할 수 있었다. 차트.setViewPortOffsets(0f, 0f, 0f, 0f) 다만 현재 문제점은 차트를 .. [안드로이드 | 코틀린] 데이터바인딩을 사용할 때 Fragment 내의 View 좌표 가져오기 이번에 신규로 구현하는 페이지에서 유저의 터치에 따라 화면 내의 커서를 특정 위치로 보내야 하는 요구사항이 있었다. 터치를 받는 곳은 별도의 뷰에서 들어오는 것이었기에, 터치는 터치대로 Listen해 마찬가지로 별도의 뷰로 되어있는 인디케이터를 움직여야 했다. 이를 해결하기 위해 커서가 가장 좌측으로, 그리고 우측으로 최대한 움직였을 때의 위치를 더미 View를 사용해 지정하였고, 둘간의 좌표 차이를 활용해 커서를 수평이동 시키기로 했다. 서론은 이정도로 마치고 데이터바인딩된 Fragmet 레이아웃으로부터 특정 뷰의 좌표를 가져오기 위한 방법은 아래와 같다. ... val binding = DataBindingUtil.inflate(inflater, R,layout.fragment_layout, cont.. [안드로이드] ConstraintLayout 내부에 Fragment 알맞게 배치하기 상단에는 페이지의 제목과 설정 아이콘 등을 넣을 수 있는 AppBar, 중앙에는 변경되는 Fragment들이 배치되는 FrameLayout, 하단에는 페이지 이동을 위한 BottomNavigationView가 들어가있는 크게 세 칸의 구성으로 된 레이아웃 구성을 진행중에 있었다. 여기서 문제가 하나 있었는데, 중앙에 배치되는 ConstLayout이 삐져나온다거나 꽉 차지 않아 기기간에 차이도 생기고, 디자인의 의도대로 앱이 보여지지 않는 불편한 경우가 생기는 것이었다. 이런 경우에는 ConstraintLayout의 width와 height 설정이 중요한데, 아래와 같은 과정을 통해서 본래 의도에 맞게 중간 영역에 알맞게 Fragment의 뷰가 가득 차게 구현할 수 있었다. 1. Fragment를 뿌리는 .. 이전 1 2 3 4 다음
