如何创建中心凸起的选项卡栏？

Question

我想要创建一个如下图所示的TabBar： 这里，所有的Tab Bar都是普通的。只是它们是自定义的。现在我想要创建一个像上面图片中那样的Tab Bar，在其中心的Tab是凸起的。

那么我应该怎么做才能实现呢？

如果有任何演示，则会更好。

请帮帮我。

- Shreyash Mahajan

---

重新设计你的应用程序以适配安卓系统，直接将iPhone版本移植过去效果不佳。 - FunkTheMonk

你可以从这个链接中找到演示：http://androidcustomviews.com/portfolio/custom-tabbar-android/ - Girish Bhutiya

@Girish Bhutiya。感谢您的回答，但我已经解决了它。 - Shreyash Mahajan

@iDroidExplorer，我需要做同样的选项卡栏，请问你能告诉我如何实现吗？ - user2134412

@iDroidExplorer，你能帮我吗？我该如何在选项卡标签的中心显示图像？我做这个有困难。 - nida

Answer 1

您可以在选项卡小部件中设置背景图片，方法如下：

tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.home_h);
tabHost.getTabWidget().getChildAt(1).setBackgroundResource(R.drawable.live);
tabHost.getTabWidget().getChildAt(2).setBackgroundResource(R.drawable.camera);
tabHost.getTabWidget().getChildAt(3).setBackgroundResource(R.drawable.profile);
tabHost.getTabWidget().getChildAt(4).setBackgroundResource(R.drawable.Messege);

将图像创建为其他四个图像，例如透明度为前20％的部分和中间相机创建为您的曲线基础。这样做，您将实现目标。

如下所示，灰色部分是透明部分。

- Hardik Gajjar

---

是的，我已经看到了你的图片，但它是正方形的。我想要像我在问题帖子中那样的中心选项卡。 - Shreyash Mahajan

不需要更改中心图像，因为我只展示它，只需要更改其他四个图像，如HOME图像。它将被设置。 - Hardik Gajjar

除了四张图像的20％顶部比例需要透明显示外，所有图像的高度将保持相同，如上图所示。 - Hardik Gajjar

我已经使用了这段代码。它看起来很好，但是我无法获取Intent。 - Shreyash Mahajan

@HardikGajjar 我已经这样做了，但是出现了空指针异常。你能帮我解决吗？ - user2134412

Answer 2

我正在做这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent" 
android:layout_height="match_parent">

    <TabWidget 
            android:id="@android:id/tabs" 
            android:layout_width="match_parent" 
            android:layout_height="0dp"
            android:tabStripEnabled="false"/>

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/btn1" />

        <ImageView 
            android:id="@+id/btn1"        
            android:layout_alignParentBottom="true"      
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn2"
            android:src="@drawable/ic_launcher"/>

        <ImageView 
            android:id="@+id/btn2"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/btn3"
            android:src="@drawable/ic_launcher"/>

         <ImageView 
            android:id="@+id/btn3"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/ic_launcher"/>     

         <ImageView 
            android:id="@+id/btn4"
            android:layout_toRightOf="@+id/btn3"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>     

        <ImageView 
            android:id="@+id/btn5"
            android:layout_toRightOf="@+id/btn4"
            android:layout_alignParentBottom="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"/>                                         

</RelativeLayout>
</TabHost>

我想摆脱内置的TabWidget，自己使用LinearLayout设置标签页。之后，您只需要在主标签页活动中设置onClick函数即可。

例如：

public void onClick(View v)
    {
            switch(v.getId())
            {
                    case R.id.btn1: 
                            tabHost.setCurrentTab(0);
                            break;
                    case R.id.btn2:
                            tabHost.setCurrentTab(1);
                            break;
                    case R.id.btn3:
                            tabHost.setCurrentTab(2);
                            break;
                    case R.id.btn4:
                            tabHost.setCurrentTab(3);
                            break;
                    case R.id.btn5:
                            tabHost.setCurrentTab(4);
                            break;
            }
    }    

- goodm

---

谢谢回答。但中心标签怎么样？我想将其凸起成圆形。 - Shreyash Mahajan

你正在使用RelativeLayout作为主要容器。 - goodm

请您提供完整的制作说明吗？ - Shreyash Mahajan

你不知道什么？你有什么问题？ - goodm