Xamarin: Style TabWidget

问题:

i am using TabHost for tabbed layout in android xml. How can i style the tabs?

Selected tab should be bulged up as in the figure. How can i set borders to tabs? And box-shadow?

Xml for each tab,

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

I managed to set background colors by using following code:

TabWidget.GetChildAt(0).SetBackgroundColor(Android.Graphics.Color.ParseColor("#8ACAE1"));

Here is the code i used to create tabWidget,

TabHost.TabSpec spec;            
TabHost.SetBackgroundColor(Android.Graphics.Color.ParseColor("#4B4B4B"));

var intent = new Intent(this, activityType);
intent.AddFlags(ActivityFlags.NewTask);

spec = TabHost.NewTabSpec(tag);

var drawableIcon = Resources.GetDrawable(drawableId);
spec.SetIndicator("", drawableIcon);

spec.SetContent(intent);
TabHost.AddTab(spec);

Please help, Thanks.

回答1:

Use this code:

Button _button = new Button(context);
_button.setBackgroundResource("selector xml file");

TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(_button)
            .setContent(new TabContentFactory() {
                public View createTabContent(String tag) {
                    return _button;
                }
            });

tabHost.addTab(setContent, class name, null);

回答2:

Got it working.

Method to create tab

    private void CreateTab(Type activityType, string tag, string colorcode, int viewId)
{
    TabHost.TabSpec spec;

    var intent = new Intent(this, activityType);
    intent.AddFlags(ActivityFlags.NewTask);

    spec = TabHost.NewTabSpec(tag);
    View tab = LayoutInflater.Inflate (viewId, null); // viewId = Resource.Layout.TabStyle

    spec.SetIndicator (tab);
    spec.SetContent(intent);

    TabHost.AddTab(spec);
} 

TabStyle.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabLayout"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:background="@drawable/ic_tab_state"
    android:layout_height="fill_parent">
    <ImageView
        android:src="@drawable/feed"
        android:layout_width="100dp"
        android:layout_height="fill_parent"
        android:scaleType="centerInside"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="9dp"
        android:layout_marginRight="9dp"
        android:layout_marginBottom="9dp"
        android:adjustViewBounds="true"
        android:layout_gravity="center_vertical|center_horizontal"
        android:id="@+id/tabIcon" />
</LinearLayout>

ic_tab_state.xml

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

selectedTab.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="6dp">
        <shape android:shape="rectangle">
            <gradient android:startColor="#AAAAAA" android:centerColor="#888888"
                android:endColor="#666666" android:angle="90" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:top="4dp" android:left="1dp" android:right="1dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <solid android:color="#8ACAE1" />
            <corners android:bottomRightRadius="0dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="8dp"
                android:topRightRadius="8dp" />
        </shape>
    </item>
</layer-list>

unselectedTab.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="11dp">
        <shape android:shape="rectangle">
            <solid android:color="#333333" />
        </shape>
    </item>
    <item android:top="12dp" android:left="1dp" android:right="1dp"
        android:bottom="0dp">
        <shape android:shape="rectangle">
            <solid android:color="#8ACAE1" />
        </shape>
    </item>
</layer-list>