使用Tab与新ToolBar(AppCompat v7-21)

Lea*_*ann 70 tabs android android-appcompat android-support-library android-actionbar-compat

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

public boolean onMenuItemActionExpand(MenuItem item) {
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        return true;
    }
}
Run Code Online (Sandbox Code Playgroud)

我从ActionBar迁移到工具栏.我的应用程序确实需要支持API 9.

有没有办法使用此代码添加标签?:

Toolbar toolbar = (Toolbar) findViewById(R.id.new_actionbar);
setSupportActionBar(toolbar);
getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
Run Code Online (Sandbox Code Playgroud)

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

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

一些帮助?

Gab*_*tti 157

与API 21中的方法setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)弃用.

您可以使用不同的模式.例如,您可以使用googleio14中可以看到的相同示例.

它使用的是一个android.support.designcom.google.android.material.

在这里你可以找到这个例子(它在你的sdk例子中)

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

更新29/05/2015

现在使用新的Design Support Library,您可以使用新的TabLayout.

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

dependencies { implementation ‘com.google.android.material:material:1.0.0’ }
Run Code Online (Sandbox Code Playgroud)

代码很简单:

<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>
Run Code Online (Sandbox Code Playgroud)

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

像这样的东西:

TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
tabs.setupWithViewPager(pager);
Run Code Online (Sandbox Code Playgroud)

  • 因此,使用工具栏实现标签([看起来像这样](http://www.google.com/design/spec/components/tabs.html))是最好的实践*真的*复制粘贴io14示例代码从那里工作?这看起来比[向Action Bar添加标签](http://developer.android.com/training/implementing-navigation/lateral.html#tabs)更多的工作. (21认同)
  • Tabs一直是Android的一个问题,因为它们一直在重塑它,它已经达到了我更习惯于自定义实现的程度,而不是任何谷歌的做法*耸耸肩* (5认同)
  • 谷歌目前正在使用其"支持设计"库,其中包括"TabLayout".请继续关注更新.(https://android.googlesource.com/platform/frameworks/support/+/master/design/src/android/support/design/widget/TabLayout.java) (4认同)
  • @GabrieleMariotti是的.这就是为什么我评论'保持关注'... :)虽然它没有发布,但你可以从上面的链接查看代码. (3认同)

Far*_*deh 14

虽然现在回答这个问题可能有点晚了,但我意识到我在一个类似的问题上了一个答案,其中包括使用设计支持库和Google I/O之前的问题.

我已经包括以下基本部分:


使用TabLayoutToolbar已成为自从宣布要简单得多Android设计支持库这意味着我们不再需要下载自定义视图类.

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

标签:

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

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

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

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


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

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

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>
Run Code Online (Sandbox Code Playgroud)

引用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);
Run Code Online (Sandbox Code Playgroud)

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);
Run Code Online (Sandbox Code Playgroud)

颜色' tab_line'是我声明color.xml的颜色,它将是标签线指示符的颜色.另请注意,上面的变量是我在此活动中先前定义的全局变量:

SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;
Run Code Online (Sandbox Code Playgroud)

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

正如我上面提到的,这些解决方案的更多细节可以在我回答的另一个问题上找到,关于在工具栏中使用滑动标签.