使用带有新工具栏的选项卡 (AppCompat v7-21)

Posted 2023-03-06

【中文标题】使用带有新工具栏的选项卡 (AppCompat v7-21)

【英文标题】：Use Tab with new ToolBar (AppCompat v7-21)

【发布时间】：2014-12-19 19:53:26

【问题描述】：

我将 SupportActionBar 与选项卡和自定义 ActionBar 主题（使用 http://jgilfelt.github.io/android-actionbarstylegenerator/ 创建）一起使用，仅在用户展开搜索视图时显示选项卡。

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 中是否还有其他组件具有相同的功能。

一些帮助？

【参考方案1】：

对于 API 21，方法 setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) 是 deprecated。

2019 年 1 月 8 日更新（材料组件库）

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

dependencies  implementation ‘com.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);

---

29/05/2015 更新（支持库）

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

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

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

代码很简单：

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

要实现材料设计的许多功能，您应该在 CoordinatorLayout 和 AppBarLayout。

类似这样的：

 <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_
         android:layout_>


     <android.support.design.widget.AppBarLayout
             android:layout_
             android:layout_>

         <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 一起使用。

Here you can find the example（在您的 sdk 示例中）

您可以在此处找到 Google io14 示例：

Layout

Java

【讨论】：

@noundla 您可能可以使用 RadioGroup+RadioButtons，并设置它们的样式，使它们看起来像标签

那么要使用工具栏实现选项卡 (looking like this)，最好的做法是真的 复制粘贴 io14 示例代码并从那里开始工作吗？这看起来比 adding tabs to Action Bar 做的工作要多得多。

Google 现在正在使用其“support-design”库，其中包括“TabLayout”。请继续关注更新。 (android.googlesource.com/platform/frameworks/support/+/master/…)

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

标签一直是 Android 的一个问题，他们一直在重新发明它，它已经到了我比任何谷歌方式更习惯于自定义实现的地步耸耸肩

【参考方案2】：

虽然现在回答这个问题可能有点晚了，但我意识到我写的 an answer on a similar question 涵盖了使用设计支持库和在 Google I/O 之前。

我已包含以下基本部分：

---

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

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

标签：

通过tabs 在您的应用程序中的不同视图之间切换并不是材料设计的新概念，它们与top level navigation pattern 或用于在您的应用程序中组织不同的内容分组（例如，不同类型的音乐)。

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

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

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

---

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

1. 从 GitHub 上的 Google I/O 会议应用程序下载 SlidingTabLayout.java 和 SlidingTabStrip.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_
            android:layout_ />
    </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_
        android:layout_ />

    ...

</LinearLayout>

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

3. 将SlidingTabLayout.java 和SlidingTabStrip.java 中的包名更改为与放置位置相对应。就我而言，我对这两个文件都使用了类似的东西：package com.mycompany.myapp.view;。按照您使用的 IDE 的说明，组织导入并添加任何必要的内容。

4. 在您的Activity（扩展AppCompatActivity）中，在onCreate 方法中设置Toolbar：

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

5.设置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;

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;
    

---

如上所述，有关这些解决方案的更多详细信息，请访问 another question I answered, about using Sliding Tabs with the Toolbar。

【讨论】：

请不要发布链接仅引用您自己的帖子的答案。发布一个好的答案，然后投票/标记以关闭其他问题作为重复问题。如果问题不是重复的，调整您对该问题的回答。

我喜欢这个答案！也帮助了我。对于需要工具栏 xml 文件的任何人，请单击答案中的最后一个链接或此链接。 guides.codepath.com/android/…