【问题标题】:Tabs below action bar操作栏下方的选项卡
【发布时间】:2013-08-20 18:57:02
【问题描述】:

我正在为 Android 4.3 进行开发,但我的代码出现了我似乎无法弄清楚的问题。我一直在寻找答案,但我能找到的只是那些想要我目前的情况而我想要他们的错误程序的人。

我在 Android 的 ActionBar 中的选项卡教程中将 3 个选项卡放在了操作栏中。

会发生什么: 标签应该出现在操作栏上

会发生什么: 选项卡显示在操作栏下方

我的问题是:
1。如何将这些选项卡设置为显示在 ActionBar 上而不是下方
2。如果成功 1,我该如何设置标签的大小?例如使 3 个选项卡一起占据 ActionBar 的三分之一(按宽度)

我的代码:

mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        final ActionBar actionBar = getActionBar();
        actionBar.show();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.TabListener tabListener = new ActionBar.TabListener() {
            public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
                 // show the given tab
                mPager.setCurrentItem(tab.getPosition());
            }

            public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
                // hide the given tab
            }

            public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
                // probably ignore this event
            }
        };

        mPager.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
                        // When swiping between pages, select the
                        // corresponding tab.
                        actionBar.setSelectedNavigationItem(position);
                    }
                });
        // Add 3 tabs, specifying the tab's text and TabListener
        actionBar.addTab(
                    actionBar.newTab()
                            .setText("A")
                            .setTabListener(tabListener));
        actionBar.addTab(
                actionBar.newTab()
                        .setText("B")
                        .setTabListener(tabListener));
        actionBar.addTab(
                actionBar.newTab()
                        .setText("C")
                        .setTabListener(tabListener));

【问题讨论】:

  • 您是在平板电脑还是手机上进行测试?在较小的屏幕上,ActionBar 选项卡显示在 ActionBar 下方。在此处查看图 7 和 8:developer.android.com/guide/topics/ui/actionbar.html#Tabs
  • 我正在手机上进行测试,当我旋转我的设备时,选项卡会显示在 AcitonBar 中。我希望这种情况永远发生。

标签: android android-actionbar android-tabs


【解决方案1】:
private ViewPager mPager;
private PagerAdapter mPagerAdapter;
private static final int NUM_PAGES = 3;

在 onCreate() 中

final ActionBar actionBar = getActionBar();
    actionBar.setDisplayHomeAsUpEnabled(true);

    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    mPager = (ViewPager) findViewById(R.id.pager);
    mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
    mPager.setAdapter(mPagerAdapter);
    mPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            actionBar.setSelectedNavigationItem(position);
        }
    });

    ActionBar.TabListener tabListener = new ActionBar.TabListener() {

        @Override
        public void onTabReselected(Tab tab,
                android.app.FragmentTransaction ft) {

        }

        @Override
        public void onTabSelected(Tab tab,
                android.app.FragmentTransaction ft) {
            mPager.setCurrentItem(tab.getPosition());
        }

        @Override
        public void onTabUnselected(Tab tab,
                android.app.FragmentTransaction ft) {
        }

    };

    for (int i = 0; i < mPagerAdapter.getCount(); i++) {
        actionBar.addTab(actionBar
                .newTab()
                .setText(mPagerAdapter.getPageTitle(i))
                .setIcon(
                        ((ScreenSlidePagerAdapter) mPagerAdapter)
                                .getPageIcon(i))
                .setTabListener(tabListener));
    }

private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
    public ScreenSlidePagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
        case 0:
            return Fragment.instantiate(MainActivity.this,
                    Fragment_sports.class.getName());
        case 1:
            return Fragment.instantiate(MainActivity.this,
                    Fragment_casino.class.getName());
        case 2:
            return Fragment.instantiate(MainActivity.this,
                    Fragment_live_betting.class.getName());
        default:
            break;
        }
        return null;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        String tabLabel = null;
        switch (position) {
        case 0:
            tabLabel = " Sports";
            break;
        case 1:
            tabLabel = "Casino";
            break;
        case 2:
            tabLabel = "Live Betting";
            break;
        }

        return tabLabel;
    }

    public int getPageIcon(int position) {
        int id = 0;
        switch (position) {
        case 0:
            id = R.drawable.icon_all_sports_d;
            break;
        case 1:
            id = R.drawable.icon_favourites_d;
            break;
        case 2:
            id = R.drawable.icon_live_d;
            break;
        default:
            break;
        }
        return id;

    }
}

和你的 ma​​in_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

添加:

你应该替换这一行:

actionBar.setDisplayHomeAsUpEnabled(true);

到这里:

actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);

【讨论】:

  • 为什么要把标签放在ActionBar?我做错了什么?我们有相同的代码(几乎)
  • 成功了!它们在 ActionBar 中。我的第二个问题呢?如何使它们每个选项卡仅位于 ActionBar 的第九个? (全部取第三)还是用 dp 或其他设置?
  • 抱歉,这个问题我无能为力
  • 如果也有抽屉式导航,怎么解决?
【解决方案2】:

编辑:对于标签,请使用 API 指南的this 部分。

要向ActionBar 添加元素,您必须覆盖onCreateOptionsMenu()

例如:

@Override

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_actions, menu);
    return super.onCreateOptionsMenu(menu);
}

你应该有一个用于这些项目布局的 xml:

res/menu/main_activity_actions.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@+id/action_search"
      android:icon="@drawable/ic_action_search"
      android:title="@string/action_search"/>
    <item android:id="@+id/action_compose"
      android:icon="@drawable/ic_action_compose"
      android:title="@string/action_compose" />
</menu>

Source

【讨论】:

  • 我希望 ActionBar 仅填充那些选项卡(A、B、C),但我不希望每个选项卡都占用 ActionBar 的三分之一 -> 占用整个 ActionBar 空间导致它显示另一行。我希望所有选项卡的整个宽度占据 ActionBar 的三分之一
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多