Viewpager+Tablayout

最新推荐文章于 2025-05-09 10:46:30 发布

转载最新推荐文章于 2025-05-09 10:46:30 发布 · 441 阅读

2016-7月同时被 2 个专栏收录

2 篇文章

订阅专栏

Viewpager

1 篇文章

订阅专栏

本文介绍如何使用TabLayout和ViewPager创建动态切换的标签页效果。通过设置监听器响应选项卡选择，并利用PagerAdapter加载不同页面的内容。示例展示了具体的XML布局配置及Java代码实现。

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

转载地址

## 前言 ##
楼主目前还属于小菜啊有什么问题欢迎指教.
效果展示
这里写图片描述
通过setOnTabSelectedListener设置一个监听器来响应选项卡的选择状态可以通过setTabsFromPagerAdapter来使用PagerAdapter的page title

布局文件xml

<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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
 tools:context="com.example.administrator.tablayoutandviewpagerapplication.MainActivity"
    tools:showIn="@layout/activity_main">
    <android.support.design.widget.TabLayout 
        android:id="@+id/tab1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="center"
        app:tabIndicatorColor="#FF00FF00"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#FF00FF00"
        app:tabTextColor="#FF000000">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

布局里只有一个 Tablayout控件参数里边有几个属性这里说明一下

  app:tabIndicatorColor="#FF00FF00"                         // 下方滚动的下划线颜色
        app:tabSelectedTextColor="#FF00FF00"               // tab被选中后，文字的颜色
        app:tabTextColor="#FF000000"                      // tab默认的文字颜色

代码

public class MainActivity extends AppCompatActivity {
    PagerAdapter mpageadpter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_main);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab1); //tablayout控件找id

        final String[] mTitle = new String[4];
        final String[] mData = new String[4];

        {
            for (int i = 0; i < 4; i++) {
                mTitle[i] = "标题" + i;
                mData[i] = "第" + i+"页";
            }
        }
        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);//viewpager控件找id


        mpageadpter = new PagerAdapter() {
            @Override
            public CharSequence getPageTitle(int position) { //设置顶部的页面标题

                return mTitle[position];
            }

            @Override
            public int getCount() { //设置数据的大小长度
                return mData.length;
            }


            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                ((ViewPager) container).removeView((View) object); //销毁 视图
            }

            @Override //初始化视图
            public Object instantiateItem(View container, int position) {
                TextView textView = new TextView(MainActivity.this); //定义一个textview 控件
                textView.setText(mData[position]); //显示下边的数据 
                textView.setTextSize(30.f);//设置字体大小
                ((ViewPager) container).addView(textView);  //添加进布局
                return textView;
            }

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

        tabLayout.setTabsFromPagerAdapter(mpageadpter);//第二步，设置Tab的标题来自PagerAdapter.getPageTitle()。
        viewPager.setAdapter(mpageadpter);
        tabLayout.setupWithViewPager(viewPager);//这个方法是addOnPageChangeListener和setOnTabSelectedListener的封装。
    }
}