TabLayout和ViewPager的联动效果实现

最新推荐文章于 2021-05-31 11:05:10 发布

Cattle_Wei

最新推荐文章于 2021-05-31 11:05:10 发布

阅读量491

点赞数

本文链接：https://blog.youkuaiyun.com/niu_wei/article/details/78044512

版权

本文详细介绍如何在Android应用中实现TabLayout与ViewPager组件的联动效果。通过具体代码示例，从依赖导入到布局文件配置，再到核心逻辑处理，帮助读者掌握这一常用UI交互模式的实现方法。

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

我们在使用ViewPager的时候往往是和Tablayout绑在一起来实现的，而它们是如何紧紧的绑在一起，

今天的这篇博客会带你去一步步去实现。

效果如图：

在编写代码之前呢，我们要导一个依赖，如果不知道怎么导或者是导哪个，可以复制以下代码去添加到你的build.gradle里，然后取进行编译

compile 'com.android.support:design:26.0.0-alpha1'

这行代码要加在 dependencies 里面

xml界面：

  主页面：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="niuwei.com.tablayoutandviewpagerdemo.MainActivity">
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tab"
        ></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp"
        ></android.support.v4.view.ViewPager>
</LinearLayout>

   ViewPager布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="主页面"
        android:textColor="#f00"
        android:textSize="30sp"
        android:gravity="center"
        />

</LinearLayout>

Android代码：
 
public class MainActivity extends AppCompatActivity {

    private ViewPager vp;
    private TabLayout tab;
    String[] str={"推荐","热点","视频","健康","孕婴","社会","体育","娱乐"};
    List<Fragment> list;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //找到控件
        vp = (ViewPager) findViewById(R.id.vp);
        tab = (TabLayout) findViewById(R.id.tab);
        //设置TabLayout可以滑动
        tab.setTabMode(TabLayout.MODE_SCROLLABLE);
        initVp();
    }

    private void initVp() {
        /**
         *  创建一个泛型为Fragment的集合
         *  将Fragment界面根据标题数量在for循环里加入集合
         */

        list=new ArrayList<>();
        for (int i = 0; i <str.length ; i++) {
            list.add(new VpFragment());
        }
        //进行数据的适配，由于这里用到了Fragment，所以要用到一个Fragment的管理者
        vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
        //设置TabLayout联动
        tab.setupWithViewPager(vp);
    }
    class MyAdapter extends FragmentPagerAdapter{

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }
        //getPageTitle这里是得到滑动本页面的标题
        @Override
        public CharSequence getPageTitle(int position) {
            return str[position];
        }
    }
}

   我们还需要一个Fragment类 去找到ViewPager界面

public class VpFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v=View.inflate(getActivity(),R.layout.vp_layout,null);
        return v;
    }
}

   要注意Fragment要导v4包下。

     好了，这样一个TabLayout和ViewPager的联动就完成了。