[코틀린]Kotlin floating button 클릭시 로딩 회전 #extend floating button #loading

floating Button을 클릭하면 로딩되는 동안 로딩 아이콘으로 변경되는 효과를 입혀보겠습니다.

 

총 3단계로 구분된다.

 

1. extended floating Button 만들기

 

2. 버튼 .shrink() / .extend()

 

3. 버튼 회전

 

 

 

 

1. extended floating Button 만들기

 

1) gradle 추가

 

   - implementation 'com.google.android.material:material:1.2.0-alpha01'

 

 

2) layout.xml

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/btn_crawl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:borderWidth="0dp"
        app:fabSize="normal"
        android:elevation="6dp"
        android:text="현재가격 크롤링"
        android:backgroundTint="@color/goldenrod"
        app:icon="@drawable/ic_crawl"
        />

위와 같은 버튼이 생성됩니다.

 

 

 

 

2. 버튼 shrink / extend

 

activity에서

(해당 floating button).shrink() 하면 아이콘만 남은 동그란 모양으로 변합니다.

반대로 (해당 floating button).extend() 하면 text까지 보이는 넓은 모양으로 돌아옵니다.

 

.shrink()

 

 

 

 

3. 버튼 회전

 

- 원형의 아이콘이 되면 animation을 활용하여 회전시켜주면 됩니다.

- 아이콘은 .setIconResoure로 변경가능하니 로딩 아이콘으로 잠시 바꿔주는 것이 좋겠죠?

 

            btn_crawl.setIconResource(R.drawable.ic_refresh)
            val rotate = ObjectAnimator.ofFloat(btn_crawl, View.ROTATION, -360f, 0f)
            rotate.setDuration(1000)
            rotate.repeatCount = ObjectAnimator.INFINITE
            rotate.interpolator = LinearInterpolator()
            rotate.start()