Question

有人可以向我解释一下我应该从这个代码website中准确添加的内容：

III. To change tab icon use TabLayout.Tab#setIcon method. You can get TabLayout.Tab object via TabLayout#getTabAt method, which accept tab index as parameter.

...
//after initialization TabLayout and ViewPager
TabLayout.Tab tabCall = tabLayout.getTabAt(ITEM_CALL);  
tabCall.setIcon(R.drawable.selector_call);

//repeat this code for all your tabs
...

因为我将tabLayout和ITEM_CALL设为红色！

Answer 1

将此声明为MainActivity类中的常量

private static final Striing ITEM_CALL = 0;

在onCreate（）上执行此声明：

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);

然后使用以下代码在drawable文件夹中创建selector_call.xml：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_selected="true"
        android:drawable="@drawable/ic_call_selected" />

    <item
        android:state_selected="false"
        android:drawable="@drawable/ic_call_unselected" />

</selector>

Answer 2

您需要首先创建选择器xml文件，并将它们放在drawable文件夹中，并且这些选择器文件需要引用所选和未选择状态的有效drawable。

然后，只需在活动的onCreate()中设置标签图标。

以下是您的活动应该如何显示三个标签，每个标签只显示一个图标：

public class MainActivity extends AppCompatActivity {

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

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

        viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager()));

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

        TabLayout.Tab tabCall = tabLayout.getTabAt(0);
        tabCall.setIcon(R.drawable.selector_call);

        TabLayout.Tab tabHeart = tabLayout.getTabAt(1);
        tabHeart.setIcon(R.drawable.selector_heart);

        TabLayout.Tab tabContacts = tabLayout.getTabAt(2);
        tabContacts.setIcon(R.drawable.selector_contacts);
    }

    class TabPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public int getCount() {
            return 3;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new CallFragment();
                case 1:
                    return new HeartFragment();
                case 2:
                    return new ContactsFragment();
            }

            return null;
        }
    }
}

每个标签都需要自己的选择器xml文件，下面是第三个标签的选择器应该是什么样子的示例：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_selected="true"
        android:drawable="@drawable/contacts_selected" />

    <item
        android:state_selected="false"
        android:drawable="@drawable/contacts_unselected" />

</selector>

Answer 3

<?xml version="1.0" encoding="utf-8"?>

<!-- coordinate layout add more than one widget in systematic way and 
  inhance others property-->

<androidx.coordinatorlayout.widget.CoordinatorLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".Tab_Bar">

<!--Add space for toolbar and tab bars-->

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

    <!-- "?attr/actionBarSize" means same size as 
         original Toolbar size
      "scroll|enterAlways" here "scroll" means when 
      we scroll viewPager up it is scrolled up and "enterAlways" means when 
      we scroll up it reappears -->

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

      <!--tabGravity="fill", if you want the tabs to be occupied the 
       fullwidth of the screen
       If you want to keep your tabs horizontally centered, assign 
       tabGravity="center"
       app:tabMode=> Defines the mode of the tab layout.
        In our case the value should be “fixed” as we have limited number of 
        tabs but if you have many number of tabs where there is insufficient 
        space on the screen to fit all of them the you can  change the 
        app:tabMode to "scrollable".-->

     <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabIndicatorColor="#F4F7FA"
        app:tabGravity="fill">

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

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

 </com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

如何使用图标自定义标签栏？

3 个答案: