记录ViewPager+TabLayout实现顶部左对齐导航栏

前言：我这里是在fragment中实现左对齐的TabLayout，ViewPager中填充的是5个view

效果图如下：

1.首先，要在xml文件中添加控件

点击查看代码

<androidx.viewpager.widget.ViewPager
        android:id="@+id/car_view_pager"
        android:layout_below="@+id/car_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorGrey" />

点击查看代码

<com.google.android.material.tabs.TabLayout
        android:id="@+id/car_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="100px"
        android:layout_marginLeft="20px"
        android:background="@color/colorWhite"
        app:tabGravity="start"
        app:tabIndicator="@drawable/tab_indicator_shape"
        app:tabIndicatorColor="#4687EC"
        app:tabIndicatorFullWidth="false"
        app:tabIndicatorHeight="4px"
        app:tabMode="scrollable"
        app:tabPaddingEnd="50px"
        app:tabPaddingStart="50px"
        app:tabPaddingTop="50px"
        app:tabSelectedTextColor="#4687EC"
        app:tabTextAppearance="@style/TabTextStyle"
        app:tabTextColor="@color/colorGrey" />

其中TabLayout中

Indicator   是下划线的意思

（1）app:tabIndicatorFullWidth="false" 即下划线的宽度与item文字的宽度一致，若设为 true，则Indicator 充满 item 的宽度。
（2）app:tabMode="scrollable" tabMode有两种属性：fixed和 scrollable；fixed：指的是固定tab；scrollable指的是tab可滑动。
（3）app:tabIndicator="@drawable/tab_indicator_shape" 设置下划线的样式，下划线可以设置为圆角

例如：tab_indicator_shape.xml

点击查看代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="2px" />
</shape>

（4）app:tabSelectedTextColor 选中字体颜色
（5）app:tabTextAppearance="@style/TabTextStyle" 字体样式，大小、粗体等

例如：

点击查看代码

<resources>
    <style name="TabTextStyle">
        <item name="android:textSize">36px</item>
    </style>
</resources>

（6）我这里要实现的是左对齐的TabLayout，所以将app:tabGravity设置为start

2.在.java文件中声明控件

点击查看代码

private ViewPager car_pager;
private TabLayout car_tabLayout;
//每一个页面
private List<View> views;
//标题
private String[] titles = {"页面一","页面二","页面三","页面四","页面五"};

3.在合适的地方添加view，适配器等

点击查看代码

//我这里是自定义的initView，是在onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState)中调用
@Override
    public void initViews(View view) {
	//绑定控件
	car_pager = view.findViewById(R.id.car_view_pager);
	car_tabLayout = view.findViewById(R.id.car_tab_layout);

	//添加到views列表中
	views = new ArrayList<View>();
	LayoutInflater li = getLayoutInflater();
	views.add(li.inflate(R.layout.layout_cc_car_common_settings,null));
	views.add(li.inflate(R.layout.layout_cc_car_light_settings,null));
	views.add(li.inflate(R.layout.layout_cc_car_assisted_driving,null));
	views.add(li.inflate(R.layout.layout_cc_car_vehicle_settings,null));
	views.add(li.inflate(R.layout.layout_cc_car_vehicle_condition,null));

	//设置数据适配器
	PagerAdapter adapter = new PagerAdapter() {
            //有多少个切换页
            @Override
            public int getCount() {
                return views.size();
            }

            //对显示的资源进行初始化
            @NonNull
            @Override
            public Object instantiateItem(@NonNull ViewGroup container, int position) {
                container.addView(views.get(position));
                return views.get(position);
            }

            //对超出范围的资源进行销毁
            @Override
            public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
                container.removeView(views.get(position));
            }

            //判断是否view和object关联
            @Override
            public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
                return view == object;
            }

            //获取标题
            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return titles[position];
            }
        };
	//设置适配器
	car_pager.setAdapter(adapter);
	//让tablayout与viewpager建立关联关系
	car_tabLayout.setupWithViewPager(car_pager);
}