TabLayout使用

最新推荐文章于 2025-07-08 15:34:57 发布

freshxu

最新推荐文章于 2025-07-08 15:34:57 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： android 文章标签： viewpager tablayout fragment

本文链接：https://blog.youkuaiyun.com/freshxu/article/details/51800986

android 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Android应用中结合使用TabLayout、ViewPager和Fragment，通过实例展示了设置TabLayout的各种属性，如字体颜色、下划线颜色、布局模式等，并详细讲解了Fragment的布局和代码实现，以及Adapter和Activity的配置过程。

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

先上效果图

这里写图片描述

主要用到了ViewPager,TableLayout,Fragment的组合

首先，要使用TabLayout必须在AndroidStudio中导入这个依赖库

compile 'com.android.support:design:23.1.1'

主界面的布局


一个TabLayout和一个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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    >

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="#000000"
        app:tabIndicatorColor="#FF4081"
        app:tabGravity="fill"
       app:tabBackground="@android:color/holo_blue_bright">

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

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

</LinearLayout>

其中TabLayout有几个属性

app:tabSelectedTextColor:Tab被选中时字体的颜色
app:tabTextColor ：默认Tab字体的颜色
app:tabIndicatorColor：被选中时下划线的颜色
app:tabGravity=”fill” 或者 “center” Tab的布局模式分别是平铺和居中
app:tabBackground：TabLayout背景的颜色

Fragment的布局

就中间显示一个TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/fragment_ll"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:fitsSystemWindows="true"
              android:gravity="center">
<TextView
    android:id="@+id/fragment_textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:textColor="@android:color/white"
    android:text="Tab1"/>

</LinearLayout>

Fragment代码

public class ViewpagerFragment extends Fragment {
    private int mTitle;
    private int mColor;
    private TextView mTextView;
    private LinearLayout mLinear;
    public static ViewpagerFragment newInstance(int title,int color){
        ViewpagerFragment fragment=new ViewpagerFragment();
        Bundle bundle=new Bundle();
        bundle.putInt("title",title);
        bundle.putInt("color",color);
        fragment.setArguments(bundle);
        return  fragment;
    }
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mTitle=getArguments().getInt("title");
        mColor=getArguments().getInt("color");
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_layout,container,false);
        mTextView= (TextView) view.findViewById(R.id.fragment_textView);
        mTextView.setText("Page"+(mTitle+1));
        mLinear= (LinearLayout) view.findViewById(R.id.fragment_ll);
        mLinear.setBackgroundResource(mColor);
        return view;
    }

}

Adapter

 public class MyAdapter extends FragmentPagerAdapter {
        private int mCount=3;
        private int[] mColors=new int[]{android.R.color.holo_orange_dark,android.R.color.holo_green_dark,android.R.color.holo_red_dark};
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            return  ViewpagerFragment.newInstance(position,mColors[position]);
        }
        @Override
        public int getCount() {
            return mCount;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "Page"+(position+1);
        }
    }

Activity

public class MainActivity extends FragmentActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private MyAdapter mAdapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        mAdapter=new MyAdapter(getSupportFragmentManager());
        mViewPager= (ViewPager) findViewById(R.id.main_viewPager);
        mViewPager.setAdapter(mAdapter);
        mTabLayout= (TabLayout) findViewById(R.id.main_tab);
        //将ViewPager与TabLayout进行关联
        mTabLayout.setupWithViewPager(mViewPager);
        //设置是固定的，还可以设置为TabLayout.MODE_SCROLLABLE,
        //可滚动的，用于多个Tab
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
    }
    }