CoordinatorLayout 를 이용해 구글 캘린더처럼 만들기

제가 처음에, 구글 캘린더처럼 구현하기 위해 고민했던 예제입니다.

구글 캘린더를 써보신분들은 알겠지만, 달력을 펼치고 줄이는 과정에서 위로 드래그하면 스르륵 사라집니다.

저는 아직 초보라 이게 무슨 레이아웃인지 몰랐고, 바텀씨트가 그렇게 되는 걸 알게되 그걸 인용해보자 라고 생각만 하고 도전했습니다.

생각의 끈이 짧았죠. 이렇게 계속 찾아 구현하던 도중, topSheet를 만들어놓은 싸이트까지 찾게 되지만, 결국 원하던 것은 아니였습니다.

drag관련해서도 찾아보고 여러 가지 노력하던 도중.....

드디어 드디어!!!!

제가 원하던 기능인 스르륵 기능을 찾게 되었는데..

이건 바로 CoordinatorLayout를 이용한 단순작업이었던 것이었던 것입니다..(내 일주일 돌려줘...)

저같은 사람들이 없기 위해 이 글을 씁니다.

위의 글처럼 구글 캘린더 처럼 스르륵 달력이 없어지는 것을 사용하기 위해서는 CoordinatorLayout를 잘 이용하시면 됩니다.

저는 2가지를 사용해, 탑 툴바는 그대로 둔 상태로 달력만 없애는 기능을 구현했습니다.

이렇게 했습니다. 스르륵 잘 가죠?

위의 탑 툴바는 그대로고 달력만 사라집니다. 

자 그럼 구현해 볼까요?

저는 우선, activity_main에 두개의 layout을 include 해서 구현했습니다.

main에는 drawerlayout을 root 로 안에 두개의 layout 을 include 했고, menu layout을 구현했습니다.

첫번째 include layout은 탑 툴바를 나타내는 건데요, 

CoordinatorLayout - 

AppBarLayout - 

CollapsingToolbarLayout - 

Toolbar - 

( ... )

를 넣었습니다.

여기서 중요한 것은 Collapsing~ 에

app:layout_scrollFlags="scroll|exitUntilCollapsed"

저 아이를 

Toolbar에

app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

이 아이를 넣어주어야 한다는 것입니다.

잊지마세요! 안넣으면 안되어요

두번째 include layout은 

CoordinatorLayout - 

AppBarLayout - 

CustomCollapsingToolbarLayout - 

calenar view / Toolbar - 

( ... ) - 

Toolbar - 

Custom~ - 

AppBar - 

NestedScrollView - 

include - 

NestedScrollView - 

FloatingActionButton - 

CoordinatorLayout 

으로 닫았습니다.

참 쉽죠? .....흑흑.... 어려웠어...

CustomColl~에서는

app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"

요놈을

Calendar View 에서는

app:layout_collapseMode="parallax"

요놈을 잊지 마세요

CustomCollapsingToolbarLayout 에 대한 소스 코드는 아래와 같습니다.

class CustomCollapsingToolbarLayout : CollapsingToolbarLayout {

    private var mListener: Listener? = null

    interface Listener {
        fun onContentScrimAnimationStarted(showing: Boolean)
    }

    constructor(context: Context) : super(context) {}

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}

    override fun setScrimsShown(shown: Boolean, animate: Boolean) {
        super.setScrimsShown(shown, animate)
        if (animate && mListener != null) {
            mListener!!.onContentScrimAnimationStarted(shown)
        }
    }

    fun setListener(listener: Listener) {
        mListener = listener
    }
}

이렇게 구현해 사용하면 끝!

이렇게 해서

스크롤 될 때 

private void setAppBarLayoutSub(int height) {
    appBarLayoutSub.getLayoutParams().width = CoordinatorLayout.LayoutParams.MATCH_PARENT;
    appBarLayoutSub.getLayoutParams().height = height;
    appBarLayoutSub.requestLayout();
}

이런 식으로 height를 넣어주면 깔끔하게

스크롤 된 후 캘린더가 사라지는 것을 구현할 수 있습니다..

안하면 쓸데없는 공간이 생겨서 보기 불편해요!!!

이렇게 진행하면 구글 캘린더처럼 스르륵 기능 끝!!!

화이팅하세요!!!!