TabLayout图标未显示

时间:2019-07-20 10:13:48

标签: android android-layout android-viewpager fragment android-tablayout

我使用Material TabLayout

            <com.google.android.material.tabs.TabItem
            android:text="item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/item1" />

        <com.google.android.material.tabs.TabItem
            android:icon="@drawable/item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="item2"
            />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="item3"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="item4" />
    </com.google.android.material.tabs.TabLayout>

androidx ViewPager

ViewPagerAdapter

        public class ViewPagerAdapter extends FragmentPagerAdapter
       {
        private List<Fragment> fragmentList=new ArrayList<>();
        private List<String> fragmentTitleList=new ArrayList<>();

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

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

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


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

        public void addPage(Fragment fragment, String title)
        {
            fragmentList.add(fragment);
            fragmentTitleList.add(title);
        }
       }

但是,当我使用addPage()方法将片段添加到viewpager时,TabLayout的图标和文本更改为添加到addPage()(图标删除)中的标题。

但是我想标题为在TabItem中设置的文本和图标

有什么办法吗?

1 个答案:

答案 0 :(得分:0)

我认为您应该按照以下代码为标签创建自定义标签布局

[1]。 custom_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/tabImg"
        android:layout_width="wrap_content"
        android:layout_height="20dp" />

    <TextView
        android:id="@+id/tabContent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginStart="@dimen/_5sdp"
        android:layout_marginEnd="@dimen/_5sdp"
        android:gravity="center"
        android:text=""
        android:textAlignment="center"
        android:textColor="@color/white" />
</LinearLayout>

[2]。您的活动

private String[] tabTitles = {"Pending", "Ongoing", "Completed"};
private int[] tabIcons = {android.R.drawable.arrow_down_float,android.R.drawable.checkbox_off_background, android.R.drawable.checkbox_on_background};
        TextView tabContent;

     private void setUpTabIcon() {
            tabLayout.addTab(tabLayout.newTab());
            tabLayout.addTab(tabLayout.newTab());
            tabLayout.addTab(tabLayout.newTab());

            for (int i = 0; i < tabLayout.getTabCount(); i++) {
                LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
                TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
                ImageView tabImg = tabLinearLayout.findViewById(R.id.tabImg);
                if (i == 0) {
                    tabContent.setText(tabTitles[i]);
                    tabImg.setColorFilter(ContextCompat.getColor(getApplicationContext(), R.color.white), android.graphics.PorterDuff.Mode.MULTIPLY);
                }
                tabImg.setImageResource(tabIcons[i]);

                tabLayout.getTabAt(i).setCustomView(tabLinearLayout);
            }

            Log.e(TAG, "onCreate: " + tabLayout.getTabCount());
            pageAdapter = new ViewPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());

            binding.viewPager.setAdapter(pageAdapter);
            binding.viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
            pageAdapter.notifyDataSetChanged();

        }

    tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {

                    LinearLayout linearLayout = (LinearLayout) tab.getCustomView();
                    TextView text = (TextView) linearLayout.findViewById(R.id.tabContent);
                    ImageView img = linearLayout.findViewById(R.id.tabImg);

                    if (text != null) {
                        text.setText(tabTitles[tab.getPosition()]);
                        img.setColorFilter(ContextCompat.getColor(getApplicationContext(), R.color.white), android.graphics.PorterDuff.Mode.MULTIPLY);
                    }

                    binding.viewPager.setCurrentItem(tab.getPosition());

                }

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

                    LinearLayout linearLayout = (LinearLayout) tab.getCustomView();
                    TextView tabContent = linearLayout.findViewById(R.id.tabContent);
                    ImageView img = linearLayout.findViewById(R.id.tabImg);

                    if (tabContent != null) {
                        tabContent.setText("");
                        img.setColorFilter(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimaryDark), android.graphics.PorterDuff.Mode.MULTIPLY);

                    }

                }

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

                }
            });