自定义应用栏/标签的布局以在片段之间切换

Question

我希望具有以下外观：

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

目前，我有以下内容：

但是您可以看到它太简单了，我希望它更加“设计”。 您可以在我的示例中看到，它不仅具有图像而不是标题，而且图像被着色。 （没有带有应用名称的页面标题，因此剩余的空间可用于其他内容）

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

Answer 1

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

然后，由于不需要标题，因此可以在values / styles.xml文件中将其设置为“无操作栏布局”。关键是将ActionBar更改为NoActionBar

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

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

然后，您需要更改标签layou的背景颜色。通过将带有选项卡的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，以了解如何更改背景色。