[안드로이드 스튜디오]gif 없이 일정시간마다 배경이미지 변경 및 페이드인, 아웃

이번에 새로운 프로젝트를 하던도 중 지속적으로 이미지가 바뀌는 배경을 만들어야 했습니다! 그냥 넣기는 밋밋하고 그래서 페이드인, 아웃 애니메이션을 사용하여 만들었는데 사진 여러가지를 gif로 만들어서 넣는게 더 간단할거 같기는 하네요 ㅎㅎ

 

그럼 일단 xml 부분부터 보도록 하겠습니다.

<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <ImageView
            android:id="@+id/backend_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/img_001_01"
            />
        <ImageView
            android:id="@+id/forward_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/img_001_02"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>

위와 같이 xml 부분을 짜주시면 됩니다! 페이드인, 아웃은 알파값을 조정해서 만들거기 때문에 두개의 이미지 뷰를 준비해 줍니다! 시작은 forward_img가 먼저 나오고요 뒤에있는 이미지의 알파값이 0에서부터 1로 올라가고 앞에있는 이미지가 1에서 0으로 줄어드는 형식입니다!

 

다음은 자바 파일을 보도록 하겠습니다!

public class MainFragment extends Fragment {
    FragmentMainBinding binding;
    Timer timer;
    ArrayList<Drawable> forwardDrawable = new ArrayList<>();
    ArrayList<Drawable> backendDrawable = new ArrayList<>();
    int backendNum = 0;
    int forwardNum = 0;
    boolean isForward = true;
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        binding = DataBindingUtil.inflate(
                inflater, R.layout.fragment_main, container, false);

        forwardDrawable.add(getResources().getDrawable(R.drawable.kyodong_img_001_02));
        forwardDrawable.add(getResources().getDrawable(R.drawable.kyodong_img_001_04));
        forwardDrawable.add(getResources().getDrawable(R.drawable.kyodong_img_001_06));
        backendDrawable.add(getResources().getDrawable(R.drawable.kyodong_img_001_03));
        backendDrawable.add(getResources().getDrawable(R.drawable.kyodong_img_001_05));
        backendDrawable.add(getResources().getDrawable(R.drawable.kyodong_img_001_07));

        Start_Period();

        binding.mainScreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ((MainActivity) getActivity()).changeFragment(SubFragmet.newInstance());
            }
        });

        return binding.getRoot();
    }

    private void fadeOut(final ImageView outImg)
    {
        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setDuration(1000);

        fadeOut.setAnimationListener(new Animation.AnimationListener()
        {
            public void onAnimationEnd(Animation animation)
            {
                switch (outImg.getId()){
                    case R.id.backend_img:
                        if(backendNum<2){
                            backendNum++;
                        }else {
                            backendNum=0;
                        }
                        outImg.setImageDrawable(backendDrawable.get(backendNum));
                        break;
                    case R.id.forward_img:
                        if(forwardNum<2){
                            forwardNum++;
                        }else {
                            forwardNum=0;
                        }
                        outImg.setImageDrawable(forwardDrawable.get(forwardNum));
                        break;
                }
                outImg.setVisibility(View.GONE);
            }
            public void onAnimationRepeat(Animation animation) {}
            public void onAnimationStart(Animation animation) {}
        });

        outImg.startAnimation(fadeOut);
    }

    private void fadeIn(final ImageView inImg)
    {
        Animation fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new AccelerateInterpolator());
        fadeIn.setDuration(1000);

        fadeIn.setAnimationListener(new Animation.AnimationListener()
        {
            public void onAnimationEnd(Animation animation)
            {
                inImg.setVisibility(View.VISIBLE);
            }
            public void onAnimationRepeat(Animation animation) {}
            public void onAnimationStart(Animation animation) { }
        });
        inImg.startAnimation(fadeIn);
    }

    public void Start_Period(){
        timer = new Timer();
        timer.schedule(addTask, 0, 3*1000);
    }

    public void Stop_Period(){
        if(timer !=null) timer.cancel();
    }

    TimerTask addTask = new TimerTask() {
        @Override
        public void run() {
            binding.backendImg.clearAnimation();
            binding.forwardImg.clearAnimation();
            if(isForward){
                fadeIn(binding.backendImg);
                fadeOut(binding.forwardImg);
                isForward=false;
            }else{
                fadeIn(binding.forwardImg);
                fadeOut(binding.backendImg);
                isForward=true;
            }
        }
    };

}

 

