使用ViewPager创建带有图标的选项卡，如何进行布局？通过附加某些布局文件来实现。

Question

我是Android的新手，正在设计一个包含“标签页”的Android应用程序。 我已经设计了这个：

但我想设计成这样，

我认为一定有办法，就像使用自定义适配器填充列表一样。但是我找不到任何可以做到这一点的东西，在Android Web上可用的教程超出了我的理解范围，因为我是新手。

我的代码：

Tabs.xml

Tabs.java

    package com.example.medbleep;

    import TabsManager.TabPagerAdapter;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.ImageView;
import android.widget.TextView;

    public class Tabs extends FragmentActivity implements ActionBar.TabListener {
        private ViewPager viewPager;
        private TabPagerAdapter mAdapter;
        private android.app.ActionBar actionBar;

        private int numberOfTabs = 5;
        // Tab titles
        private int[] tabIcons = {R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home,R.drawable.home};
        private String[] tabText = { "Home", "units", "conferences", "couses", "more" };
        ImageView imageView;
        TextView textView;

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

            imageView = (ImageView)findViewById(R.id.tab_icon);
            textView = (TextView)findViewById(R.id.tab_title);

            // Initialization
            viewPager = (ViewPager) findViewById(R.id.pager);
            viewPager.setBackgroundColor(getResources().getColor(R.color.darkLoginBlue));
            actionBar = getActionBar();
            mAdapter = new TabPagerAdapter(getSupportFragmentManager(),
                    numberOfTabs);

            viewPager.setAdapter(mAdapter);
            actionBar.setHomeButtonEnabled(false);
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

            // Adding Tabs
            for (int i = 0; i<5 ; i++) {

                actionBar.addTab(actionBar.newTab().setText(tabText[i])
                        .setIcon(getResources().getDrawable(tabIcons[i]))
                        .setTabListener(this));

                //actionBar.addTab(actionBar.newTab().setCustomView(R.layout.tab_layout).setText(tabText[i]).setIcon(tabIcons[i]).setTabListener(this));
                //actionBar.setLogo(tabIcons[4]);

                //actionBar.setIcon(tabIcons[i]);
                //actionBar.setTitle(tabText[i]);
            }


            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

                @Override
                public void onPageSelected(int position) {
                    // on changing the page
                    // make respected tab selected
                    actionBar.setSelectedNavigationItem(position);
                }

                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                }

                @Override
                public void onPageScrollStateChanged(int arg0) {
                }
            });

        }

        @Override
        public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onTabSelected(Tab tab, FragmentTransaction arg1) {
            // TODO Auto-generated method stub
            // on tab selected
            // show respected fragment view
            viewPager.setCurrentItem(tab.getPosition());

        }

        @Override
        public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
            // TODO Auto-generated method stub

        }
    }

TabPagerAdapter.java

package TabsManager;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

public class TabPagerAdapter extends FragmentStatePagerAdapter{
    int mNumOfTabs;

    public TabPagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                HomeTabFragment homeTabFragment = new HomeTabFragment();
                return homeTabFragment;
            case 1:
                UnitTabFragment unitTabFragment = new UnitTabFragment();
                return unitTabFragment;
            case 2:
                ConferencesTabFragment conferencesTabFragment = new ConferencesTabFragment();
                return conferencesTabFragment;
            case 3: 
                CoursesTabFragment coursesTabFragment = new CoursesTabFragment();
                return coursesTabFragment;
            case 4:
                MoreTabFragment moreTabFragment = new MoreTabFragment();
                return moreTabFragment;
            default:
                return null;
        }
    }

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




}

- Esha

---

请参考此教程，了解如何使用TabLayout添加带有图标的选项卡。 - Rahul Tiwari

Answer 1

为了制作这个，您需要创建自定义适配器，并根据每个选项卡的要求设置宽度和高度。 请按照以下步骤操作： http://mobikul.com/make-custom-tabs-icons-android/

- Eesha