制作类似于Android Chrome浏览器的自定义TabHost

Question

我想为浏览器创建自定义的类似标签页的tabhost。我对如何在布局中应用它（就像在chrome浏览器标签页中一样）感到困惑，就像图片中展示的那样。

这是我尝试过的内容。我想知道如何创建像图片中那样具有斜坡边缘的标签页。

tab_selected.xml

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#DCDCDC" />

        <corners
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp" />
    </shape>
</item>
<item
    android:bottom="2dp"
    android:left="1dp"
    android:right="1dp"
    android:top="1dp">
    <shape android:shape="rectangle" >
        <solid android:color="#DCDCDC" />
        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />
    </shape>
</item>

tab_unselected.xml

<item android:top="10dp">
    <shape android:shape="rectangle" >
        <solid android:color="#AAAAAA" />
    </shape>
</item>
<item android:bottom="2dp">
    <shape android:shape="rectangle" >
        <solid android:color="#AAAAAA" />

        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp" />

    </shape>
</item>

我希望可以在XML中使用Pathshape来完成。有人能给我提供一个参考吗？我无法找到关于PathShape的参考资料。

- intrepidkarthi

---

无法将其创建为xml drawable，九宫格图更合适。 - user

@Luksprog 我希望通过PathShape编程实现它，这样可行吗？ - intrepidkarthi

@intrepidkarthi 你找到任何解决方案了吗？ - UnderGround

如果你使用的话，不能显示超过5个选项卡，这对你来说可以吗？ - stinepike

与九宫格图片完美配合。 - intrepidkarthi

Answer 1

将您的页面放入FrameLayout中，并使用哈希映射（具有特定名称）。然后，您可以像这样更改选项卡。

  FrameLayout fl =new FrameLayout(context);
  HashMap<String,LinearLayout> tabs =new HashMap<String,LinearLayout>(); 

  LinearLayout tab =new LinearLayout(context);
  fl.addView(tab);
  tabs.put("home",tab);

  tab =new LinearLayout(context);
  fl.addView(tab);
  tabs.put("events",tab);



private void changeTab(String tabKey) {
    for (java.util.Map.Entry<String, LinearLayout> e : tabs.entrySet()) {
        if (e.getKey().compareTo(key) == 0) {
            e.getValue().setVisibility(View.VISIBLE);
        } else {
            e.getValue().setVisibility(View.INVISIBLE);
        }
    }
 }


 use this to change tab:

  changeTab("home");

注意：您必须将fl设置为活动的contentview，或者将其添加到另一个视图中并将其设置为contentview。

- bmavus

---

谢谢回答。我也需要这个解决方案。但我的问题主要是关于选项卡的设计。 - intrepidkarthi

要创建类似的选项卡，您必须创建自己的选项卡栏和选项卡按钮。因为如您所见，活动选项卡在其他选项卡之上。您可以将按钮放置在相对布局中，并更改它们的z-index（我不知道在Android中这个属性的名称，所以我使用HTML中的z-index。但我知道它存在，请搜索一下）。 - bmavus

好的。目前我正在尝试使用九宫格图片。我会尽快更新结果。 - intrepidkarthi

@intrepidkarthi 不错的想法，我会尝试做同样的事情...我有一个想法...基本上我们可以制作6个九宫格图像，分别用于第一个选中和未选中的标签。2个用于中间标签，2个用于最后一个标签。根据位置，我们必须设置可绘制对象。我会尝试实现，然后告诉你是否成功。 - TheFlash

Answer 2

使用两个九宫格图像效果良好。一个用于活动选项卡，另一个用于非活动选项卡。

- intrepidkarthi

---

但是您是如何将单独的监听器添加到选项卡上的删除图标的呢？ - Akhilesh Sk

@AkhileshSk 使用我使用的选项卡 ID。 - intrepidkarthi