如何在底部設置標簽並隱藏頂部操作欄？

Question

在我的應用程序中，我使用底部的操作欄選項卡。 我搜索了許多教程，但我不理解解決方案。 大多數答案都表示使用TabActivity，但這已被棄用。 所以任何人都可以告訴我如何處理這個問題？

Answer 1

現在實現制表符的最佳方法是使用設計庫中的TabLayout。

以下是在屏幕底部對齊的TabLayout示例。

首先在build.gradle文件中設置依賴項：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

以下是主要活動的布局xml：

<RelativeLayout
    android:id="@+id/main_layout"
    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=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>

這是活動代碼：

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Get the ViewPager and set it's PagerAdapter so that it can display items
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        PagerAdapter pagerAdapter =
                new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
        viewPager.setAdapter(pagerAdapter);

        // Give the TabLayout the ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

        // Iterate over all tabs and set the custom view
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            tab.setCustomView(pagerAdapter.getTabView(i));
        }
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    class PagerAdapter extends FragmentPagerAdapter {

        String tabTitles[] = new String[] { "Tab One", "Tab Two", "Tab Three", };
        Context context;

        public PagerAdapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
        }

        @Override
        public int getCount() {
            return tabTitles.length;
        }

        @Override
        public Fragment getItem(int position) {

            switch (position) {
                case 0:
                    return new BlankFragment();
                case 1:
                    return new BlankFragment();
                case 2:
                    return new MapFragment();
            }

            return null;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // Generate title based on item position
            return tabTitles[position];
        }

        public View getTabView(int position) {
            View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
            TextView tv = (TextView) tab.findViewById(R.id.custom_text);
            tv.setText(tabTitles[position]);
            return tab;
        }

    }
}

custom_tab.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/custom_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:textSize="16dip"
        android:textColor="#ffffff"
        android:singleLine="true"
        />
</LinearLayout>

styles.xml中的應用主題：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--   your app branding color for the app bar -->
    <item name="colorPrimary">#3F51B5</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="colorPrimaryDark">#303F9F</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="colorAccent">#FF4081</item>
</style>

結果：

如果要隱藏ActionBar，只需從布局xml中刪除工具欄，然后從Activity中刪除工具欄代碼，並確保在Theme.AppCompat.Light.NoActionBar中使用Theme.AppCompat.Light.NoActionBar。 這些更改的結果將使它看起來像這樣：

Answer 2

這是一個例子

Toolbar toolbarBottom = (Toolbar) findViewById(R.id.toolbar_bottom);
    toolbarBottom.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch(item.getItemId()){
                case R.id.action_settings:
                    // TODO
                    break;
                // TODO: Other cases
            }
            return true;
        }
    });
    // Inflate a menu to be displayed in the toolbar
    toolbarBottom.inflateMenu(R.menu.menu_main);

和這個xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_bottom"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary"
    android:layout_alignParentBottom="true"
    android:minHeight="?attr/actionBarSize" />

Answer 3

第1步 - 為工具欄創建自定義布局。

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.Toolbar
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

   </android.support.v7.widget.Toolbar>

第2步 - 將此布局包含在您的活動布局中。 把它放在最低位置。

<include
     android:id="@+id/toolbar_main"
     layout="@layout/main_toolbar" />

第3步 - 將工具欄調用到您的活動中並完成。 它將表現為任何工具欄，但位於底部。