将图标+文本添加到 TabLayout

Question

我在一个包含三个选项卡的屏幕上工作我想在选项卡中添加一个带有我的文本的图标，我希望图像位于文本上方并且它们之间应该有一些 space 这是我的代码。

public class HomeScreen extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener {

private Toolbar toolbar;
private ViewPager pager;
private ViewPagerAdapter adapter;
private SlidingTabLayout tabs;
private CharSequence Titles[] = {"News", "Most Views", "Chart"};
int Numboftabs = 3;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_home_screen);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);

    //MAhmoud Code Addtion
    // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
   // getSupportActionBar().setIcon(R.drawable.ic_launcher);

    // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles
    // fot the Tabs and Number Of Tabs.
    adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles,
            Numboftabs);

    // Assigning ViewPager View and setting the adapter
    pager = (ViewPager) findViewById(R.id.pager);
    pager.setAdapter(adapter);

    // Assiging the Sliding Tab Layout View
    tabs = (SlidingTabLayout) findViewById(R.id.tabs);
    tabs.setDistributeEvenly(true);
    tabs.setViewPager(pager);

}

@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}}

ViewPagerAdapter

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

CharSequence Titles[];
int NumbOfTabs;

public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[],
        int mNumbOfTabsumb) {
    super(fm);
    this.Titles = mTitles;
    this.NumbOfTabs = mNumbOfTabsumb;
}
// This method return the fragment for the every position in the View Pager
@Override
public Fragment getItem(int position) {
    switch (position) {
    case 0:
        return new Tap1();

    case 1:
        return new Tap2();
    case 2:
        return new Tap3();
    }
    return null;
}
// This method return the titles for the Tabs in the Tab Strip
@Override
public CharSequence getPageTitle(int position) {
    return Titles[position];
}
// This method return the Number of tabs for the tabs Strip
@Override
public int getCount() {
    return NumbOfTabs;
}}

Answer 1

尝试这种方式这正是您要找的

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

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);
        }
    }
}

Answer 2

首先创建一个布局 xml 文件，该文件具有您想要的选项卡结构例如，文本顶部的一个简单图标。像这样：

1。创建导航选项卡布局 xml：在 `layout` 文件夹 > `nav_tab.xml`

中

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_tab"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="@dimen/nav_icon"
        android:scaleType="centerInside"
        android:id="@+id/nav_icon"
        android:layout_marginBottom="@dimen/tiny_padding"/>

    <TextView
        android:id="@+id/nav_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@string/font_fontFamily_medium"
        android:shadowColor="@android:color/black"
        android:textColor="@color/dark_grey"
        android:textSize="@dimen/nav_tab_label_font_size"
        tools:text="@string/nav_home" />

</LinearLayout>

给你的布局和 id 进行膨胀，并给 ImageView 和 TextView id 以便在膨胀父布局后稍后引用。

2。在 `drawable` 文件夹中定义图标，在 `strings.xml` 文件中定义标签

并按照您希望图标显示的顺序按数组中的资源 ID 引用它们：

private int[] navIcons = {
        R.drawable.ico_home,
        R.drawable.ico_search,
        R.drawable.ico_notification,
        R.drawable.ico_profile
};
private int[] navLabels = {
        R.string.nav_home,
        R.string.nav_search,
        R.string.nav_notifications,
        R.string.nav_profile
};
// another resouces array for active state for the icon
private int[] navIconsActive = {
        R.drawable.ico_home_red,
        R.drawable.ico_search_red,
        R.drawable.ico_notification_red,
        R.drawable.ico_profile_red
};

3。使用 `ViewerPager`:

设置 TabLayout

TabLayout navigation = (TabLayout) findViewById(R.id.navigation);
navigation.setupWithViewPager(mainView/* the viewer pager object*/);

现在定制部分：

// loop through all navigation tabs
for (int i = 0; i < navigation.getTabCount(); i++) {
    // inflate the Parent LinearLayout Container for the tab
    // from the layout nav_tab.xml file that we created 'R.layout.nav_tab
    LinearLayout tab = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.nav_tab, null);

    // get child TextView and ImageView from this layout for the icon and label
    TextView tab_label = (TextView) tab.findViewById(R.id.nav_label);
    ImageView tab_icon = (ImageView) tab.findViewById(R.id.nav_icon);

    // set the label text by getting the actual string value by its id
    // by getting the actual resource value `getResources().getString(string_id)`
    tab_label.setText(getResources().getString(navLabels[i]));

    // set the home to be active at first
    if(i == 0) {
        tab_label.setTextColor(getResources().getColor(R.color.efent_color));
        tab_icon.setImageResource(navIconsActive[i]);
    } else {
        tab_icon.setImageResource(navIcons[i]);
    }

    // finally publish this custom view to navigation tab
    navigation.getTabAt(i).setCustomView(tab);
}

