将Tab与新工具栏一起使用(AppCompat v7-21)


71

我正在使用带有选项卡和自定义ActionBar主题(使用http://jgilfelt.github.io/android-actionbarstylegenerator/创建的)的ActionActionBar,仅当用户展开搜索视图时才显示选项卡。

public boolean onMenuItemActionExpand(MenuItem item) {
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        return true;
    }
}

我从ActionBar迁移到了Toolbar。我的应用程序确实需要支持API 9。

有没有一种方法可以使用此代码重新添加选项卡?:

Toolbar toolbar = (Toolbar) findViewById(R.id.new_actionbar);
setSupportActionBar(toolbar);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

如果可能,如何使用自定义主题或设置工具栏样式?

该文档说,这已被弃用,并建议使用其他类型的导航。但我不知道Android中具有相同功能的任何其他组件。

一些帮助?

Answers:


158

使用API​​ 21时,该方法setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)弃用

更新01/08/2019(材料组件库)

将依赖项添加到您的build.gradle

dependencies { implementationcom.google.android.material:material:1.1.0’ }

然后,您可以使用新的TabLayout

<androidx.constraintlayout.widget.ConstraintLayout>

     <com.google.android.material.appbar.AppBarLayout   ...>

        <androidx.appcompat.widget.Toolbar  .../>


        <com.google.android.material.tabs.TabLayout
         ...
         />

     </com.google.android.material.appbar.AppBarLayout>

     <androidx.viewpager.widget.ViewPager 
        android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.constraintlayout.widget.ConstraintLayout>

代码很简单:

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.setupWithViewPager(pager);

更新2015年5月29日(支持库)

现在有了新的设计支持库,您可以使用 TabLayout

只需将此依赖项添加到您的 build.gradle

compile 'com.android.support:design:22.2.0'

代码很简单:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

要实现材质设计的许多功能,您应该在CoordinatorLayoutAppBarLayout中使用它 。

像这样:

 <android.support.design.widget.CoordinatorLayout
         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="match_parent">


     <android.support.design.widget.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent">

         <android.support.v7.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <android.support.design.widget.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

     </android.support.design.widget.AppBarLayout>

     <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

 </android.support.design.widget.CoordinatorLayout>

您可以使用其他模式。例如,您可以使用在googleio14中看到的相同示例。

它使用SlidingTabLayout与搭配使用的ViewPager

在这里您可以找到示例(在sdk示例中)

在这里您可以找到Google io14示例:


1
@noundla您可能可以使用RadioGroup + RadioButtons,并对它们进行样式设置,以便它们看起来像选项卡
显示名称

21
因此,要使用工具栏实现选项卡(如下所示),真的是复制粘贴io14示例代码并从那里开始工作的最佳实践吗?与在“操作栏”中添加选项卡相比,这看起来需要做更多的工作。
Jonik 2015年

4
Google现在正在使用其“支持设计”库,其中包括“ TabLayout”。请继续关注最新消息。(android.googlesource.com/platform/frameworks/support/+/master/...
太昊金

3
@GabrieleMariotti是的。这就是为什么我评论“敬请期待” ... :)虽然它没有发布,但是您可以从上面的链接中查看代码。
Taeho Kim

5
Tabs一直是Android的问题,他们一直在不断创新,
直到现在

14

尽管现在回答这个问题可能有点晚了,但我意识到我写了一个类似问题的答案,涉及使用设计支持库和Google I / O之前的问题。

我已包括以下基本部分:


Android设计支持库发布以来,TabLayout与一起使用Toolbar变得更加简单,这意味着我们不再需要下载自定义视图类。

摘自Android设计支持库上Android开发者博客文章

标签

通过选项卡在应用程序中的不同视图之间切换并不是材料设计的新概念,它们同样可以用作顶级导航模式或用于在应用程序中组织不同的内容分组(例如,不同流派的音乐)。

设计库的TabLayout既实现了固定的选项卡,视图的宽度在所有选项卡之间均等地划分,也实现了可滚动的选项卡,其中选项卡的大小不一致,并且可以水平滚动。可以通过编程方式添加标签:

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

但是,如果您使用ViewPager在标签之间进行水平分页,则可以直接从PagerAdaptergetPageTitle()创建标签,然后使用将两者连接在一起setupWithViewPager()。这样可确保选项卡选择事件更新ViewPager,并且页面更改会更新所选选项卡。


如果您不使用设计支持库,则需要执行以下操作:

1.从GitHub上的Google I / O Conference应用程序下载SlidingTabLayout.javaSlidingTabStrip.java文件。这些将是在选项卡布局中使用的视图,因此我使用其他Java活动(称为“视图”)创建了一个文件夹并将其放置在该文件夹中。

2.编辑布局以包括SlidingTabLayout

<LinearLayout
    android:orientation="vertical"
    ... >

    <!-- This is the Toolbar with the tabs underneath -->
    <LinearLayout
        android:orientation="vertical"
        ... >

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

        <com.mycompany.myapp.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 you already should have if you have
        used tabs before) -->
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    ...

</LinearLayout>

引用Toolbar<include android:id="@+id/detail_toolbar" layout="@layout/toolbar" />)的行引用了我用来制作的另一个XML文件Toolbar

3.更改包装名称,SlidingTabLayout.javaSlidingTabStrip.java与放置位置相对应。就我而言,package com.mycompany.myapp.view;这两个文件都使用了类似于:根据您使用的IDE的说明,组织导入并添加任何必要的内容。

4.在您的Activity(这是延伸AppCompatActivity),设置了ToolbaronCreate方法:

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

5.设置ViewPagerSlidingTabLayout部分:

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;

6.最后,设置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;
    }
}

如上文所述,这些解决方案的更多详细信息可以在我回答的另一个问题中找到,该问题是关于在工具栏上使用滑动选项卡


请不要仅发布引用您自己帖子的答案的链接。发布一个好的答案,然后投票/标记以将其他问题重复作为一个重复。如果问题不是重复的,请定制问题的答案。
durron597

1
我喜欢这个答案!也帮了我 对于任何需要工具栏xml文件的人,请在答案或此中单击其最后一个链接。guides.codepath.com/android/…–
LamaTo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.