最終效果圖

a.png

xml布局：

<androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_product"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_product"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        app:tabIndicatorHeight="0dp" />

app:tabIndicatorHeight="0dp"---------TabLayout 下劃線(Indicator)寬度

java代碼：

private void initView() {
        mTabProduct = (TabLayout) findViewById(R.id.tab_product);
        mVpProduct = (ViewPager) findViewById(R.id.vp_product);
        
        //將fragment裝進(jìn)列表中
        fragmentList = new ArrayList<>();
        fragmentList.add(new ProductFragment());    //產(chǎn)品
        fragmentList.add(new CompanyFragment());    //公司
        fragmentList.add(new TalkFragment());    //溝通
        fragmentList.add(new MineFragment());    //我的

//向適配器穿fragment集合
        productAdapter = new ProductAdapter(getSupportFragmentManager(), fragmentList);
        mVpProduct.setAdapter(productAdapter);
//設(shè)置聯(lián)動
        mTabProduct.setupWithViewPager(mVpProduct);

        //設(shè)置Tablayout效果
        for (int i = 0; i < productAdapter.getCount(); i++) {
            mTabProduct.getTabAt(i).setCustomView(getView(i));
        }
    }

    private View getView(int i) {

        View view = View.inflate(this, R.layout.tab_view, null);//布局里有一個textview和一個imageview
          //找控件        
        ImageView iv = view.findViewById(R.id.tab_iv);
        TextView tv = view.findViewById(R.id.tab_tv);
        switch (i) {
            case 0:
                iv.setImageResource(R.drawable.product_ig);
                tv.setText("產(chǎn)品");
                break;
            case 1:
                iv.setImageResource(R.drawable.product_ig);
                tv.setText("公司");
                break;
            case 2:
                iv.setImageResource(R.drawable.product_ig);
                tv.setText("溝通");
                break;
            case 3:
                iv.setImageResource(R.drawable.product_ig);
                tv.setText("我的");
                break;
        }
        return view;
    }