[안드로이드] RecyclerView Item Animation 왼쪽, 오른쪽, 위, 아래 방향별로 효과 주는 방법

이번 시간에는 RecyclerView Item Animation을 통해

왼쪽, 오른쪽, 위, 아래 방향으로 효과 주는 방법을 

알아보겠습니다.

이전 시간에 했던 코드를 이어서 하겠습니다.

---

2022.01.01 - [안드로이드] - [안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

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

 

목차

1. 실행화면

2. 애니메이션 파일 추가

3. 메인 화면 수정 activity_main.xml

4. 메인 코드 수정 MainActivity.java

---

1. 실행화면

 

 

2. 애니메이션 파일 추가

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

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

 

2-1 left_to_right_ani.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    >
    <translate
        android:fromXDelta="-100%"
        android:interpolator="@android:interpolator/anticipate"
        android:toXDelta="0%"/>

    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1"/>
</set>

 

2-2  right_left_ani.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    >
    <translate
        android:fromXDelta="100%"
        android:interpolator="@android:interpolator/anticipate"
        android:toXDelta="0%"/>

    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:toAlpha="1"/>
</set>

 

2-3 bottom_to_top.ani.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    >
    <translate
        android:fromYDelta="50%"
        android:interpolator="@android:interpolator/anticipate"
        android:toYDelta="0%"/>

    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:interpolator/anticipate"
        android:toAlpha="1"/>
</set>

 

2-4 top_to_bottom_ani.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    >
    <translate
        android:fromYDelta="-25%"
        android:interpolator="@android:interpolator/anticipate"
        android:toYDelta="0%"/>

    <alpha
        android:fromAlpha="0"
        android:interpolator="@android:interpolator/anticipate"
        android:toAlpha="1"/>
</set>

 

2-5 layout_animation_left_right.xml

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

</layoutAnimation>

 

2-6 layout_animation_right_left.xml

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

</layoutAnimation>

 

2-7 layout_animation_top_bottom.xml

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

</layoutAnimation>

 

2-8 layout_animation_bottom_top.xml

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

</layoutAnimation>

 

 

2. 메인 화면 수정 activity_main.xml

<?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/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/leftToRightBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="좌 -> 우" />

        <Button
            android:id="@+id/rightToLeftBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="우 -> 좌" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/topToBottomBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="위 -> 아래" />

        <Button
            android:id="@+id/bottomToTopBtn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_weight="1"
            android:text="아래 -> 위" />
    </LinearLayout>
    
</LinearLayout>

 

3. 메인 코드 수정 MainActivity.java

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    RecyclerView recyclerView;
    ItemAdapter itemAdapter;

    Button leftAniBtn, rightAniBtn, upAniBtn, downAniBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recycler_view);

        itemAdapter = new ItemAdapter();
        recyclerView.setAdapter(itemAdapter);

        leftAniBtn = findViewById(R.id.leftToRightBtn);
        rightAniBtn = findViewById(R.id.rightToLeftBtn);
        upAniBtn = findViewById(R.id.topToBottomBtn);
        downAniBtn = findViewById(R.id.bottomToTopBtn);

        leftAniBtn.setOnClickListener(this);
        rightAniBtn.setOnClickListener(this);
        upAniBtn.setOnClickListener(this);
        downAniBtn.setOnClickListener(this);
    }

    /**
     * 조회
     */
    public void search(){
        //조회 전 화면 클리어
        itemAdapter.removeAllItem();

        //샘플 데이터 생성
        for(int i = 0; i < 20; i++){

            Item item = new Item();
            item.setTitle("title"+i);
            item.setDescription("description" + i);

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

        //적용
        itemAdapter.notifyDataSetChanged();

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

    @Override
    public void onClick(View view) {

        switch(view.getId()){

            case R.id.leftToRightBtn:
                search();
                setAnimation(R.anim.layout_animation_left_right);
                break;
            case R.id.rightToLeftBtn:
                search();
                setAnimation(R.anim.layout_animation_right_left);
                break;
            case R.id.topToBottomBtn:
                search();
                setAnimation(R.anim.layout_animation_top_bottom);
                break;
            case R.id.bottomToTopBtn:
                search();
                setAnimation(R.anim.layout_animation_bottom_top);
                break;
        }
    }

    public void setAnimation(int aniResource){

        LayoutAnimationController layoutAnimationController = AnimationUtils.loadLayoutAnimation(this,
                aniResource);
        recyclerView.setLayoutAnimation(layoutAnimationController);
    }
}