슬라이드 업/다운 애니메이션으로 View 보이기 및 숨기기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

Show and hide a View with a slide up/down animation

슬라이드 업/다운 애니메이션으로 View 보이기 및 숨기기

 문제 내용 

I have a LinearLayout that I want to show or hide with an Animation that pushes the layout upwards or downwards whenever I change its visibility.

저는 LinearLayout을 가지고 있으며, 해당 레이아웃의 가시성을 변경할 때 상하로 밀리는 애니메이션으로 레이아웃을 보이게 하거나 숨기고 싶습니다.

 

I've seen a few samples out there but none of them suit my needs.

여러 샘플들을 봤는데, 내가 필요한 것과는 맞지 않아요.

 

I have created two xml files for the animations but I do not know how to start them when I change the visibility of a LinearLayout.

LinearLayout의 가시성(visibility)을 변경할 때 애니메이션을 시작하는 방법을 모르겠습니다. 두 개의 XML 파일로 애니메이션을 만들었습니다.

 

 

 

 높은 점수를 받은 Solution 

With the new animation API that was introduced in Android 3.0 (Honeycomb) it is very simple to create such animations.

Android 3.0(Honeycomb)에서 소개된 새로운 애니메이션 API를 사용하면 이러한 애니메이션을 쉽게 만들 수 있습니다.

 

Sliding a View down by a distance:

뷰를 아래로 지정한 거리만큼 슬라이드하는 방법:

view.animate().translationY(distance);

 

You can later slide the View back to its original position like this:

나중에 다음과 같이 View를 원래 위치로 다시 슬라이드 할 수 있습니다:

view.animate().translationY(0);

---

You can also easily combine multiple animations. The following animation will slide a View down by its height and fade it in at the same time:

여러 애니메이션을 쉽게 결합할 수도 있습니다. 다음 애니메이션은 뷰를 높이만큼 아래로 슬라이드하면서 동시에 페이드 인시킵니다:

// Prepare the View for the animation
view.setVisibility(View.VISIBLE);
view.setAlpha(0.0f);

// Start the animation
view.animate()
    .translationY(view.getHeight())
    .alpha(1.0f)
    .setListener(null);

 

You can then fade the View back out and slide it back to its original position. We also set an AnimatorListener so we can set the visibility of the View back to GONE once the animation is finished:

그런 다음 View를 다시 원래 위치로 슬라이드 아웃하고 사라지도록 할 수 있습니다. 또한 애니메이션이 끝나면 View의 가시성을 다시 GONE으로 설정할 수 있도록 AnimatorListener를 설정했습니다.

view.animate()
    .translationY(0)
    .alpha(0.0f)
    .setListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            view.setVisibility(View.GONE);
        }
    });

 

 

 가장 최근 달린 Solution 

With Kotlin extensions you can use this:

Kotlin 확장을 사용하면 이렇게 할 수 있습니다:

enum class SlideDirection{
    UP,
    DOWN,
    LEFT,
    RIGHT
}

enum class SlideType{
    SHOW,
    HIDE
}

fun View.slideAnimation(direction: SlideDirection, type: SlideType, duration: Long = 250){
    val fromX: Float
    val toX: Float
    val fromY: Float
    val toY: Float
    val array = IntArray(2)
    getLocationInWindow(array)
    if((type == SlideType.HIDE && (direction == SlideDirection.RIGHT || direction == SlideDirection.DOWN)) ||
        (type == SlideType.SHOW && (direction == SlideDirection.LEFT || direction == SlideDirection.UP))   ){
        val displayMetrics = DisplayMetrics()
        val windowManager = context.getSystemService(Context.WINDOW_SERVICE) as WindowManager
        windowManager.defaultDisplay.getMetrics(displayMetrics)
        val deviceWidth = displayMetrics.widthPixels
        val deviceHeight = displayMetrics.heightPixels
        array[0] = deviceWidth
        array[1] = deviceHeight
    }
    when (direction) {
        SlideDirection.UP -> {
            fromX = 0f
            toX = 0f
            fromY = if(type == SlideType.HIDE) 0f else (array[1] + height).toFloat()
            toY = if(type == SlideType.HIDE) -1f * (array[1] + height)  else 0f
        }
        SlideDirection.DOWN -> {
            fromX = 0f
            toX = 0f
            fromY = if(type == SlideType.HIDE) 0f else -1f * (array[1] + height)
            toY = if(type == SlideType.HIDE) 1f * (array[1] + height)  else 0f
        }
        SlideDirection.LEFT -> {
            fromX = if(type == SlideType.HIDE) 0f else 1f * (array[0] + width)
            toX = if(type == SlideType.HIDE) -1f * (array[0] + width) else 0f
            fromY = 0f
            toY = 0f
        }
        SlideDirection.RIGHT -> {
            fromX = if(type == SlideType.HIDE) 0f else -1f * (array[0] + width)
            toX = if(type == SlideType.HIDE) 1f * (array[0] + width) else 0f
            fromY = 0f
            toY = 0f
        }
    }
    val animate = TranslateAnimation(
        fromX,
        toX,
        fromY,
        toY
    )
    animate.duration = duration
    animate.setAnimationListener(object: Animation.AnimationListener{
        override fun onAnimationRepeat(animation: Animation?) {

        }

        override fun onAnimationEnd(animation: Animation?) {
            if(type == SlideType.HIDE){
                visibility = View.INVISIBLE
            }
        }

        override fun onAnimationStart(animation: Animation?) {
            visibility = View.VISIBLE
        }

    })
    startAnimation(animate)
}

 

Example for the extension:

확장 기능을 위한 예시:

view.slideAnimation(SlideDirection.UP, SlideType.HIDE)//to make it disappear through top of the screen
view.slideAnimation(SlideDirection.DOWN, SlideType.SHOW)//to make it reappear from top of the screen

view.slideAnimation(SlideDirection.DOWN, SlideType.HIDE)//to make it disappear through bottom of the screen
view.slideAnimation(SlideDirection.UP, SlideType.SHOW)//to make it reappear from bottom of the screen

 

 

출처 : https://stackoverflow.com/questions/19765938/show-and-hide-a-view-with-a-slide-up-down-animation