tablayout实现添加图片与文字

最新推荐文章于 2025-02-06 12:53:18 发布

原创最新推荐文章于 2025-02-06 12:53:18 发布 · 1w 阅读

5 ·

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

android 专栏收录该内容

90 篇文章

订阅专栏

本文介绍如何使用TabLayout实现带有图文的选项卡，并在选中时改变文字颜色与图标。通过自定义视图和监听器，可以轻松实现这一功能。

现在项目使用Tablayout实现添加文字与图片一起，点击某项是，实现文字更换颜色，图片更换。

具体实现效果。

下面贴出具体实现代码：

布局文件 icon_view：

<?xml version="1.0" encoding="utf-8"?>
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="65dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_centerInParent="true"
    android:orientation="vertical"
    android:padding="10px">

    <ImageView
        android:id="@+id/tabicon"
        android:layout_width="24dp"
        android:layout_height="24dp" />

    <TextView
        android:id="@+id/tabtext"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="商城"
        android:textColor="@color/black"
        android:textSize="14sp" />

</com.zhy.autolayout.AutoLinearLayout>

Fragment的适配器

public class PagerAdapter extends FragmentPagerAdapter {
    public PagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return str[position];

    }

    @Override
    public Fragment getItem(int position) {
        Log.e("position", position + "");
        Fragment fragment = null;
        if (position == 2) {
            fragment = new CreatorShopFragment();
            Bundle bundle = new Bundle();
            bundle.putString("CatalogId", "0");
            bundle.putString("mAccountIdAdmin", hisShopBean.getData().getMemberInfo().get(0).getAccount_ID_admin() + "");//品牌店铺id
            bundle.putString("Member_ID", mUserId);//创客id
            fragment.setArguments(bundle);
        } else {
            fragment = new SafAccountFragment();
            Bundle bundle = new Bundle();
            bundle.putString("CatalogId", "0");
            bundle.putString("catalogName", str[position]);
            fragment.setArguments(bundle);
        }

        return fragment;
    }

    @Override
    public int getCount() {
        return str.length;
    }


    public View getTabView(int position) {
        View v = LayoutInflater.from(MakerShopActivity.this).inflate(R.layout.icon_view, null);
        ImageView iv = v.findViewById(R.id.tabicon);
        TextView tv = v.findViewById(R.id.tabtext);
        iv.setBackgroundResource(ints[position]);
        tv.setText(str[position]);
        if (position == 0) {
            tv.setTextColor(v.getResources().getColor(R.color.saf_indus_blue));
        }
        return v;
    }

}

最后调用：

mPagerAdapter = new PagerAdapter(getSupportFragmentManager());
vpContent.setAdapter(mPagerAdapter);
tab.setupWithViewPager(vpContent);

for (int i = 0; i < tab.getTabCount(); i++) {
    tab.getTabAt(i).setCustomView(mPagerAdapter.getTabView(i));
}


tab.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        switch (tab.getPosition()) {
            case 0:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallhomeblue);
                break;
            case 1:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallvideoblue);
                break;
            case 2:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallgoodsblue);
                break;
            case 3:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallnewblue);
                break;
            case 4:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallactivityblue);
                break;
        }
        TextView textView = tab.getCustomView().findViewById(R.id.tabtext);
        textView.setTextColor(getResources().getColor(R.color.saf_indus_blue));


    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        switch (tab.getPosition()) {
            case 0:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallome);
                break;
            case 1:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallvideo);

                break;
            case 2:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallgoods);
                break;
            case 3:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallnew);
                break;
            case 4:
                tab.getCustomView().findViewById(R.id.tabicon).setBackgroundResource(R.drawable.mallactivity);
                break;
        }
        TextView textView = tab.getCustomView().findViewById(R.id.tabtext);
        textView.setTextColor(getResources().getColor(R.color.black));

    }

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

    }
});

private String[] str = {"首页", "视频", "商品", "上新", "活动"};
private int[] ints = {R.drawable.mallhomeblue, R.drawable.mallvideo, R.drawable.mallgoods, R.drawable.mallnew, R.drawable.mallactivity};

最后，完成。