밍쯔와 안작고 안귀여운 에러들🖤

[Android] 상단에 붙는 탭바 (sticky tab/scroll tab) 본문

Develop/Android | iOS

[Android] 상단에 붙는 탭바 (sticky tab/scroll tab)

밍쯔 2022. 9. 14. 10:10

[문제]

- 디자이너분이 탭이 상단에서 붙는 형태의 탭바를 사용하고 싶어하심.

 

[과정]

1. CoordinatorLayout

- 탭바 기준 상단에 들어갈 수 있는 세로폭이 정해져 있어서 유동적으로 늘릴 수 없었음.

BTW, 

- 애니메이션이 깔끔하고 탭바 기준 상단에 들어가는 내용이 많지 않으면 가장 좋음.

- 스크롤이라기 보단 상단 레이아웃은 접히는(?) 형태에 가까움. 기획 의도에 따라 안맞을 수도 있음.

 

2. Sticky Scroll Layout 

- 기획/디자인 의도에 딱 맞는 형태,,,! 하지만 탭바 내 좌우 스크롤이 안됨.

- 가게 이름에 따라 길어질 수도 짧아질 수도 있기 때문에 무조건 스크롤이 가능해야 했어서 이것도 실패,,,!!

BTW,

- 탭 내 텍스트가 정해져 있고, 3~4개로 match_parent로 그 안에 다 들어가는 내용이면 가장 좋은 레이아웃!

 

만들고,,, 결국 버리게 된 코드지만 어쨌든,,,! 누군가의 참고용

 

 

 

[결론]

결론적으로,, 상단 레이아웃의 내용이 많고, 탭바의 좌우 스크롤이 가능해야 한다면 위 라이브러리로는 안된다는 것!

그래서 디자이너분과 타협한 방식은!

 

가게 정보들이 나오는 파트부터 탭바의 Visibiliy를 줘서 보였다 안보였다 하는 것!

누르면 위치로 이동도 하고 스크롤도 되는,,!

그래서 그냥 HorizontalScrollView 안에 Linearlayout으로 만들었다.

 

 

 

[참고]

https://github.com/didikk/sticky-nestedscrollview

 

GitHub - didikk/sticky-nestedscrollview: Upgraded version from StickyScrollView

Upgraded version from StickyScrollView. Contribute to didikk/sticky-nestedscrollview development by creating an account on GitHub.

github.com

https://velog.io/@nimok97/CoordinatorLayout-CollapsingToolbarLayout-NestedScrollView-%EB%A1%9C-%ED%8A%B9%EC%A0%95-%EB%B7%B0-%EA%B3%A0%EC%A0%95-%ED%9B%84-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EA%B5%AC%ED%98%84

 

CoordinatorLayout, CollapsingToolbarLayout, NestedScrollView 로 특정 뷰 고정 후 스크롤 구현

일정 부분 화면을 내리다보면 특정 뷰가 상단에 고정되고 이어서 밑 부분이 스크롤이 되는 기능을 구현하기 위해 CoordinatorLayout 과 NestedScrollView를 사용했다뷰의 구조는 위와 같다 (그림 실력 죄

velog.io

https://deque.tistory.com/140

 

헤더가 찰싹 달라 붙는 스크롤 뷰 (Sticky Scroll View)

Fixed view in scroll view 네이버 앱을 보면 이렇게, 검색창이 위로 올라가다가 맨 위에 도달하면 더이상 올라가지 않고 고정이 된다. 실제로 네이버 앱 내부적으로는 CollapsingToolbarLayout을 이용하고 있

deque.tistory.com