android - 将滑动标签与工具栏一起使用

Question

我已经开始从使用 ActionBarActivity 改为使用 AppCompatActivity，但我也开始使用 Toolbar 而不是标准 ActionBar。

但是，在我的一个具有滑动选项卡布局类型的 Activity 中，以下行似乎已被弃用:

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

虽然我已经查看了 Stack Overflow 上关于此的一些其他答案，但是否有任何内置方法可以更改它以支持使用 Toolbar。如果是这样，你能具体解释一下我将如何改变它吗？如何更改 onTabSelected 等已弃用的方法？

此外，我注意到 Google Play 音乐应用在选项卡下方有一个看起来像扩展的工具栏/部分(请参阅 this image for what I am talking about)。我怎样才能拥有那种类型的布局？

提前致谢。

Answer 1

经过几天的大量研究，并查看 GitHub，我终于设法解决了我的问题。

使用 AppCompatActivity 将 ActionBar 选项卡更新为 Toolbar 选项卡的步骤:

---

更新:2015 年 5 月 29 日星期五之后:

谢天谢地，使用 TabLayout与 Toolbar自从在 2015 年 Google I/O 上宣布 Android 设计支持库以来，变得简单多了。
我们不再需要下载自定义 View 类，这是 Google 早就应该做的事情。

来自Android Developers' Blogspot post on the Android Design Support Library :

Tabs:

Switching between different views in your app via tabs is not a new concept to material design and they are equally at home as a top level navigation pattern or for organizing different groupings of content within your app (say, different genres of music).

The Design library’s TabLayout implements both fixed tabs, where the view’s width is divided equally between all of the tabs, as well as scrollable tabs, where the tabs are not a uniform size and can scroll horizontally. Tabs can be added programmatically:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

However, if you are using a ViewPager for horizontal paging between tabs, you can create tabs directly from your PagerAdapter’s getPageTitle() and then connect the two together using setupWithViewPager(). This ensures that tab selection events update the ViewPager and page changes update the selected tab.

---

在 Google I/O 2015 之前:

首先，我下载了 SlidingTabLayout.java 和 SlidingTabStrip.java 来自 GitHub 上 Google I/O 大会应用程序的文件。这些将是将在选项卡布局中使用的 View ，因此我创建了一个文件夹，其中包含我的其他 Java Activity ，名为“view”，并将它们放在那里。

接下来，我编辑了我的 Activity 布局 .xml看起来有点像这样:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="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="com.mycompany.myapp.MyActivity" >

    <!-- This is the Toolbar with the tabs underneath -->
    <LinearLayout android:id="@+id/detail_headerBar"
        style="@style/HeaderBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />

        <com.mycompany.myapp.view.SlidingTabLayout
            android:id="@+id/sliding_tabs"
            android:background="?attr/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <!-- This is the ViewPager (which I had used before) and 
         it would be responsible for the swiping to change layouts -->
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/detail_headerBar"
        android:layout_above="@+id/detail_adView" />

    <!-- I also had an AdView in my layout,
         but this is not necessary for creating tab layouts -->
    <com.google.android.gms.ads.AdView
        android:id="@+id/detail_adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="@string/banner_ad_unit_id" >
    </com.google.android.gms.ads.AdView>

</RelativeLayout>

引用 Toolbar 的行( <include android:id="@+id/detail_toolbar" layout="@layout/toolbar" /> )，正在引用以下布局(对于那些还不确定如何使用 Toolbar 的人):

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

并且在 .xml 中上面的布局文件，?attr/colorPrimary , 指的是我的应用程序的原色(我在样式中定义了它)。

此外，在第一个布局中，我提到的样式为 @style/HeaderBar引用以下内容:

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
    <!-- You may have to override this in a v21 version of this file -->
</style>

在开始使用 Java 设置布局之前，我必须确保更改 SlidingTabLayout.java 中的包名称和 SlidingTabStrip.java对应于它们放置的位置。就我而言，我使用了:package com.mycompany.myapp.view;在这两个文件中。

现在，在我的 Activity 中(正在扩展 AppCompatActivity )，我首先在 onCreate 中添加了以下内容方法:

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

这将负责显示 Toolbar .

然后我设置 ViewPager和 SlidingTabLayout部分:

mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.tab_line));   
mSlidingTabLayout.setDistributeEvenly(true);
mSlidingTabLayout.setViewPager(mViewPager);

颜色' tab_line ' 是我在 color.xml 中声明的颜色这将是标签线指示器的颜色。另请注意，上面的变量是我之前在此 Activity 中定义的全局变量:

SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;

最后要做的是设置 ViewPagerAdapter我称之为eariler。这将负责根据选择的选项卡更改页面。我使用了以下内容:

public class ViewPagerAdapter extends FragmentPagerAdapter {

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public int getCount() {
        // Returns the number of tabs
        return 3;
    }

    @Override
    public Fragment getItem(int position) {
        // Returns a new instance of the fragment
        switch (position) {
            case 0:
                return new FragmentOne();
            case 1:
                return new FragmentTwo();
            case 2:
                return new FragmentThree();
        }
        return null;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Locale l = Locale.getDefault();
        switch (position) {
            case 0:
                return getString(R.string.title_section1).toUpperCase(l);
            case 1:
                return getString(R.string.title_section2).toUpperCase(l);
            case 2:
                return getString(R.string.title_section3).toUpperCase(l);
        }
        return null;
    }
}

我希望对于那些在从 ActionBarActivity 切换时遇到同样问题的人来说，这是一个足够彻底的答案。至 AppCompatActivity并开始使用 Toolbar而不是 ActionBar .如果有任何不清楚的地方，请随时在下面发表评论。