TabLayout+ViewPager+Fragment实现顶部滑动效果

最新推荐文章于 2024-11-22 16:17:14 发布

原创最新推荐文章于 2024-11-22 16:17:14 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍如何在Android应用中集成TabLayout与ViewPager组件，包括添加依赖、布局配置及页面代码实现等步骤，并提供了自定义Tab样式的方法。

一添加依赖包：

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

二.写布局: activity_collect_product:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/red"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/black"/>

    <!--可滑动的布局内容-->
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>



</LinearLayout>

三.页面代码实现

public class CollectProductActivity extends BaseActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;

    private String[] titles = {"页面1", "页面2"};
    private List<Fragment> list;

    @Override
    public int getLayoutResId() {
        return R.layout.activity_collect_product;
    }

    @Override
    protected void initView() {
        //实例化
        mViewPager = (ViewPager) findViewById(R.id.vp_view);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
    }

    @Override
    protected void initListener() {

        //页面，数据源
        list = new ArrayList<>();
        list.add(new Tab1Fragment());
        list.add(new Tab2Fragment());

        //ViewPager的适配器
        MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(adapter);
        //绑定,会自动绑定
        mTabLayout.setupWithViewPager(mViewPager);
    }

    @Override
    protected void initData(boolean isNetWork) {

    }

    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();
        }

        //重写这个方法，将设置每个Tab的标题
        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }

}

1.改变选中字体的颜色

app:tabSelectedTextColor="@android:color/holo_orange_light"

2.改变未选中字体的颜色

app:tabTextColor="@color/colorPrimary"

3.改变指示器下标的颜色

 app:tabIndicatorColor="@android:color/holo_orange_light"

4.改变整个TabLayout的颜色

  app:tabBackground="color"

5.设置文字大小

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"


//设置自定义table样子,有一个问题,会导致图片大小不受控制
 for (int i = 0; i < adapter.getCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);//获得每一个tab
            tab.setCustomView(R.layout.tab_item);//给每一个tab设置view
            TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tab_text);
            textView.setText(titlename[i]);//设置tab上的文字
        }