brunch

매거진 브런치 안드로이드

라이킷 6 댓글 4

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Noah Jun 22. 2015

Circular Reveal

안드로이드 메트리얼 디자인 인터렉션

안드로이드 인터렉션이 L 이후로 급격히 좋아지고 있다.

아직 아이폰 만큼은 아니지만...

쓰기도 어렵지만...

디자이너들은 원한다...

인터렉션 하나씩 두개씩 테스트 해보기 시작

Circular Reveal 이 뭐야?

이런 녀석이다.

원형 형태로 퍼지면서 화면이 바뀌거나 보여지는 형태

https://www.youtube.com/watch?v=x-v67vDEGoU

관련 레퍼런스는 여기있다.

영어다. 어렵다. 뭐가 이렇게 많냐.

https://developer.android.com/training/material/animations.html

Defining Custom Animations | Android Developers

Animations in material design give users feedback on their actions and provide visual continuity as

developer.android.com

좀 쉽게 정리해 보자

딱 이거만 하면 따라할 수 있게?

private Animator mCircularReveal;

private void showCircularReavel(View view){

inflatedView.setBackgroundColor(getResources().getColor(R.color.brunch_mint));

ViewPager container = mPager;

int centerX = (view.getLeft() + view.getRight()) / 2;

int centerY = (view.getTop() + view.getBottom()) / 2;

int finalRadius = Math.max(container.getWidth(), container.getHeight());

mCircularReveal = ViewAnimationUtils.createCircularReveal(container, centerX, centerY, 0, finalRadius);

container.setVisibility(View.VISIBLE);

mCircularReveal.setDuration(300);

mCircularReveal.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

mCircularReveal.removeListener(this);

inflatedView.setBackgroundColor(getResources().getColor(R.color.search_bg));

}

});

mCircularReveal.start();

}

여기는 호출 부분 이다.

pager 가 변할 때 마다 circularReavel 을 호출한다.

mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i2) {
        }

        @Override
        public void onPageSelected(int i) {
                if (UGCLogger.isDebugLevel()) {
                    UGCLogger.d(TAG, "onPageSelected(int i) : " + i);
                }
                switch (i) {
                        case 0:
                            searchTabState = SearchTabState.ARTICLE;
                           showCircularReavel(tabArticle);
                            break;
                        case 1:
                            searchTabState = SearchTabState.MAGAZINE;
                           showCircularReavel(tabMagazine);
                            break;
                        case 2:
                            searchTabState = SearchTabState.WRITER;
                           showCircularReavel(tabWriter);
                        break;
                }
            updateTabUI();
    }

    @Override
    public void onPageScrollStateChanged(int i) {

     }
});