[안드로이드 코틀린 ] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법 part2

recyclerView에 애니메이션 기능을 적용해서 서서히 리스트가 보이는 방법을 알아보겠습니다.

이번 시간에는 애니메이션 기능과 애니메이션 적용하는 방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.08.11 - [안드로이드] - [안드로이드 코틀린 ] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법 part1

[안드로이드 코틀린 ] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법 part1

---

목차

1. 실행 화면
2. 애니메이션 만들기
3. 메인 화면 activity_main.xml
4. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 애니메이션 만들기

- 설명 -

1. item_anim

  애니메이션 기능

2. item_layout_animation.xml

  애니메이션 레이아웃

2022.01.01 - [안드로이드] - [안드로이드 스튜디오] 애니메이션(Animation) 폴더 및 파일 생성하는 방법

[안드로이드 스튜디오] 애니메이션(Animation) 폴더 및 파일 생성하는 방법

 

 item_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="600">

<!-- 위치 전환 -->
    <translate
        android:fromYDelta="100" android:toYDelta="0"/>

<!-- 사이즈 변경 -->
    <scale
        android:fromXScale="70%" android:toXScale="100%"
        android:fromYScale="70%" android:toYScale="100%"
        android:pivotY="50%" android:pivotX="50%"/>

<!-- 투명도 -->
    <alpha
        android:fromAlpha="0" android:toAlpha="1"/>
</set>

 

 item_layout_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="15%"
    android:animationOrder="normal" android:animation="@anim/item_anim">

</layoutAnimation>

 

3. 메인 화면 activity_main.xml

- 설명 -

1. 리스트를 보여주는 RecyclerView

2. 리스트를 조회하는 Button

3. 애니메이션 레이아웃 속성 layoutAnimation

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layoutAnimation="@anim/item_layout_animation"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

    <Button
        android:id="@+id/search_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="조회"
        android:textSize="25sp"
        />
</LinearLayout>

4. 메인 코드 MainActivity.kt

- 설명 -

1. ItemAdapter(itemList)

  어댑터에 리스트 넘기기

2. itemAdapter.addItem(item)

  리스트에 데이터 추가

3. itemAdapter.notifyDataSetChanged()

  어댑터에 추가된 데이터 적용

4. recyclerView.startLayoutAnimation()

  애니메이션 실행

class MainActivity : AppCompatActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //객체 생성
        val itemList: ArrayList<Item> = ArrayList()
        val recyclerView: RecyclerView = findViewById(R.id.recyclerView)

        //어댑터 생성
        val itemAdapter: ItemAdapter = ItemAdapter(itemList)

        //어댑터 적용
        recyclerView.adapter = itemAdapter

        //버튼 클릭 이벤트트
       val searchButton: Button = findViewById(R.id.search_btn)
        searchButton.setOnClickListener {

            //초기화
            itemList.clear()

            //샘플 데이터 생성
            for(i in 1..20){

                val item: Item = Item("title${i}", "desc${i}")

                //데이터 등록
                itemAdapter.addItem(item)
            }

            //적용
            itemAdapter.notifyDataSetChanged()

            //애니메이션 실행
            recyclerView.startLayoutAnimation()
        }
    }//onCreate
}

2022.08.08 - [안드로이드] - [안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기

[안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기

2022.08.05 - [안드로이드] - [안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 회전 표시 쉽게 만드는 방법

2022.08.03 - [안드로이드] - [안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드는 방법

[안드로이드 코틀린] 애니메이션으로 뷰(View) 표시 및 숨기기 - 크로스페이드(CrossFade) 쉽게 만드

2022.07.27 - [안드로이드] - [안드로이드 코틀린] DatePicker 달력 만드는 방법

[안드로이드 코틀린] DatePicker 달력 만드는 방법