[안드로이드] 밀어서 화면 변경 ViewPager2 화면 변경 버튼 만드는 방법

이번 시간에는 이전에 했던 ViewPage2 예제를

가지고 이어서 버튼을 추가해서 화면 변경을

해보도록 하겠습니다.

이전 코드를 먼저 보시고 따라 하시면 됩니다.

2022.01.09 - [안드로이드] - [안드로이드] ViewPager2 화면 변경 표시(Indicator) 직접 만드는 방법

[안드로이드] ViewPager2 화면 변경 표시(Indicator) 직접 만드는 방법

목차

1. 실행화면

2. 라이브러리 등록 - Material

3. 프래그먼트 배경 색상 변경, 글씨 색 변경

4. 메인 화면 구성 activity_main.xml

5. 메인 코드 구현 MainActivity.java

---

1. 실행화면

2. 라이브러리 등록 - Material

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

'com.google.android.material:material:1.4.0'

 

3. 프래그먼트 배경색상 변경, 글씨 색 변경

res -> values -> colors.xml

<color name="gray_700">#616161</color>

<color name="white">#FFFFFFFF</color>

 

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"
    android:background="@color/gray_700"
    tools:context=".Fragment1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="화면1"
        android:textSize="50sp"
        android:layout_gravity="center"
        android:textColor="@color/white"
        />
</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"
    android:background="@color/gray_700"
    tools:context=".Fragment2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="화면2"
        android:textSize="50sp"
        android:layout_gravity="center"
        android:textColor="@color/white"
        />
</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"
    android:background="@color/gray_700"
    tools:context=".Fragment3">

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

 

 

4. 메인 화면 구성 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/viewPater2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"/>

    <LinearLayout
        android:id="@+id/dots_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="60dp"
        android:orientation="horizontal" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnBack"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="15dp"
        android:layout_marginBottom="80dp"
        android:text="Back"
        android:textColor="@color/white"
        app:rippleColor="@color/white" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnNext"
        style="@style/Widget.MaterialComponents.Button.TextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="15dp"
        android:layout_marginBottom="80dp"
        android:text="Next"
        android:textColor="@color/white"
        app:rippleColor="@color/white" />

</RelativeLayout>

 

5. 메인 코드 구현 MainActivity.java

1. currentPage 변수는 선택된 화면 값을 저장하기 위해 만들었다.

2. 화면 변경 시 이벤트 설정 안에 if문을 작성했다.

3. position이 0이면 첫 번째 페이지니까

   다음 페이지 넘기는 버튼만 보여주고

   Next 문자를 넣었다.

4. position이 dots.length -1 이면 마지막 페이지니까

   다음 페이지 넘기는 버튼은 비활성화, 이전 페이지

   넘기는 버튼은 보여주고 활성화시켰다.

5. 둘 다 아니면 다음 페이지 버튼과 이전 페이지 버튼

모두 활성화 및 보여준다. 

6. viewPager2.setCurrentItem를 통해서 버튼을 눌러

페이지를 변경시켜 주었다.

public class MainActivity extends AppCompatActivity {

    PageAdapter pageAdapter;

    ViewPager2 viewPager2;

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

    LinearLayout dotsLayout;

    TextView[] dots;

    Button btnBack, btnNext;

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

        viewPager2 = findViewById(R.id.viewPater2);

        btnBack = findViewById(R.id.btnBack);
        btnNext = findViewById(R.id.btnNext);


        //프래그먼트 선언
        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);

        dotsLayout = findViewById(R.id.dots_indicator);

        dots = new TextView[3];

        dotsIndicator();

        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager2.setCurrentItem(currentPage - 1);
            }
        });

        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewPager2.setCurrentItem(currentPage + 1);
            }
        });


        //화면 변경 시 이벤트 설정
        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);

                selectedIndicator(position);

                currentPage = position;

                if (position == 0) { //first Page
                    btnNext.setEnabled(true);
                    btnBack.setEnabled(false);
                    btnBack.setVisibility(View.INVISIBLE);
                    btnNext.setText("Next");
                    btnBack.setText("");
                } else if (position == dots.length - 1) { //Last Page
                    btnNext.setEnabled(false);
                    btnBack.setEnabled(true);
                    btnBack.setVisibility(View.VISIBLE);
                    btnNext.setText("End");
                    btnBack.setText("Back");
                } else {
                    btnNext.setEnabled(true);
                    btnBack.setEnabled(true);
                    btnBack.setVisibility(View.VISIBLE);
                    btnNext.setText("Next");
                    btnBack.setText("Back");
                }
            }
        });
    }

    /**
     * 표시 기능 색상 설정
     *
     * @param position 위치
     */
    private void selectedIndicator(int position) {

        for (int i = 0; i < dots.length; i++) {

            if (i == position) { //선택되면

                dots[i].setTextColor(ContextCompat.getColor(getApplicationContext(),
                        R.color.pink_200));

            } else { //안되면

                dots[i].setTextColor(ContextCompat.getColor(getApplicationContext(),
                        R.color.blue_200));
            }
        }
    }

    /**
     * 표시 기능 설정
     */
    private void dotsIndicator() {

        for (int i = 0; i < dots.length; i++) {

            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#9679")); //HTML Uni code
            dots[i].setTextSize(25);

            //텍스트뷰 레이아웃 설정
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

            params.leftMargin = 30; //텍스트뷰 거리 조절

            //텍스트뷰에 레이아웃 적용
            dots[i].setLayoutParams(params);

            //레이아웃에 텍스트뷰 적용
            dotsLayout.addView(dots[i]);
        }
    }
}

 

2022.01.01 - [안드로이드] - [안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

[안드로이드] RecyclerView Item Animation 서서히 나타나는 효과 주는 방법

2022.01.02 - [안드로이드] - [안드로이드] RecyclerView Animation 스크롤(Scroll) 에 애니메이션 효과주는 방법

[안드로이드] RecyclerView Animation 스크롤(Scroll) 에 애니메이션 효과주는 방법

2022.01.03 - [안드로이드] - [안드로이드] RecyclerView 스와이프(Swiped) 옆으로 밀어서 삭제하는 방법

[안드로이드] RecyclerView 스와이프(Swiped) 옆으로 밀어서 삭제하는 방법