안드로이드 스튜디오 x, y축 그림 이동 방법 kotlin

안녕하세요. 공돌이 입니다.

지난 포스팅에서는 그림, 텍스트, 버튼 등을 회전시키는 애니메이션 기능에 대해서 포스팅했습니다. 회전뿐만이 아니라 흐려진 상태에서 부각시키는 기능도 있으니, 요청이 있으면 해당 내용도 향후 포스팅 진행해 보도록 하겠습니다. 한 자리에 머물러 강조하는 애니메이션이 있었다면 이제는 자리를 이동하는 애니메이션 기능이 필요할 것입니다. 자리를 이동하는 애니메이션은 매우 고난이도의 작업이 필요할 것으로 예상이 됐지만, 의외로 간단합니다. 아래 소개 드릴 코드를 그대로 사용하시면 원하시는 위치로 이미지를 이동할 수 있습니다. 먼저 아래 그림은 본 포스팅의 출력 결과입니다.

이러한 x, y축 변화를 주기 위해서는 layout에서도 설정을 해 주셔야 합니다. Constraint layout, linear layout등 많이 접해 보셨을 것으로 알고 있습니다. 이번에는 GridLayout 입니다. 여기서 GridLayout으로 해당 그림 아이콘이 좌측 상단에 위치하도록 하였고 이를 기준으로 x축 혹은 y축을 이동하게 됩니다. 아래가 해당 코드입니다.

 

<androidx.gridlayout.widget.GridLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <ImageView

            android:id="@+id/imageView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            app:srcCompat="@mipmap/ic_launcher" />

    </androidx.gridlayout.widget.GridLayout>

 

노란색으로 표기한 부분이 GridLayout입니다. 이를 통해 개발자는 해당 이미지를 해당 layout 아래에 넣음으로써 그림을 원하는 위치로 이동할 수 있게 할 수가 있습니다.

기본적으로 좌표를 움직이기 위해서는 x축과 y축을 이동하게 됩니다. 그리고 x축과 y축 두 조합을 동시에 움직이게 되면 위의 그림 예제처럼 그림이 대각선으로 이동하게 됩니다. X축 y축으로 표현을 하니 수학 수업 시간 같은 느낌이 많이 들지만 방향성을 나타내기 위해 가장 쉬운 방법이니 이해 부탁드립니다. 아래 코드가 위의 예제에 사용된 코드이며, MainActivity.kt입니다.

 

class MainActivity : AppCompatActivity() {

    var handler : Handler = Handler()

    var runnable : Runnable = Runnable {  }

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

       imagemove(imageView1, 600f, 600f, 2500L)

    }

    fun imagemove(image1: ImageView, posix:Float, posiy:Float, duration1: Long) {

 

        runnable = object : Runnable {

            override fun run() {

                ObjectAnimator.ofFloat(image1, "translationX", posix).apply {

                    duration = duration1

                    start()

                }

                ObjectAnimator.ofFloat(image1, "translationY", posiy).apply {

                    duration = duration1

                    start()

                }

                handler.postDelayed(runnable, duration1)

            }

        }

        handler.post(runnable)

    }

}

먼저 노란색으로 표기한 함수 2개가 필요합니다. 두 함수는 실제 애니메이션이 동작될 때 지속적으로 자리 이동이 발생할 수 있도록 도와주는 값입니다. 따라서 class MainActivity 아래에 바로 입력해 주시면 됩니다. 다음 초록색은 imagemove라는 함수를 선언하여 원하는 이미지를 움직일 수 있도록 요청한 모습입니다. Imagemove()괄호 안에 imageView1, 600f, 600f, 2500L 이렇게 선언되어 있습니다. 괄호 안의 순서대로 그림 파일, x축, y축, 시간으로 함수를 만들었기 때문에 이와 같은 순서로 값을 나열했습니다. 함수 imagemove에 대해서 override fun oncreate{} 괄호 밖에 선언을 해야 합니다. 그래야 여러 번 계속해서 해당 함수를 불러올 수 있기 때문입니다. Fun imagemove()로 선언을 했으며, 이미지와 각각의 괄호 안에 불러올 상수들에 대해 타입을 선언해 주었습니다.

 

그다음 하늘색이 실제로 해당 함수를 지속적으로 운영될 수 있도록 해 주는 함수입니다. For 문 처럼 특정 조건 하에 계속 실행되는 명령어는 아니나 기본적으로 해당 함수가 지속될 수 있도록 도와준다고 이해하시면 될 것 같습니다. 마지막으로 빨간색 글씨 처리 한 부분이 최종적으로 x축과 y축을 움직이도록 하기 위한 명령어입니다. 함수에서 선언된 값을 가지고 translationX라는 함수로 x축을 컨트롤하게 됩니다. 여기서는 posix만큼 변화를 주도록 하였습니다. y축도 x축처럼 translationY라는 함수로 posiy만큼 이동을 하도록 명령하였습니다. 해당 변화에 대해서 얼마만큼의 시간을 거쳐 이동을 할 것이냐에 대해서 duration이라는 값을 설정해야 하는데, 앞서 druation1이라는 선언된 값을 가져오도록 하였기에 duration = duration1으로 설정하였습니다. 이후 파란색 글씨는 최종적으로 해당 함수가 지속적으로 돌 수 있도록 선언하고 있습니다.

 

이렇게 글로 표현을 잘해 보려고 했지만, 사실 이해하기 매우 난해할 것으로 생각합니다. 그래서 위의 코드를 그대로 사용하시어 초록색 부분인 imagemove(imageView1, 600f, 600f, 2500L)에서 600f의 값과 2500L값을 바꿔 가며 진행을 해 보시는 것을 추천합니다. x축만 이동을 원한다면 ObjectAnimator.ofFloat라고 되어 있는 translationY 가 포함된 행의 전체를 지워 주시면 됩니다. } 괄호 닫은 부분까지 입니다. 혹은 초록색 부분인 imagemove(imageView1, 600f, 0f, 2500L)로 표기를 해 주셔도 됩니다.

 

여기까지 그림을 x, y 축으로 이동하는 방법에 대해서 소개를 해 보았습니다. 실제로 한번 해 보시면 생각보다 어렵지 않다는 것을 알 수 있습니다. 본 포스팅에서는 fun을 사용하여 함수를 불러오도록 하였지만, 실제 함수 선언 없이도 진행이 가능합니다. 한번 함수 선언 없이 연습을 해 보는 것도 실력 향상에 큰 도움이 될 수 있을 것 같습니다.

감사합니다.