Colin's Blog
[android] CardView와 모션 이펙트 처리

안녕하세요! 오늘은 안드로이드 앱에서 CardView를 사용하여 모션 이펙트를 처리하는 방법에 대해 알아보겠습니다.

CardView란 무엇인가요?

먼저, CardView는 안드로이드 지원 라이브러리에서 제공하는 UI 컴포넌트 중 하나로, 그림자와 간단한 모서리 둥글게 효과가 적용된 카드 형식의 뷰를 만들 수 있습니다. 이를 통해 앱의 디자인을 향상시킬 수 있습니다.

CardView 추가하기

CardView를 사용하기 위해서는 먼저 앱의 build.gradle 파일에 다음 의존성을 추가해야 합니다.

implementation 'androidx.cardview:cardview:1.0.0'

의존성을 추가한 후, 레이아웃 XML 파일에서 CardView를 추가하고 내부에 원하는 UI를 배치할 수 있습니다.

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <!-- 내부 뷰 배치 -->

</androidx.cardview.widget.CardView>

위와 같이 CardView를 추가하고 내부에 다양한 뷰를 배치할 수 있습니다.

모션 이펙트 처리

CardView에 모션 이펙트를 처리하기 위해서는 터치 이벤트를 처리하고, 애니메이션을 추가할 수 있습니다. 예를 들어, 사용자가 CardView를 터치할 때 그림자를 변경하고 약간의 이동 애니메이션을 추가할 수 있습니다.

cardView.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // 그림자 변화
                cardView.setCardElevation(8dp);
                return true;
            case MotionEvent.ACTION_UP:
                // 그림자 원래대로
                cardView.setCardElevation(4dp);
                // 애니메이션 추가
                ObjectAnimator animator = ObjectAnimator.ofFloat(cardView, "translationZ", 0);
                animator.setDuration(100);
                animator.start();
                return true;
        }
        return false;
    }
});

위 코드는 CardView에 터치 이벤트를 처리하고, ACTION_DOWN 이벤트 발생 시 그림자를 변경하고, ACTION_UP 이벤트 발생 시 그림자를 원래대로 돌리고 이동 애니메이션을 추가하는 예시입니다.

이렇게 CardView와 모션 이펙트를 함께 사용하여 앱의 UI를 더욱 동적이고 멋지게 만들 수 있습니다.

안드로이드 앱 개발자라면 CardView를 활용하여 직관적이고 아름다운 UI를 구현할 수 있을 것입니다.

참고문헌:

© 2018 Colin. All rights reserved.