自定义 appbar / tab 布局以在 Fragment 之间切换

Question

我想要以下外观：

我很困惑是否需要使用带有图像作为页面标题的 TabLayout，还是应该通过自定义 App Bar 来完成？ （或者它可以通过任何一种方式实现？）。

目前我有以下：

但你可以看到它太简单了，我希望它更“设计”。 您可以在我的示例中看到，它不仅有图像而不是标题，而且图像也被着色了。 （应用名称没有页面标题，所以剩下的东西有更多空间）

我对所有 PagerAdapter 和 TabLayout 和 LayoutManager 感到困惑。我很想看到一个我正在努力实现的工作示例。我知道我没有提供任何代码，这是因为我真的不知道如何开始完成它

Answer 1

首先，这个article 可能会有所帮助。它将向您展示如何仅使用图标制作选项卡布局。它非常有用，因为它逐步向您展示了如何创建它。仔细遵循第 1 节。对于第 2 节（固定标签）和第 3 节（滚动标签），您必须选择一个。然后跳到第 5 节：只有图标的选项卡。

然后，因为您不想要标题，您可以在 values/styles.xml 文件中将其设置为无操作栏布局。关键是把ActionBar改成NoActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...

确保您的活动风格遵循该特定风格。

然后，您需要更改选项卡布局的背景颜色。通过将带有标签的 xml 文件中的属性设置为不同的颜色，标签的背景也可以是不同的颜色。

<android.support.design.widget.TabLayout
....
app:tabBackground="@drawable/tab_color_selector"
...
/>

然后在选择器res/drawable/tab_color_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/tab_background_selected" android:state_selected="true"/>
    <item android:drawable="@color/tab_background_unselected"/>
</selector>

请参阅此article 了解如何更改背景颜色。