Android TabLayout 添加图片图标下滑线和文字长度一样

最新推荐文章于 2026-06-21 16:28:39 发布

原创最新推荐文章于 2026-06-21 16:28:39 发布 · 3.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android

本文介绍了一种在Android应用中自定义TabLayout的方法，通过创建自定义的FragmentPagerAdapter，实现带有图片、下滑线和固定宽度字体的Tab。文章详细展示了如何设置Tab的图标、字体颜色、大小以及下划线的颜色和位置，同时提供了初始化TabLayout和添加监听器的代码示例。

需求是tablayout 上有图片和下滑线和字体长度一样。tablayout 可以添加布局的直接上代码

// tab 适配器
class MyFragmentPagerAdapter extends FragmentPagerAdapter {
    private MyFragmentPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTabName.get(position);
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public View getTabItemView(int position) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item_group_tab_layout, null);
        TextView textView = (TextView) view.findViewById(R.id.tv_tab_name);
        View vline = (View) view.findViewById(R.id.v_line);
        ImageView iv = (ImageView) view.findViewById(R.id.iv_tab_icon);
        if (position == 0) {
            iv.setImageResource(R.drawable.rm);
        } else {
            ImageLoader.loadImage(mRequestManager, iv, mListUrlImage.get(position), R.drawable.logo);
        }
        vline.setBackgroundColor(ContextCompat.getColor(mContext, R.color.white));
        textView.setTextColor(ContextCompat.getColor(mContext, R.color.color_666666));
        textView.setTextSize(15);
        textView.setText(mTabName.get(position));
        return view;
    }

}

item_group_tab_layout 布局

把view 添加到tablayout中 初始化时候就可以添加 
private void setUpTabBadge(MyFragmentPagerAdapter mPagerAdapter) {
    //
    for (int i = 0; i < mFragments.size(); i++) {
        TabLayout.Tab tab = layoutTab.getTabAt(i);
        // 更新Badge前,先remove原来的customView,否则Badge无法更新
        View customView = tab.getCustomView();
        if (customView != null) {
            ViewParent parent = customView.getParent();
            if (parent != null) {
                ((ViewGroup) parent).removeView(customView);
            }
        }
        // 更新CustomView
        tab.setCustomView(mPagerAdapter.getTabItemView(i));
    }

}

layoutTab 选择监听改变 下划线 字体颜色 即可    setUpTabBadge(mPagerAdapter)重新初始化talayout里面布局
layoutTab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        setUpTabBadge(mPagerAdapter);
        View vline = (View) tab.getCustomView().findViewById(R.id.v_line);
        TextView tv_tabName = tab.getCustomView().findViewById(R.id.tv_tab_name);
        tv_tabName.setTextSize(16);
        tv_tabName.getPaint().setFakeBoldText(true);
        tv_tabName.setTextColor(ContextCompat.getColor(mContext, R.color.main_color2));
        vline.setBackgroundColor(ContextCompat.getColor(mContext, R.color.main_color2));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
});

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/y164">
    <!-- LinearLayout的Height必须为wrap_content,如果为match_parent,那么在第二次加载Badge的时候,Tab布局会出现问题 -->
    <ImageView
        android:id="@+id/iv_tab_icon"
        android:layout_width="@dimen/y52"
        android:layout_height="@dimen/y52"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/y20"
        android:src="@drawable/logo" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/iv_tab_icon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/y20">

        <TextView
            android:id="@+id/tv_tab_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxWidth="@dimen/y130"
            android:singleLine="true"
            android:ellipsize="end"
            android:layout_centerInParent="true"
            android:layout_centerHorizontal="true"
            android:textColor="@color/color_666666"
            android:textSize="@dimen/font_14"
            tools:text="全部" />

        <View
            android:id="@+id/v_line"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/y4"
            android:layout_below="@id/tv_tab_name"
            android:layout_alignStart="@+id/tv_tab_name"
            android:layout_alignEnd="@+id/tv_tab_name"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/y20"
            android:background="@color/colorAccent"
            android:minWidth="4dp" />

    </RelativeLayout>


</RelativeLayout>