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

이번 시간에는 이전에 했던 ViewPager2 화면 변경 표시를

직접 만드는 방법에 대하여 알아보겠습니다.

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

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

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

목차

1. 실행화면

2. 메인 화면 수정 activity_main.xml

3. 메인 코드 수정 MainActivity.java

---

1. 실행화면

 

 

2. activity_main.xml 수정

라이브러리를 써서 만들었던 DotsIndicator가 LinearLayout로 바뀌었습니다.

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:id="@+id/viewPater2"
        />


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

 

3. MainActivity.java 수정

1. 3개의 텍스트뷰 생성

2. dotsIndicator() : 텍스트뷰 설정

 - 텍스트 뷰안에 HTML Uni Code를 이용해서 특수기호 ● 를 넣어준다.

 - 만들어진 텍스트뷰를 LinearLayout에 넣어준다.

3. selectedIndicator() : viewPager2에서 선택된 텍스트뷰 색상 설정

 - onPageSelected에서 얻은 화면 위치 값을 가지고 

 - 선택된 텍스트뷰의 색상을 변경해준다.

public class MainActivity extends AppCompatActivity {

    PageAdapter pageAdapter;

    ViewPager2 viewPager2;

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

    LinearLayout dotsLayout;

    TextView[] dots;

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

        viewPager2 = findViewById(R.id.viewPater2);

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

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

               selectedIndicator(position);
           }
       });
    }

    /**
     * 표시 기능 색상 설정
     * @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.07 - [안드로이드] - [안드로이드] ViewPager2 갤러리 느낌으로 만드는 방법

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

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

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

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

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