[Android] 탭 메뉴의 구현 2편 (TabLayout과 ViewPager2)-dot Indicator의 구현

업무의 목적:

* TabLayout을 이용 할 경우 ViewPager2를 이용해야한다. 경우에 따라서 dot(점) 인디케이터를 구현해야 할 필요가 있는데 오픈 소스 라이브러리를 이용하여 구현 하였다.

 

Dot Indicator

 

구현 방법:

오픈소스 라이브러리는 동일 한 라이브러임에도 불구 하고 2종류의 패키지?로 배포 중에 있다

implementation 'com.tbuonomo:dotsindicator:4.2',

implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:4.1.2'

둘다 구현 부는 동일한데 둘중 한가지를 선택해서 사용하면 된다.

 

그레이들

dependencies {
	...
    implementation "androidx.viewpager2:viewpager2:1.0.0"   //ViewPager2
    implementation 'com.tbuonomo:dotsindicator:4.2'//인디케이터

}

 

activity_main.xml

    <!--탭 레이아웃-->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/layout_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabMode="scrollable"
        app:tabTextColor="#000000"
        app:tabSelectedTextColor="#FF0000"
        app:tabIndicatorColor="#00FF00" />
	<!--뷰페이저 -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager_content"
        android:layout_width="match_parent"
        android:layout_height="250dp" />

	<!--인디케이터 타입1-->
    <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
        android:id="@+id/dots_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:dotsColor="#FF0000"
        app:dotsCornerRadius="8dp"
        app:dotsSize="16dp"
        app:dotsSpacing="4dp"
        app:dotsWidthFactor="2.5"
        app:selectedDotColor="#00FF00"
        app:progressMode="false"/>
        
    <!--인디케이터 타입2-->
    <com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
        android:id="@+id/worm_dots_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:dotsColor="#ff0000"
        app:dotsStrokeColor="#00FF00"
        app:dotsCornerRadius="10dp"
        app:dotsSize="20dp"
        app:dotsSpacing="5dp"
        app:dotsStrokeWidth="7dp"/>

 

MainActivity

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

        mTabLayout = (TabLayout) findViewById(R.id.layout_tab);
//        mTabLayout.addTab(mTabLayout.newTab().setText("홈"));

        mViewPager = (ViewPager2) findViewById(R.id.pager_content);

        //프레그먼트 이동 구현
        ContentsPagerAdapter contentsPagerAdapter = new ContentsPagerAdapter(this);
        mViewPager.setAdapter(contentsPagerAdapter);

        final List<String> tabElement = Arrays.asList("홈","게임","ㅅㅁㅅ","ㅇㄹㅇㄹㅇㄹ","ㅇㄹㅇㄹㅇㄹㅇ","ㅇㄹㅇㄹㅇㄹㅇ");
		
        //mTabLayout.setupWithViewPager(); //viewPager1을 붙일수 있음.
        //tabLyout와 viewPager 연결
        new TabLayoutMediator(mTabLayout, mViewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull @NotNull TabLayout.Tab tab, int position) {
                TextView textView = new TextView(MainActivity.this);
                textView.setText(tabElement.get(position));
                tab.setCustomView(textView);
            }
        }).attach();
        
        //인디케이터 타입1
        DotsIndicator dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator);
        dotsIndicator.setViewPager2(mViewPager);
		//인디케이터 타입2
        WormDotsIndicator wormDotsIndicator = (WormDotsIndicator) findViewById(R.id.worm_dots_indicator);
        wormDotsIndicator.setViewPager2(mViewPager);

    }

 

코드 첨부:

storeTabBar1 (4).7z

0.53MB

 

참고자료:

[1] https://androidrepo.com/repo/tommybuonomo-dotsindicator-android-viewpager 

[2] https://github.com/tommybuonomo/dotsindicator