在屏幕底部放置选项卡

Question

我想在屏幕底部放置选项卡。为此，我有以下代码：

我想在屏幕底部放置选项卡。为此，我有以下代码：

package info.androidhive.tabsswipe;

import info.androidhive.tabsswipe.adapter.TabsPagerAdapter;
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;

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "Top Rated", "Games", "Movies" };

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

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar(); 
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

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

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        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 tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

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

}

通过这段代码，我得到了以下的布局：

package info.androidhive.tabsswipe;

import info.androidhive.tabsswipe.adapter.TabsPagerAdapter;
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;

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "Top Rated", "Games", "Movies" };

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

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar(); 
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

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

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        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 tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

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

}

通过这段代码，编译后屏幕的显示如下：

我该如何将选项卡放在屏幕底部？

- osimer pothe

Answer 1

实际上，这违反了Android设计准则，因为在底部有软/硬按钮，如返回按钮、主页按钮等。

http://developer.android.com/design/patterns/pure-android.html

但是如果您坚持将它们放在底部，您可以像GitHub示例一样使用FragmentTabHost实现它们位于底部的选项卡。

https://github.com/rameshkec85/BottomTabsFragmentTabHost

- Priyank Patel

---

Material Design 实际上建议使用底部导航栏模式 - http://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-usage - enyciaa

@enyciaa，那不是选项卡，实际上它是底部导航。它应该用于三到五个同等重要的顶级目的地（备选方案：从应用程序中的任何位置访问的持久性导航抽屉）。 - Priyank Patel

Answer 2

这个示例XML代码定义了将选项卡移动到屏幕底部的操作：

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

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" >

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_below="@android:id/tabs" >

                <FrameLayout
                    android:id="@+id/tab_home"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <FrameLayout
                    android:id="@+id/tab_video"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />

                <FrameLayout
                    android:id="@+id/tab_audio"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_blog"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_gal"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>

                <FrameLayout
                    android:id="@+id/tab_more"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >
                </FrameLayout>
            </FrameLayout>

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"  //align parent bottom mainly used for move the tab to bottom of the screen.
                android:background="@drawable/ic_launcher"
                android:divider="@null" />

            <!-- android:background="#d8e49c" -->
        </RelativeLayout>
    </TabHost>

</LinearLayout>

- Stephen

---

我的选项卡布局似乎被选项卡所覆盖。这样是否是正常的？即使使用gravity.Top也不能将我的内容移动到顶部，它们仍然停留在底部。我做错了什么？ - user1651105

我想通了。对于框架布局，它必须是 android:layout_above="@android:id/tabs" 而不是 android:layout_below="@android:id/tabs"。 - user1651105

Answer 3

使用操作栏，您只能在顶部添加选项卡，因为这是Android应用程序应该呈现的样式。在底部放置选项卡纯粹是iOS风格。如果您仍希望实现相同的外观，请参考：此处。 Github源代码可以在此处找到。

- Rat-a-tat-a-tat Ratatouille

Answer 4

另一种解决方案：https://dev59.com/0H7aa4cB1Zd3GeqPvNFs#23150258，用于支持api<11的情况下，将TabView替换为FragmentTabVeiw，并从Sherlock的Support库中添加其他导入。

- Oleksandr B

Answer 5

不要这样做，在Android中，选项卡应该始终位于顶部。

- Mark Buikema

---

Instagram在Android上使用底部选项卡栏。最终你不应该遵循UI设计的规则，而应该为用户着想，不管Google建议做什么都要做最好的选择。 - mnearents

而且更重要的是，混合应用程序可在任何设备上运行，无论操作系统如何。那么对于这些应用程序，用户界面规则是什么？它们应该像安卓一样使用顶部选项卡栏还是像 iPhone 一样使用底部选项卡栏？Google 的界面指南很不错，但并非完全正确。用户已经有了足够的非本机应用程序（网站和混合应用程序）的经验，稍微偏离 Android 界面指南不会对 Android 用户造成任何痛苦。 - mnearents

这不是关于艺术的问题，人们习惯于看到的东西。在我看来，如果你正在为Android及其用户设计某些东西，应严格遵循Google的设计。一个简单的例子是给Windows 8用户一台Ubuntu机器并要求他升级该机器。迷失了！ - User3

请不要这样回答。当有人问如何做某事时，“不要这样做”并不是最好的答案;) 如果您希望在所有平台（iOS、Android、Windows）上拥有相同的用户界面，并且应用程序确实需要底部选项卡栏，则可能需要添加它。 - kalan nawarathne

没有哪种情况是您希望您的应用在所有平台上看起来完全相同的。请使用您正在设计的平台的设计指南！ - Mark Buikema