안녕하세요.
커스텀 뷰를 이용해 레이아웃 내에서 메뉴 전환 효과를 내는 과정에,
혼자서는 벅찬 부분이 있어 질문드립니다.
메인 화면에 5개의 뷰가 위에서 아래의 순서대로 존재하는데,
가장 맨 위의 뷰는 메인 배너이고, 아래의 4개의 뷰는 메뉴 이동을 위한 버튼입니다.
각각의 메뉴 버튼을 누르면 누른 메뉴 버튼을 중심으로
위에 있는 뷰들은 위로, 아래의 뷰들은 아래로 밀려나면서,
버튼 아래부터 메뉴 화면이 늘어나며 보여지게 되는 것이 목표입니다.
즉, 가장 처음의 메뉴 버튼을 누르면 메인 배너는 위로 밀려나며
나머지 3개의 메뉴 버튼은 아래로 밀려나며 화면 밖으로 사라지고,
버튼 밑에서 해당 메뉴화면이 나머지 뷰들이 밀려나 만들어진 공간의 크기만큼 커지게 됩니다.
최종적으로는 화면 맨위에 메뉴 버튼과 아래 전체 부분은 메뉴화면으로 가득차게됩니다.
그리고 위로 올라간 메뉴 버튼을 다시 누르게 되면 역으로 메뉴화면이 위아래로 좁아져 사라지며
나머지 뷰들이 복귀합니다.
이 과정을 구현하기 위해 일단은 메인 화면에 LinearLayout을 지정하였구요.
메인 배너와 나머지 4개의 메뉴 버튼을 차곡차곡 넣어 화면을 채웠습니다.
TranslationAnimator를 이용했을 때, 버튼은 움직이지 않더군요.
LinearLayout이여서 그런것 같던데... 그래서 ViewPropertyAnimator나, ObjectAnimator를 사용해봤습니다.
그러자 뷰는 움직이기는 하는데 뷰가 움직인 만큼 나머지 뷰가 남은 공간을 채워서 재배치되지가 않더군요.
메인 배너가 위로 올라가면, 나머지 뷰들도 위로 올라가야하는데 메인 배너만 움직이고 빈 공간이 생기더라구요.
이게 뷰가 실제로 움직이지만 레이아웃이 재배치를 하지 않은 것인지,
(하지만 invaildata()나, requestLayout()을 호출해도 반응은 없었습니다.)
뷰의 실제 위치는 움직이지 않고 뷰 내의 그리는 영역의 위치만 변경되서 효과를 내는 것인지 모르겠네요.
그렇다고 뷰의 크기 자체를 변경시키자니 뷰에 설정된 이미지가 스케일되어 이미지가 꾸겨질 것 같은데요.
마치 그냥 뷰의 일부를 덮어서 가리듯이 그리기는 그대로 하고 크기를 변경시키는게 될지...
메뉴 버튼 아래에서 메뉴화면이 나타나는 것은,
뷰가 늘어나면서 안에 있는 이미지나 다른 자식뷰들이 꾸겨졌다가 펼쳐지는게 아닌,
가려졌다가 다시 해제되는 것처럼 자연스럽게 펄쳐져야 하는 문제도 어떻게 해결해야 할지 모르겠습니다.
물론 일단은 그보다 메인 화면의 뷰들부터 움직이게 하는거에 하루죙일 막혀있어서 답답하기만 하네요.