저는 액티비티가 아닌 프래그먼트에 썼는데요. 액티비티에 위와 같이 사용하셔도 무방합니다!

코드를 설명해드리겠습니다!

 

먼저 Timer 부분입니다.

    public void Start_Period(){
        timer = new Timer();
        timer.schedule(addTask, 0, 3*1000);
    }

    public void Stop_Period(){
        if(timer !=null) timer.cancel();
    }

    TimerTask addTask = new TimerTask() {
        @Override
        public void run() {
            binding.backendImg.clearAnimation();
            binding.forwardImg.clearAnimation();
            if(isForward){
                fadeIn(binding.backendImg);
                fadeOut(binding.forwardImg);
                isForward=false;
            }else{
                fadeIn(binding.forwardImg);
                fadeOut(binding.backendImg);
                isForward=true;
            }
        }
    };

타이머 부분은 일정 초마다 메소드를 실행한다고 생각하시면 되는데요! timer.schedule 부분이 TimerTask 안에 run메소드를 일정시간마다 실행하겠다 라는 부분입니다! run안에 원하는 코드를 넣으시면 일정시간마다 이 코드를 실행하는데요! 저는 3초마다 한번 이미지가 바뀌도록 실행을 했습니다! isForward는 boolean 변수인데 현재 보여지는 이미지가 앞에 있는 이미지인지 뒤에 있는 이미지인지 구분하는 역할을 합니다!

 

다음은 3초마다 실행되는 페이드 인아웃 부분입니다!

    private void fadeOut(final ImageView outImg)
    {
        Animation fadeOut = new AlphaAnimation(1, 0);
        fadeOut.setInterpolator(new AccelerateInterpolator());
        fadeOut.setDuration(1000);

        fadeOut.setAnimationListener(new Animation.AnimationListener()
        {
            public void onAnimationEnd(Animation animation)
            {
                switch (outImg.getId()){
                    case R.id.backend_img:
                        if(backendNum<2){
                            backendNum++;
                        }else {
                            backendNum=0;
                        }
                        outImg.setImageDrawable(backendDrawable.get(backendNum));
                        break;
                    case R.id.forward_img:
                        if(forwardNum<2){
                            forwardNum++;
                        }else {
                            forwardNum=0;
                        }
                        outImg.setImageDrawable(forwardDrawable.get(forwardNum));
                        break;
                }
                outImg.setVisibility(View.GONE);
            }
            public void onAnimationRepeat(Animation animation) {}
            public void onAnimationStart(Animation animation) {}
        });

        outImg.startAnimation(fadeOut);
    }

    private void fadeIn(final ImageView inImg)
    {
        Animation fadeIn = new AlphaAnimation(0, 1);
        fadeIn.setInterpolator(new AccelerateInterpolator());
        fadeIn.setDuration(1000);

        fadeIn.setAnimationListener(new Animation.AnimationListener()
        {
            public void onAnimationEnd(Animation animation)
            {
                inImg.setVisibility(View.VISIBLE);
            }
            public void onAnimationRepeat(Animation animation) {}
            public void onAnimationStart(Animation animation) { }
        });
        inImg.startAnimation(fadeIn);
    }

 

이부분에서 바로 이미지의 알파값을 조정합니다! fadeIn 할 이미지는 AlphaAnimation(0, 1)을 통해 알파값이 0부터 1까지 천천히 올라가도록 하고요! fadeOut 이미지는 AlphaAnimation(1, 0)을 통해 1부터 0으로 천천히 내려가도록 합니다!

 

 

예시 영상은 이렇습니다! 감사합니다!