美文网首页
TabLayout+ViewPager联动

TabLayout+ViewPager联动

作者: enRegan | 来源:发表于2019-07-12 12:02 被阅读0次

昨天有人问TabLayout和ViewPager怎么联动,然后很早前做过了,忘的差不多了,写的demo回顾一下,直接上代码。
布局文件没啥说的,

<androidx.constraintlayout.widget.ConstraintLayout     
    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"
    tools:context=".TabViewPagerActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tableLayout"
        android:layout_width="412dp"
        android:layout_height="76dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="395dp"
        android:layout_height="644dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tableLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout挺好使得,拖拖改改就好了。

  tabLayout = findViewById(R.id.tableLayout);
  viewPager = findViewById(R.id.viewPager);

  TabLayout.Tab tab1 = tabLayout.newTab();
  TabLayout.Tab tab2 = tabLayout.newTab();

初始化以后

  tab1.setText("tab1");
  tab2.setText("tab2");
  tab1.setIcon(R.drawable.ic_launcher_background);
  tab2.setIcon(R.drawable.ic_launcher_foreground);
  tabLayout.addTab(tab1);
  tabLayout.addTab(tab2);

  View view1 = LayoutInflater.from(this).inflate(R.layout.view_pager_1, null);
  View view2 = LayoutInflater.from(this).inflate(R.layout.view_pager_2, null);

  viewPager.addView(view1);
  viewPager.addView(view2);

设置好子tab的字体和图片等属性,同时也只是自定义tab.setCustomView(),设置下即可。
关键在于如何联动。

viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

一句代码即可。
viewPager设置好adapter,tabLayout设置好监听器,最简单的联动就完成了。

viewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return viewPager.getChildCount();
            }

            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view == object;
            }

            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {

                return viewPager.getChildAt(position);
            }
        });
tabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int position = tab.getPosition();
                viewPager.setCurrentItem(position);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

完结撒花🎉

相关文章

网友评论

      本文标题:TabLayout+ViewPager联动

      本文链接:https://www.haomeiwen.com/subject/obrekctx.html