[안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경하면 표시(Indicator) 해주는 방법

이번 시간에는 View2를 이용해서 프래그먼트(Fragemnt)

화면 변경과 변경하면 하단에 현재 화면 위치를 표시해주는

Indicator을 적용하는 방법을 알아보겠습니다.

---

목차

1. 실행화면

2. 위치표시 라이브러리 등록하기

3. 프래그먼트(Fragemnt) 만들기

4. 프래그먼트 화면 구성 

5. 페이지 어뎁터 만들기 PageAdapter.java

6. 메인 화면 구성 activity_main.xml

7. 메인 코드 구현 MainActivity.java

---

1. 실행화면

 

2. 위치표시 라이브러리 등록하기

build.gradle(Module: 앱이름.app)

 implementation 'com.tbuonomo:dotsindicator:4.2'

문서: https://github.com/tommybuonomo/dotsindicator

GitHub - tommybuonomo/dotsindicator: Three material Dots Indicators for view pagers in Android !

 

3. 프래그먼트(Fragemnt) 만들기

3개의 프래그먼트를 만들었습니다.

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

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

Fragment1

public class Fragment1 extends Fragment {


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

 

Fragment2

public class Fragment2 extends Fragment {



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

 

Fragment3

public class Fragment3 extends Fragment {

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

 

 

4. 프래그먼트 화면 구성 

fragment_1.xml

<?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=".Fragment1">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="화면1"
        android:textSize="50sp"
        android:textColor="@color/black"/>
</FrameLayout>

 

fragment_2.xml

<?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=".Fragment2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="화면2"
        android:textSize="50sp"
        android:textColor="@color/black"/>
</FrameLayout>

 

fragment_3.xml

<?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=".Fragment3">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="화면3"
        android:textSize="50sp"
        android:textColor="@color/black"/>
</FrameLayout>

 

5. 페이지 어뎁터 만들기 PageAdapter.java

2021.12.31 - [안드로이드] - [안드로이드 스튜디오] 자바 클래스 생성하는 방법

[안드로이드 스튜디오] 자바 클래스 생성하는 방법

 

PageAdapter.java

public class PageAdapter extends FragmentStateAdapter {

    ArrayList<Fragment> fragments = new ArrayList<Fragment>();

    public PageAdapter(@NonNull FragmentActivity fragmentActivity, ArrayList<Fragment> fragments) {
        super(fragmentActivity);
        this.fragments = fragments;
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {

        switch( position ){
            case 0:
                return new Fragment1();
            case 1:
                return new Fragment2();
            default:
                return new Fragment3();
        }
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }
}

 

6. 메인 화면 구성 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

    <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
        android:id="@+id/dots_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="60dp"
        android:layout_gravity="center"
        app:selectedDotColor="@color/pink_200"
        app:dotsColor="@color/blue_200"
        app:dotsCornerRadius="8dp"
        app:dotsSize="16dp"
        app:dotsSpacing="4dp"
        app:dotsStrokeWidth="2dp" />
</RelativeLayout>

색상 res -> values -> colors.xml

<color name="blue_200">#90CAF9</color>
<color name="pink_200">#F48FB1</color>

 

7. 메인 코드 구현 MainActivity.java

public class MainActivity extends AppCompatActivity {

    PageAdapter pageAdapter;

    ViewPager2 viewPager2;
    
    ArrayList<Fragment> fragList = new ArrayList<Fragment>();

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

        viewPager2 = findViewById(R.id.viewPager2);

        //프래그먼트 선언
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();
        
        //프래그먼트 리스트에 등록
        fragList.add(fragment1);
        fragList.add(fragment2);
        fragList.add(fragment3);

        //어뎁터에 리스트 등록
        pageAdapter = new PageAdapter(this, fragList);

        //어뎁터 뷰페이져에 적용
        viewPager2.setAdapter(pageAdapter);

        //화며 표시 적용
        DotsIndicator indicator =  findViewById(R.id.dots_indicator);

        indicator.setViewPager2(viewPager2);
    }
}

2022.01.07 - [안드로이드] - [안드로이드] ViewPager2 갤러리 느낌으로 만드는 방법

[안드로이드] ViewPager2 갤러리 느낌으로 만드는 방법

2022.01.06 - [안드로이드] - [안드로이드] AlertDialog Custom 쉽게 만드는 방법

[안드로이드] AlertDialog Custom 쉽게 만드는 방법

2022.01.05 - [안드로이드] - [안드로이드] 테이블 모양 그리드뷰(GridView) 쉽게 만드는 방법

[안드로이드] 테이블 모양 그리드뷰(GridView) 쉽게 만드는 방법