Xamarin:样式 TabWidget [英] Xamarin: Style TabWidget

问题描述

我在 android xml 中使用 TabHost 进行选项卡式布局.如何设置标签的样式?

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，

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

这是我用来创建tabWidget的代码，

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

请帮忙，谢谢.

推荐答案

搞定了.

创建标签的方法

    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

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

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

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

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>

这篇关于Xamarin:样式 TabWidget的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！