---

最后一次触摸以设置活动状态并在选择选项卡时更改图标和文本颜色：

你可以在这里继续我的回答

change image and color of the text to the tab when selected

这将实现：

Answer 3

如果您想在标签布局中将图标和文本放在一行中，您必须按如下所示制作自定义布局。

custom_tab_heading.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:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tabContent"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:gravity="center"/>
</LinearLayout>

在您的 java 端，您可以编写以下代码将图像和标题添加到您的标签页。

val tabTitles = arrayListOf<String>("  Text Jokes","  Funny Images")
val tabIcons = arrayListOf<Int>(R.drawable.text_jokes,R.drawable.image_jokes)


val tabLinearLayout = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayout
val tabContent = tabLinearLayout.findViewById<View>(R.id.tabContent) as TextView
tabContent.text = tabTitles.get(0)
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[0], 0, 0, 0)
myTabLayout.getTabAt(0)!!.setCustomView(tabContent)

val tabLinearLayout1 = LayoutInflater.from(context).inflate(R.layout.custom_tab_heading, null) as LinearLayout
val tabContent1 = tabLinearLayout1.findViewById<View>(R.id.tabContent) as TextView
tabContent1.text = tabTitles.get(1)
tabContent1.setCompoundDrawablesWithIntrinsicBounds(tabIcons[1], 0, 0, 0)
var l = tabLinearLayout1.layoutParams
myTabLayout.getTabAt(1)!!.setCustomView(tabContent1)

注意:- 在 tabTitles 数组中注意我在 text(<space>Title 1) 之前给出了 space 因为它会保留 space在你的图片和标题之间。

抱歉，我在这里提供了 kotlin 代码，但您可以轻松地将其转换为 java。如果有人遇到问题，请在此答案中发表评论，我会尽力帮助他们。

Answer 4

我的好朋友提到的所有答案当然都是有效的，但由于 ViewPager2 已经存在，因此 post 相应的解决方案是很好的。

private ViewPager2 viewPager2;
private TabLayout tablayout;



private void tabLayoutValueSetter(){
    viewPager2 = findViewById(R.id.viewPager2);
    tablayout = findViewById(R.id.TabLayout);


    final String[] tabTitles = {"Tab One", "Tab Two", "Tab Three"};//put titles based on your need
    final int[] tabIcons = {R.drawable.icon_1, R.drawable.icon_2, R.drawable.icon_13};

    
     TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tabLayout, viewPager2,
            ((tab, position) -> {
                tab.setText(tabTitles[position]);
                tab.setIcon(tabIcons[position]);
            }
            ));
      tabLayoutMediator.attach();
      //and whereever you want you can detach it (tabLayoutMediator.detach())

 }

结果是一个 Tablayout，其下方有三个图标和标题。

将图标+文本添加到 TabLayout

Add Icons+Text to TabLayout

android

android-layout

material-design

android-tabs

android-tablayout

1。创建导航选项卡布局 xml：在 `layout` 文件夹 > `nav_tab.xml`

2。在 `drawable` 文件夹中定义图标，在 `strings.xml` 文件中定义标签

3。使用 `ViewerPager`:

---

最后一次触摸以设置活动状态并在选择选项卡时更改图标和文本颜色：

将图标+文本添加到 TabLayout

Add Icons+Text to TabLayout

android

android-layout

material-design

android-tabs

android-tablayout

1。创建导航选项卡布局 xml：在 layout 文件夹 > nav_tab.xml

2。在 drawable 文件夹中定义图标，在 strings.xml 文件中定义标签

3。使用 ViewerPager:

---

最后一次触摸以设置活动状态并在选择选项卡时更改图标和文本颜色：

1。创建导航选项卡布局 xml：在 `layout` 文件夹 > `nav_tab.xml`

2。在 `drawable` 文件夹中定义图标，在 `strings.xml` 文件中定义标签

3。使用 `ViewerPager`: