Material Design-UI之TabLayout

最新推荐文章于 2025-05-07 10:34:10 发布

Jacky_Can

最新推荐文章于 2025-05-07 10:34:10 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏： Android控件文章标签： Material Design TabLayout viewpager fragment

本文链接：https://blog.youkuaiyun.com/Jacky_Can/article/details/64121713

Android控件专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用TabLayout和ViewPager结合fragment实现页面切换效果。通过XML布局配置TabLayout和ViewPager，并通过代码设置ViewPager的适配器及绑定TabLayout。

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

一、TabLayout的用处

我们可以在很多应用中看到，例如网易新闻中的栏目对应下面的信息，滑动来达到切换栏目的目的，针对这个其实早先就有很多框架或者自己去实现，但是这里Material Design提供了一个新的工具TabLayout，他结合view pager和fragment来实现pager的切换和tab的滑动保持一致，我们来看看如何使用并实现的

二、TabLayout的使用

首先我们在布局中设置他们的配置

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/Indigo_nav_color"
        app:tabMode = "scrollable">

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/tablayout_viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/color_drawder">

    </android.support.v4.view.ViewPager>

</LinearLayout>

然后给viewpager设置adapter，代码如下:

public class MyFragmentPageAdapter extends FragmentPagerAdapter{

    private String[] titles = new String[]{"Tab1", "Tab2", "Tab3", "Tab4", "Tab5","Tab6", "Tab7", "Tab8", "Tab9"};


    public MyFragmentPageAdapter(FragmentManager supportFragmentManager) {
        super(supportFragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return 9;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

然后我们定义fragment的类来填充每个view pager

public class PageFragment extends Fragment {

    public static final String ARGS_PAGE = "args_page";
    private int mPage;

    public static Fragment newInstance(int page) {
        Bundle args = new Bundle();
        args.putInt(ARGS_PAGE,page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARGS_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_base, container, false);
        TextView textView = (TextView) view.findViewById(R.id.textView);
        textView.setText("第"+mPage+"页");
        return view;
    }
}

最后在activity中设置adapter并绑定tab

public class TabLayoutActivity extends FragmentActivity {

    private ViewPager viewPager;
    private TabLayout tabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tablayout);
        initView();
        initData();
    }

    private void initView() {
        //Fragment+ViewPager+FragmentViewPager组合的使用
        viewPager = (ViewPager) findViewById(R.id.tablayout_viewPager);
        //TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
    }

    private void initData() {
        MyFragmentPageAdapter myFragmentPageAdapter = new MyFragmentPageAdapter(getSupportFragmentManager());
        viewPager.setAdapter(myFragmentPageAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}