[안드로이드] Tab Custom Animation part3 - 탭 애니메이션 적용

저번 포스팅에서는 선택된 탭과 선택되지 않은 탭을 구별해주고, 탭 별로 화면도

보여줬습니다. 근데 탭 전환 시 부자연스러운 느낌이 듭니다. 그 부자연스러움을

애니메이션을 적용시켜 부드러운 느낌을 주려고 합니다. 

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

2022.04.09 - [안드로이드] - [안드로이드] Tab Custom Animation part2 - 탭 기능 구현

[안드로이드] Tab Custom Animation part2 - 탭 기능 구현

---

목차

1. 실행 화면

2. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

 

2. 메인 코드 구현 MainActivity.java

 - 수정 -

2-1 글로벌변수 추가

//현재 탭 위치
private int selectedTabNumber = 1;

  2-2 애니메이션 기능

 기존 선택 탭 설정, 비 선택 탭 설정 코드가 애니메이션이 끝나면 실행되는

이벤트(onAnimationEnd) 안에 들어갔습니다. 

// (선택탭번호 - 현재 위치 번호) * 텍스트뷰 넓이값
float slideTo = (tabNumber  - selectedTabNumber) * selectedTextView.getWidth();

TranslateAnimation translateAnimation =
        new TranslateAnimation(0, slideTo, 0, 0);

//구현 시간
translateAnimation.setDuration(300);

//현재 탭 위치
if(selectedTabNumber == 1){

    tabItem1.startAnimation(translateAnimation);

}else if(selectedTabNumber == 2){

    tabItem2.startAnimation(translateAnimation);

}else{
    tabItem3.startAnimation(translateAnimation);
}

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

    }

    //애니메이션 끝나면
    @Override
    public void onAnimationEnd(Animation animation) {

        //선택 탭 설정
        selectedTextView.setBackgroundResource(R.drawable.round_back_white100); //배경색상
        selectedTextView.setTypeface(null, Typeface.BOLD); //폰트타입
        selectedTextView.setTextColor(Color.BLACK); //텍스트 색상

        //비 선택 탭 설정
        nonSelectedTextView1.setBackgroundColor(ContextCompat.getColor(MainActivity.this,
                android.R.color.transparent));
        nonSelectedTextView1.setTypeface(null, Typeface.NORMAL);
        nonSelectedTextView1.setTextColor(Color.parseColor("#80FFFFFF"));

        nonSelectedTextView2.setBackgroundColor(ContextCompat.getColor(MainActivity.this,
                android.R.color.transparent));
        nonSelectedTextView2.setTypeface(null, Typeface.NORMAL);
        nonSelectedTextView2.setTextColor(Color.parseColor("#80FFFFFF"));
    }

    @Override
    public void onAnimationRepeat(Animation animation) {

    }
});

//탭번호 변수에 담기
selectedTabNumber = tabNumber;

 

 

2-3 전체 코드 

public class MainActivity extends AppCompatActivity {

    private TextView tabItem1, tabItem2, tabItem3;

    TextView selectedTextView; //선택된 탭 변수
    TextView nonSelectedTextView1; //비 선택 탭 변수1
    TextView nonSelectedTextView2; //비 선택 탭 변수2

    Fragment selectedFragment;//선택된 프래그먼트

    //현재 탭 위치
    private int selectedTabNumber = 1;

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

        tabItem1 = findViewById(R.id.tabItem1);
        tabItem2 = findViewById(R.id.tabItem2);
        tabItem3 = findViewById(R.id.tabItem3);

        //디폴트 1번탭 선택
        selectedTab(1);

        tabItem1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selectedTab(1);
            }
        });

        tabItem2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selectedTab(2);
            }
        });
        tabItem3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                selectedTab(3);
            }
        });
    }

    /**
     * 탭 선택 이벤트
     * @param tabNumber
     */
    private void selectedTab(int tabNumber){

        if(tabNumber == 1){ //탭1

            //선택된 탭, 비선택 탭 변수에 담기
            selectedTextView = tabItem1;
            nonSelectedTextView1 = tabItem2;
            nonSelectedTextView2 = tabItem3;

            //1번탭에 프래그먼트1
            selectedFragment = new FragmentOne();


        }else if(tabNumber == 2){ //탭2
            //선택된 탭, 비선택 탭 변수에 담기
            selectedTextView = tabItem2;
            nonSelectedTextView1 = tabItem1;
            nonSelectedTextView2 = tabItem3;

            //1번탭에 프래그먼트1
            selectedFragment = new FragmentTwo();

        }else{ //탭3
            //선택된 탭, 비선택 탭 변수에 담기
            selectedTextView = tabItem3;
            nonSelectedTextView1 = tabItem1;
            nonSelectedTextView2 = tabItem2;

            //1번탭에 프래그먼트1
            selectedFragment = new FragmentThree();
        }

        //프래그먼트 설정
        getSupportFragmentManager().beginTransaction()
                .setReorderingAllowed(true)
                .replace(R.id.fragmentContainer, selectedFragment, null)
                .commit();

        // (선택탭번호 - 현재 위치 번호) * 텍스트뷰 넓이값
        float slideTo = (tabNumber  - selectedTabNumber) * selectedTextView.getWidth();

        TranslateAnimation translateAnimation =
                new TranslateAnimation(0, slideTo, 0, 0);

        //구현 시간
        translateAnimation.setDuration(300);

        //현재 탭 위치
        if(selectedTabNumber == 1){

            tabItem1.startAnimation(translateAnimation);

        }else if(selectedTabNumber == 2){

            tabItem2.startAnimation(translateAnimation);

        }else{
            tabItem3.startAnimation(translateAnimation);
        }

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

            }

            //애니메이션 끝나면
            @Override
            public void onAnimationEnd(Animation animation) {

                //선택 탭 설정
                selectedTextView.setBackgroundResource(R.drawable.round_back_white100); //배경색상
                selectedTextView.setTypeface(null, Typeface.BOLD); //폰트타입
                selectedTextView.setTextColor(Color.BLACK); //텍스트 색상

                //비 선택 탭 설정
                nonSelectedTextView1.setBackgroundColor(ContextCompat.getColor(MainActivity.this,
                        android.R.color.transparent));
                nonSelectedTextView1.setTypeface(null, Typeface.NORMAL);
                nonSelectedTextView1.setTextColor(Color.parseColor("#80FFFFFF"));

                nonSelectedTextView2.setBackgroundColor(ContextCompat.getColor(MainActivity.this,
                        android.R.color.transparent));
                nonSelectedTextView2.setTypeface(null, Typeface.NORMAL);
                nonSelectedTextView2.setTextColor(Color.parseColor("#80FFFFFF"));
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        //탭번호 변수에 담기
        selectedTabNumber = tabNumber;
    }

}

2022.04.06 - [안드로이드] - [안드로이드] RecyclerView 다중 선택하는 방법

[안드로이드] RecyclerView 다중선택 하는 방법

2022.04.07 - [안드로이드] - [안드로이드] 코드(MainActivity) 에서 배경 색상 바꾸는 다양한 방법

[안드로이드] 코드(MainActivity) 에서 배경색상 바꾸는 다양한 방법

2022.03.30 - [안드로이드] - [안드로이드] 야구게임 만드는 방법 part1 - 화면구성 및 랜덤 숫자 생성

[안드로이드] 야구게임 만드는 방법 part1 - 화면구성 및 랜덤숫자 생성