使用带工具栏的滑动选项卡

Question

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

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

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

虽然我已经在Stack Overflow上查看了关于此问题的其他一些答案,但是有没有内置的方法来改变它以支持使用Toolbar.如果是这样,你能解释一下我将如何改变它吗？如何onTabSelected更改已弃用的方法？

另外,我注意到Google Play音乐应用看起来像是标签下方的扩展工具栏/部分(请参阅此图片了解我所说的内容).我怎么能有这种类型的布局？

提前致谢.

Answer 1

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

使用AppCompatActivity将ActionBar选项卡更新为工具栏选项卡的步骤:

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

值得庆幸的是,采用了TabLayout与Toolbar已自公布变得简单多了Android设计支持库在谷歌I/O 2015年
我们不再需要下载自定义视图类,这是谷歌的东西确实应该是很久以前完成.

来自Android设计支持库上的Android开发者的Blogspot帖子:

标签:

通过标签在应用程序中的不同视图之间切换并不是材料设计的新概念,它们同样在家中作为顶级导航模式或用于在应用程序中组织不同的内容分组(例如,不同类型的音乐).

设计库的TabLayout实现了两个固定选项卡,其中视图的宽度在所有选项卡之间平均分配,以及可滚动选项卡,其中选项卡不是统一大小并且可以水平滚动.标签可以通过编程方式添加:

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

但是,如果您使用ViewPager在选项卡之间进行水平分页,则可以直接从PagerAdapter的getPageTitle()创建选项卡,然后使用它们将两者连接在一起setupWithViewPager().这可确保选项卡选择事件更新ViewPager,页面更改将更新选定的选项卡.

在Google I/O 2015之前:

首先,我下载了SlidingTabLayout.java和SlidingTabStrip.java文件从GitHub上谷歌的I/O大会的应用程序.这些将是在选项卡布局中使用的视图,因此我创建了一个包含其他Java活动的文件夹,名为"view"并将它们放在那里.

接下来,我编辑了我的活动布局.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的颜色,它将是标签线指示符的颜色.另请注意,上面的变量是我在此活动中先前定义的全局变量:

SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;

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

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.如果有任何不清楚的地方,请随时在下面发表评论.