android 5.0 材料设计标签

android 5.0 material design tabs

提问by nomongo

What is the best and easy way to implement material design style tabs just like in the latest Google NewsStand app? That is exactly what I'm looking for but don't know where to start. Any help/direction provided is greatly appreciated. Thanks.

就像在最新的 Google NewsStand 应用程序中一样，实现 Material Design 风格标签的最佳和简单方法是什么？这正是我正在寻找的，但不知道从哪里开始。非常感谢提供的任何帮助/方向。谢谢。

回答by jpardogo

This postof @ChrisBanes (Developer Programs Engineer for Android) explain the situation with the new Toolbar.

@ChrisBanes（Android 开发人员程序工程师）的这篇文章解释了新工具栏的情况。

So thissample can help.

所以这个示例可以提供帮助。

As well as thisDevBytes video.

以及这个DevBytes 视频。

If you want a library, you can go for this onebut It is not updated to material design (I forked it, and If I have some time, I will try to update it).

如果你想要一个库，你可以去这个，但它没有更新到材料设计（我分叉了它，如果我有时间，我会尝试更新它）。

You can find more information about the new API 21 in @ChrisBanes blogas well as the official android blog

您可以在@ChrisBanes 博客以及官方 android 博客中找到有关新 API 21 的更多信息

EDIT:You can find material design tabs in this repo jpardogo/PagerSlidingTabStrip:

编辑：您可以在此 repo jpardogo/PagerSlidingTabStrip 中找到材料设计选项卡：

I basically did 4 changes to the original library, so far (I will add Toolbar and fix some stuff tomorrow):

到目前为止，我基本上对原始库进行了 4 次更改（我将添加 Toolbar 并在明天修复一些内容）：

1. Change the default parameters of the tabs layout to make it look like more material.
2. The indicator is center by default while swiping tabs.
3. The alpha value of the titles change depending the selected position.

4. Ability to pass customTabs implementing the interface ′CustomTabProvider` in your adapter.

   • In case the customTab have a view with id @+id/tab_title, it will be use to place the title and alpha will act as usual.
   • If this interface is not implemented then, the default Tab layout will be use (TextView).

1. 更改选项卡布局的默认参数，使其看起来更有质感。
2. 滑动选项卡时，指示器默认居中。
3. 标题的 alpha 值会根据所选位置而变化。

4. 能够传递在您的适配器中实现接口“CustomTabProvider”的 customTabs。

   • 如果 customTab 有一个带有 id 的视图@+id/tab_title，它将用于放置标题，而 alpha 将照常运行。
   • 如果未实现此接口，则将使用默认的 Tab 布局（TextView）。

If you want you can use a custom tab with ripples using any of this libraries:

如果您愿意，可以使用以下任何库使用带有涟漪的自定义选项卡：

• https://github.com/traex/RippleEffect
• https://github.com/siriscac/RippleView
• https://github.com/balysv/material-ripple
• https://github.com/03uk/RippleDrawable

• https://github.com/traex/RippleEffect
• https://github.com/siriscac/RippleView
• https://github.com/balysv/material-ripple
• https://github.com/03uk/RippleDrawable

EDIT2:I changed the ActionBar for the new support library Tooolbar. I have also applied colors dynamically to the tabs,toolbar and statusBar. You can see the example working in android 4.4.3 on the following gif.

EDIT2：我为新的支持库 Toolbar 更改了 ActionBar。我还动态地将颜色应用于选项卡、工具栏和状态栏。您可以在以下 gif 中看到在 android 4.4.3 中运行的示例。

I sent a PR with my changes. If the original project owner doesn't update the maven library, and push it to maven I will push my library fork to maven central.

我用我的更改发送了 PR。如果原始项目所有者不更新 maven 库，并将其推送到 maven，我会将我的库 fork 推送到 maven 中心。

回答by Karim

I personally love jpardogo's library jpardogo/PagerSlidingTabStrip.

我个人喜欢jpardogo的库jpardogo/PagerSlidingTabStrip。

One thing that I found missing in it though is ripple effect as seen in:

我发现其中缺少的一件事是涟漪效应，如下所示：

So I decided to make my own library, based on PagerSlidingTabStrip, and with customizable ripple effect: pizza/MaterialTabs.

所以我决定创建自己的库，基于 PagerSlidingTabStrip 和可定制的涟漪效果：pizza/MaterialTabs。

You can also find a sample on the Play Store, customize your tabs there, then generate your code and export it instantly! :)

您还可以在Play 商店中找到示例，在那里自定义您的标签，然后生成您的代码并立即导出！:)

回答by Carsten

I am using the DrawerLayout, had switched to the latest appcompat, compiled with api 21 and got this material theme. Make sure you use drawer from v7. Description: http://antonioleiva.com/material-design-everywhere/

我正在使用 DrawerLayout，已切换到最新的 appcompat，使用 api 21 编译并获得此材质主题。确保您使用 v7 中的抽屉。描述：http: //antonioleiva.com/material-design-everywhere/