Xamarin：風格TabWidget

Question

我使用TabHost爲android xml中的標籤式佈局。我如何設計標籤？

選中的標籤應該鼓起了如下圖。我如何設置邊界到標籤？和盒子陰影？

XML對於每個標籤，

<?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> 

我管理通過使用以下代碼來設置背景顏色：

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

這裏是我用來創建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); 

請幫忙， 謝謝。

Answer 1

明白了。

方法來創建標籤

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> 

Answer 2

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);