美文网首页高级UI
TabLayout 和 ViewPager 组合使用

TabLayout 和 ViewPager 组合使用

作者: Hello李昊男 | 来源:发表于2019-12-21 15:00 被阅读0次

因为在实际开发中TabLayout和ViewPager结合使用较多,所以下面主要是对这两者的结合使用。使用TabLayout不但可以实现点击切换Fragment的效果还可以实现与ViewPager的结合使用,以下是 效果图:布局上方是TabLayout,下方就是ViewPager

02.png

TabLayout 使用到的依赖:

implementation 'com.android.support:design:29.1.1'  

下面是在Activity中xml的代码,此处使用到相对布局(RelativeLayout)

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tab"
        app:tabMode="scrollable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_below="@+id/tab"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

用到的Java代码:

        mTab = (TabLayout) findViewById(R.id.tab);
        mVp = (ViewPager) findViewById(R.id.vp);
        //设置Tablayout与ViewPager同步
        mTab.setupWithViewPager(mVp);
        //这里的TabLayout数据较多,用集合存储
        beans = new ArrayList<>();
        //定义适配器与绑定
        adapter = new TypeAdapter(getSupportFragmentManager(), beans);
        mVp.setAdapter(adapter);
      

ViewPager用到的适配器:

public class Adapter extends FragmentPagerAdapter {

    private ArrayList<Bean> list;

    public Adapter(@NonNull FragmentManager fm, ArrayList<Bean> list) {
        super(fm);
        this.list = list;
    }

    public Adapter(@NonNull FragmentManager fm, int behavior, ArrayList<Bean> list) {
        super(fm, behavior);
        this.list = list;
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        //每次得到一个新的下标就会创建新的Fragment
        return new HomeFragment();
    }

    @Override
    public int getCount() {
        //定义的集合大小
        return list.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        //设置Tablayout的标题
        return list.get(position).getName();
    }
}

相关文章

网友评论

    本文标题:TabLayout 和 ViewPager 组合使用

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