首页 > 解决方案 > 带有 ImageView 的 Android TabsLayout 选项卡

问题描述

我知道我们可以TextView为选项卡设置任何TabsLayout选项没有任何问题,但此时我没有为选项卡设置 TextView 的问题,但我想在选项卡上使用图像而不是文本,因为使用这个自定义视图我有这个方法:

private void setupTabIcons() {
    inflater = LayoutInflater.from(context);

    timeline = inflater.inflate(R.layout.joined_cafe_webs, null);
    TabLayout.Tab contentJoinedCafeWebsTab = tabsLayout.getTabAt(0);
    Objects.requireNonNull(contentJoinedCafeWebsTab).setCustomView(timeline);

    grid_list = inflater.inflate(R.layout.user_channels, null);
    TabLayout.Tab grid_listTab = tabsLayout.getTabAt(1);
    Objects.requireNonNull(grid_listTab).setCustomView(grid_list);

    post_items_view_pager.setCurrentItem(1);
    ...
}

joined_cafe_webs布局:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/grid_feeds"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_gravity="center"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:padding="5dp"
    android:tint="@color/grey_40"
    app:srcCompat="@drawable/ic_time_line_black_24dp" />

在手机上编译并运行项目后,选项卡为空

标签: androidandroid-tablayout

解决方案


请检查:

https://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

将图标+文本添加到 TabLayout

您可以使用以下代码:

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.ic_tab_favourite,
            R.drawable.ic_tab_call,
            R.drawable.ic_tab_contacts
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new OneFragment(), "ONE");
        adapter.addFrag(new TwoFragment(), "TWO");
        adapter.addFrag(new ThreeFragment(), "THREE");
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

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

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

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

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

推荐阅读