Android TabLayout

最新推荐文章于 2025-04-17 09:12:09 发布

libei_march

最新推荐文章于 2025-04-17 09:12:09 发布

阅读量635

点赞数 1

分类专栏： android 文章标签： android

本文链接：https://blog.youkuaiyun.com/libei_march/article/details/52194303

版权

android 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了在Android中如何使用TabLayout和ViewPager实现一个带有下拉菜单的Tab效果。通过自定义TabLayout的Tab，设置自定义View并绑定PopWindow来创建下拉菜单。同时，监听ViewPager的切换事件来改变View的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android中的TabLayout配合ViewPager使用组合是目前非常常见的一种展现方式。具体的xml配置如下:

<RelativeLayout
        android:id="@+id/layout_tabs"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_below="@id/layout_title">

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/app_main_color"
            app:tabIndicatorHeight="3dp"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/app_main_color"
            app:tabTextAppearance="@style/MyPopularityTabTextAppearance"
            app:tabTextColor="@color/black" />
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/layout_tabs"
        android:background="@color/white"
  app:layout_behavior="@string/appbar_scrolling_view_behavior" />

下图是我的需求：点击后能弹出一个列表，每个栏目的数据不一样
这里就需要自定义TabLayout.Tab 中的mCustomView；
TabLayout的用法这里就不阐述了，只描述上图实现
具体步骤如下:
1：初始化TabLayout后，重设一下每个Tab的View

private void setupTabViews() {
        for (int i = 0, size = mTabLayout.getTabCount(); i < size; i++) {
            mTabLayout.getTabAt(i).setCustomView(getTabView(i));
        }
    }

2:生成View，并用一个集合装载（后面会用到）

private LinkedList<GQRecordTabView> tabViews = new LinkedList<>();

    public View getTabView(int position) {
        GQRecordTabView tabView = (GQRecordTabView) LayoutInflater.from(this).inflate(R.layout.widget_tab_text, null);
        tabView.setText(mTitleList.get(position).getTitleName());
        tabView.setPopData(mPopData.get(position));
        tabView.setOnDateChangeListener(this);
        if (position == 0) {
            tabView.setChecked(true);
            tabView.setCanShowPop(true);
        }
        tabViews.add(tabView);
        return tabView;
    }

3：GQRecordTabView是一个自定义的View,我在里面给他绑定了一个PopWindow用于实现上面的下拉菜单（代码就不贴出来了，同学你按自己的逻辑写就好了）
4：自定义View后需要我们手动去change View的状态，这里我们监听ViewPager的切换事件

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //手动变更tabView的状态
                for (int i = 0; i < tabViews.size(); i++) {
                    if (i == position) {
                        tabViews.get(i).setChecked(true);
                        tabViews.get(i).setCanShowPop(true);
                    } else {
                        tabViews.get(i).setChecked(false);
                        tabViews.get(i).setCanShowPop(false);
                    }
                }
                mCurrentIndex = position;

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });