본문 바로가기

나의 플랫폼/안드로이드

[Android] smooth-app-bar-layout 소개

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

아래 이슈 사항은 Android Support Library 26.0.0 버전 이상 부터 해결 되었다고 합니다.



Github : https://github.com/henrytao-me/smooth-app-bar-layout


이 라이브러리는 AppbarLayout과 관련된 동작을 좀더 Smooth한 형태로 표현하고자 만들어진 Library이다.


자세한 사항은 Github에 들어가면 알 수 있으며, 

이 라이브러리를 우선 사용해야 하는 이유는 아래와 같은 동작이 일어났을때의 문제이다.


## Appbarlayout 문제

문제 영상 : https://youtu.be/xMLKoJOsTAM


영상을 보시면 문제점이

RecyclerView와 AppbarLayout을 사용해서 parallax 동작을 하고 있습니다.

이 때 RecyclerView의 Scroll이 탑으로 갔을 경우, 

AppbarLayout이 열리지 않고 RecyclerView 탑에서 멈춰버립니다.

그 다음 다시 스크롤을 아래로 당겨야 AppbarLayout이 열리는 동작을 보여주는 영상 입니다.


정상적이라면 RecyclerView 스크롤 시, AppbarLayout이 열리지 않은 상태 라면

같이 열리는 동작이 맞다고 봅니다.



## 해결책

이에 대해 Stackoverflow에서는 아래와 같은 해결책이 채택이 되었는데요.

해결책 : http://stackoverflow.com/a/33461064


저 같은 경우 위 해결책으로 시도를 해보았지만 안정적인 동작이 이뤄지지 않았어요.

Stackoverflow에서도 대답이 자신의 앱에 맞춰서 Behavior 클래스를 커스텀화 할 필요가 있다고

적혀 있어요.


시간이 어느정도 있으신 분은 커스텀화 해서 테스트 하면서 수정할 수 있겠지만,

전 그리 시간이 없다 보니 여러 방법을 테스트한 결과

한 오픈소스 라이브러리를 써서 해결을 했습니다.


맨 처음 소개해 드린 smooth-app-bar-layout 라이브러리 에요.

다운로드는 상단에 링크 공유해드렸으니 들어가셔서 다운 받으시면 됩니다.


이 라이브러리를 사용하면 AppbarLayout을 SmoothAppBarLayout으로 바꾸기만 하면 되요.

그럼 클래스 내부에 정의 되어 있는 Behavior가 동작 해서 

동작이 원활하게 이뤄지게 됩니다.


## 사용시 주의점

하지만, 여기서 한가지 주의 하실 점이 있습니다.


xml에서 RecyclerView가 AppbarLayout 상단에 위치 해야 합니다.

그 의미는 RecyclerView가 AppbarLayout 아래로 그려질 수 밖에 없다는 의미 입니다.

app:behavior_overlapTop 속성도 쓸모가 없어지겠죠?


그 이유는 이 라이브러리 같은 경이 RecyclerView의 id 값을 참조 합니다.

따라서 RecyclerView가 먼저 정의가 되어 있어야 한다는 것이죠.


게다가 가장 큰 문제점은 기존 안드로이드에서 디폴트로 제공하는 Behavior가 아니기 때문에,

AppbarLayout 크기 만큼 강제적으로 RecyclerView에 Header를 정의 해줘야 합니다.

아래는 샘플 소스에서 강제적으로 Header크기를 주고 있는 소스 입니다.


mAdapter = new DynamicAdapter<>(Utils.getSampleData());
RecyclerView.Adapter adapter = new SimpleRecyclerViewAdapter(mAdapter) {
@Override
public RecyclerView.ViewHolder onCreateFooterViewHolder(LayoutInflater layoutInflater, ViewGroup viewGroup) {
return null;
}

@Override
public RecyclerView.ViewHolder onCreateHeaderViewHolder(LayoutInflater layoutInflater, ViewGroup viewGroup) {
return new HeaderHolder(layoutInflater, viewGroup, R.layout.item_header_spacing_with_fit_system_windows);
}
};


Header 레이아웃 안에 AppbarLayout과 Height가 같은 View가 존재하고 있습니다.


이 부분만 잘 숙지 하고 사용을 한다면 좀 더 괜찮은 퍼포먼스가 나옵니다.


이 라이브러리를 사용하니 동작이 훨씬 매끄러워져 만족해 하고 있습니다.


혹시, AppbarLayout 문제 때문에 고생하시는 분들 한번 사용해 보세요.


참고하세요.