(Android) 애니메이션을 이용한 슬라이딩 페이지(3)

1. 개요

    애니메이션 기을 이용하여 슬라이딩 페이지 만들기

 

2. 구성

     - 프로젝트 생성

     - 화면 UI (Activity_main.xml)  만들기

     - 애니메이션 생성. 

     - 애니메이션 기능 추가. 여기부터

     - 애니메이션 이벤트 연결

 

3. 구현

    3.1 오늘은 MainActivity.java 파일에서만 작업을 합니다.

          Activity_main.xml에서 만든 버튼과  애니메이션을 연결하는 작업을 진행합니다.

 

    3.2 기능설명

          btnOpen : 버튼을 클릭하면 아래에서 슬라이딩 페이지가 열리게 됩니다.

          btnClose : 슬라이등 창이 아래로 사라지게 됩니다.

          bottompage : 슬라이딩 페이지 레이아웃입니다.

          dim : bottompage 레이아웃이 표시되고 남은영역을 비활성화 보이게 처리하는 영역입니다.

          show_dim : dim 영역을 활성화(보이게) 합니다.

          hidden_dim : dim 영역을  비활성화(안보이게) 합니다.

          show_bottompage : 아래 page영역을 보여줍니다.

          hidden_bottompage : 아래 page 영역을 안 보여줍니다.

 

 

    3.3 사용할 페이지 레이아웃들 선언합니다.

bottompage = findViewById(R.id.bottompage);
dim = findViewById(R.id.dim);

 

    3.4 애니메이션 설정을 시작합니다.

           우선 애니메이션 선언을 먼저 해줍니다.

show_dim= AnimationUtils.loadAnimation(this, R.anim.show_dim);

         애니메이션 액션을 동작을 연결해 줍니다.

         onAnimationStart : 이내메이션이 시작 됐을 때 호출하는 함수입니다.

         onAnimationEnd : 애니메이션이 완료 됐을 때 호출하는 함수입니다.

         onAnimationRepeat : 애니메이션이 반복을 할 때 호출하는 함수입니다.

         

         2개의 애니메이션을 이용하여 슬라이딩을 구현하고 있습니다. 때문에 1번 애니메이션(show_dim)이 동작을 다 한 다음에 2번 애니메이션(show_bottompage)이 동작하게 설정을 하였습니다. 때문에 1번 애니메이션이 시작할 때 Dim을 보여지게 설정을 하고 (dim.setVisibility(View.VISIBLE)) dim에 해당하는 애니메이션이 다 완료가 되면 2번 애니메이션 ( bottompage.startAnimation(show_bottompage))이 시작하게 됩니다. 2번 애니메이션도 시작과 동시에 레이아웃을 보이게 (bottompage.setVisibility(View.VISIBLE))하고 완료되면 종료합니다.  

 

       나머지는 실행을 해보면서 확인해 보고 닫히는 것도 역순으로 생각해서 진행하면 됩니다.

       닫히는 기능은 따로 설명을 하지 않겠습니다.

show_dim.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        dim.setVisibility(View.VISIBLE);
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        bottompage.startAnimation(show_bottompage);
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
});

show_bottompage.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        bottompage.setVisibility(View.VISIBLE);
    }

    @Override
    public void onAnimationEnd(Animation animation) {

    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
});

4. 완료시 페이지

5. 소스

package com.example.alphalayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    boolean isshowpage = false;
    Button btnOpen, btnClose;
    LinearLayout bottompage, dim;
    Animation show_dim, hidden_dim, show_bottompage, hidden_bottompage;

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

        bottompage = findViewById(R.id.bottompage);
        dim = findViewById(R.id.dim);

        show_dim= AnimationUtils.loadAnimation(this, R.anim.show_dim);
        hidden_dim=  AnimationUtils.loadAnimation(this, R.anim.hidden_dim);

        show_bottompage=AnimationUtils.loadAnimation(this, R.anim.show_bottompage);
        hidden_bottompage=AnimationUtils.loadAnimation(this, R.anim.hidden_bottompage);

        show_bottompage.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                bottompage.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        hidden_bottompage.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                bottompage.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        show_dim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                dim.setVisibility(View.VISIBLE);
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                bottompage.startAnimation(show_bottompage);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        hidden_dim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                dim.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                bottompage.startAnimation(hidden_bottompage);
            }
            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        btnOpen = findViewById(R.id.btnOpen);
        btnOpen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                btnOpen.setClickable(false);

                    dim.startAnimation(show_dim);
                    isshowpage = true;

            }
        });

        btnClose = findViewById(R.id.btnClose);
        btnClose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dim.startAnimation(hidden_dim);
                isshowpage = false;
                btnOpen.setClickable(true);
              }
        });
    }
}

 

 

 

 

 

끝.