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

저번 포스팅에서는 화면 구성을 했습니다. 이번에는 탭을 누르면

선택된 탭과 선택되지 않은 탭을 구별해주고, 탭 별로 화면도

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

2022.04.08 - [안드로이드] - [안드로이드] Tab Custom Animation part1 - 화면 구성

[안드로이드] Tab Custom Animation part1 - 화면 구성

---

목차

1. 실행 화면

2. 화면(프래그먼트) 만들기

3. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 프래그먼트 Fragment 만들기

 프래그먼트 3개를 만듭니다. 

각 프래그먼트(Fragment)는 각 탭의 화면으로 쓰입니다.

2022.01.08 - [안드로이드] - [안드로이드 스튜디오] 프래그먼트(Fragemnt) 만드는 방법

[안드로이드 스튜디오] 프래그먼트(Fragemnt) 만드는 방법

 자바 파일명은 FragmentOne, FragmentTwo, FragmentThree

 xml파일명은 fragment_one, fragment_two, fragment_three

 2-1 코드

FragmentOne

public class FragmentOne extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }
}

FragmentTwo

public class FragmentTwo extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_two, container, false);
    }
}

FragmentThree

public class FragmentThree extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_three, container, false);
    }
}

 

 2-2 화면

fragment_one

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentOne">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="FragmentOne"
        android:textSize="30sp" />
</FrameLayout>

fragment_two

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentTwo">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="FragmentTwo"
        android:textSize="30sp" />

</FrameLayout>

fragment_three

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FragmentThree">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="FragmentThree"
        android:textSize="30sp" />

</FrameLayout>

 

 

 

3. 메인 코드 구현 MainActivity.java

- 설명 - 

 1. 각 탭을 선택하면 selectedTab(탭 번호)이 실행됩니다. 

 2. 선택한 탭 객체를 selectedTextView 변수에 넣습니다.

 3. 선택안된 탭 객체를 nonSelectedTextView1, 2 변수에

 넣습니다.

 4. 탭 번호에 따라 selectedFragment에 프래그먼트를 초기화합니다.

 5. 프래그먼트 설정에 selectedFragment를 넣고 화면을 변경해줍니다.

 6. selectedTextView, nonSelectedTextView1, 2를 통해 

 선택된 탭과 선택 안된 탭의 배경 색상, 글씨 타입, 텍스트 색상을 변경합니다. 

public class MainActivity extends AppCompatActivity {

    private TextView tabItem1, tabItem2, tabItem3;

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

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

    @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){

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

            selectedFragment = new FragmentOne();

        }else if(tabNumber == 2){

            selectedTextView = tabItem2;
            nonSelectedTextView1 = tabItem1;
            nonSelectedTextView2 = tabItem3;

            selectedFragment = new FragmentTwo();
        }else{

            selectedTextView = tabItem3;
            nonSelectedTextView1 = tabItem1;
            nonSelectedTextView2 = tabItem2;

            selectedFragment = new FragmentThree();
        }

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

        //선택 탭 설정
        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"));

    }
}​

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

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

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

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

2022.04.02 - [안드로이드] - [안드로이드] 같은 그림 찾기 게임 만드는 방법 part1 - 화면 구성

[안드로이드] 같은 그림 찾기 게임 만드는 방법 part1 - 화면구성