[JAVA][Android] 안드로이드 ImageSwitcher을 사용하여 부드럽게 이미지 전환하기

 

버튼을 눌러서 이미지 전환을 하는데 보통은 바로바로 바뀌는데 이번에는 부드럽게 전환해 보겠습니다.

• 부드러운 이미지 전환:
  • 이미지가 갑자기 바뀌는 것이 아니라, 전환 애니메이션이 추가되어 사용자에게 더 자연스럽고 시각적으로 만족스러운 경험을 제공.
  • 애니메이션을 통해 UI가 더욱 세련되고 직관적으로 보일 수 있습니다.
• 애니메이션의 손쉬운 구현:
  • 이미 제공되는 setInAnimation과 setOutAnimation 메소드를 통해 별도의 복잡한 애니메이션 코드를 작성하지 않고도 쉽게 이미지 전환 효과를 적용할 수 있습니다.
• 이미지 뷰 재사용:
  • ImageSwitcher는 ImageView를 재사용하므로, 메모리 효율이 높습니다. 매번 새로운 ImageView를 생성하는 대신 하나의 ImageView에 이미지를 바꾸는 방식으로 애니메이션이 이루어집니다.

사용하면 좋은 예

 

• 갤러리 앱:
  • 이미지 갤러리나 사진첩에서 이미지를 슬라이드처럼 부드럽게 넘기면서 보여줄 때 사용하기 좋습니다.
  • 예: 사진 뷰어에서 좌우 스와이프 동작에 따라 이미지를 전환할 때 ImageSwitcher를 사용할 수 있습니다.
• 튜토리얼 화면:
  • 앱의 첫 실행 시 사용자에게 앱 사용법을 설명하는 튜토리얼에서, 각 페이지나 섹션을 전환할 때 이미지 전환 효과를 줄 수 있습니다.
  • 예: 사용자에게 한 장씩 기능을 소개하는 이미지나 텍스트 전환에 ImageSwitcher를 적용해 매끄럽게 전환.
• 광고 배너:
  • 여러 이미지 광고를 순서대로 자동 또는 수동으로 넘길 때도 ImageSwitcher를 활용할 수 있습니다.
  • 예: 전자상거래 앱에서 프로모션 배너나 특가 상품 이미지를 슬라이드로 전환할 때 사용.
• 슬라이드쇼 기능:
  • 사용자에게 연속된 이미지를 보여주는 슬라이드쇼에서 이미지가 부드럽게 넘어가는 애니메이션 효과가 유용합니다.
  • 예: 여행 앱에서 여행지 사진을 연속적으로 보여주는 슬라이드쇼.

 

MainActivity

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageSwitcher imageSwitcher;
    private Button nextButton;

    // 이미지 배열
    private int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3};
    private int currentIndex = 0;

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

        imageSwitcher = findViewById(R.id.imageSwitcher);
        nextButton = findViewById(R.id.nextButton);

        // ImageSwitcher에 팩토리 설정 (이미지를 담을 ImageView를 생성)
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(getApplicationContext());
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                        ImageSwitcher.LayoutParams.MATCH_PARENT,
                        ImageSwitcher.LayoutParams.MATCH_PARENT));
                return imageView;
            }
        });

        // 초기 이미지 설정
        imageSwitcher.setImageResource(images[currentIndex]);

        // 버튼 클릭 시 다음 이미지로 전환
        nextButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                currentIndex++;
                if (currentIndex == images.length) {
                    currentIndex = 0;  // 마지막 이미지면 첫 번째 이미지로 돌아감
                }
                imageSwitcher.setImageResource(images[currentIndex]);
            }
        });
    }
}

 

 

activity_main.xml

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="16dp">

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:inAnimation="@android:anim/fade_in"
        android:outAnimation="@android:anim/fade_out" />

    <Button
        android:id="@+id/nextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next Image"
        android:layout_marginTop="20dp" />
</LinearLayout>

 

image1

 

 

image2 

 

 

image3

 

 

시연영상