如何获得此标签栏

Question

如何获得tabbar的以下设计

选择选项卡后，曲线按钮必须在特定选项卡中可见，而另一个选项卡应该是共同的。

我想添加一个固定的背景颜色为红色，我将图像的按钮放置曲线而没有曲线。 但我想知道它是否为所有Android设备修复，因为wat是按钮的高度和宽度？ 如何设置固定高度和宽度的tabbar ....

Answer 1

我通过以下简单的方式找到了

为了获得标签栏底部的红线，我在标签下添加了一个view ，如下所示

<TabHost
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="fill_parent"
        android:id="@+id/linearLayout1"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <TabWidget
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"
            android:layout_alignParentBottom="true"
            android:layout_weight="0">
        </TabWidget>

        <View android:layout_width="fill_parent" android:layout_height="4dip"   android:background="#ff0000" />

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@android:id/tabcontent"
            android:layout_weight="1">
        </FrameLayout>

    </LinearLayout>
</TabHost>

然后我的tabbar类如下

public class CustomTabActivity extends TabActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tabbar);

        addTab1(FirstTab.class);
        addTab2(SecondTab.class);
        addTab3(FirstTab.class);
        addTab4(SecondTab.class);
    }

    private void addTab1( Class<?> c)
    {
        TabHost tabHost = getTabHost();
        Intent intent = new Intent(this, c);
        TabHost.TabSpec spec = tabHost.newTabSpec("tab");   

        View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator1, getTabWidget(), false);
        ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon1);

        spec.setIndicator(tabIndicator);
        spec.setContent(intent);
        tabHost.addTab(spec);
    }
}

我的tab_indicator布局如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="55dip"    
    android:layout_weight="1"
    android:orientation="vertical"
    android:padding="5dp">

    <ImageView android:id="@+id/icon1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@drawable/tab1">    
    </ImageView> 
</RelativeLayout>

drawable中的tab1是一个Selector xml文件，如下所示

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item android:state_focused="false" android:state_selected="false"
        android:state_pressed="false" android:drawable="@drawable/home" />
    <item android:state_focused="false" android:state_selected="true"
        android:state_pressed="false" android:drawable="@drawable/home_select_btn" />

</selector>

在这里，我添加了所选图像的弯曲和未弯曲的未选择图像，我想要显示。

这种方式似乎很长，但我觉得它是我需要的相同设计。

Answer 2

也许这个例子对你有用。 它与Google+应用程序具有相同类型的导航功能。