Titanium：Android Tab Group Bar 和 Tabs 的自定义

Question

我已经使用 Objective-C 在 iOS 上构建了一个标签栏，并尝试使用 Titanium 让 Android 上的标签栏看起来尽可能接近。我想知道：

1. 如何为标签栏本身提供背景图像？我唯一能做的就是给它一个背景颜色。 backgroundImage 属性无效。

2. 如何更改选定选项卡的背景颜色？我试过更改activeTabBackgroundSelectedColor，但没有成功。

3. 如何修改活动标签的图标？我希望图标在未选中时为灰色，但在选中时为白色。我尝试创建一个可绘制对象，但我无法使用Titanium.App.Android.R.drawable.ic_tab_coupon 让 Android 应用程序识别它 感谢您的帮助！

-

附：对于它的价值，这是我正在使用的代码的 sn-p。请注意，我还有其他以相同方式实例化/添加的选项卡，只是为了简洁起见，我没有显示它们。

var self = Ti.UI.createTabGroup({
    backgroundColor: 'red',
    activeTabBackgroundColor: 'blue',
});

var win1 = new Window(L('SpintoWin'));

var tab1 = Ti.UI.createTab({
    backgroundColor: 'none',
    title: L('SpintoWin'),
    icon: '/images/tab-icon-gift.png',
    window: win1
});

win1.containingTab = tab1;

self.addTab(tab1);

Answer 1

这是一个较老的问题，但我想我会提供一些有关此问题的其他详细信息，因为该问题在搜索引擎结果中的条款非常高。

http://developer.appcelerator.com/question/53851/android-tab-icon-states

在 Titanium 1.7 中，标签被修改为支持可绘制资源以实现这一点（见下文，包括示例代码）

https://jira.appcelerator.org/browse/TIMOB-3179

现在，在那之后的某处修复了将可绘制资源指定为选项卡图标的功能被删除。

下一个合乎逻辑的步骤是在标签获得或失去焦点时尝试修改标签的.icon 属性，如以下问题所述：

http://developer.appcelerator.com/question/135063/how-to-change-active-tab-icon

由于原生 Android 代码采用可绘制资源而不是字符串值，因此选项卡上的图标在绘制后无法更新：

https://jira.appcelerator.org/browse/TIMOB-9962

所以，问题的答案是：

• 您不能将图标设置为可绘制资源
• 标签绘制后不能更改标签图标

在上述其中一项可用之前，当您使用 Ti.UI.TabGroup / Ti.UI.Tab 时，您将无法更改选项卡的图标。

Answer 2

1.你需要定义TabWidget的android:background属性。例如：

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@android:id/tabs" />

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

        android:background="@drawable/tab_backgrnd" />

</RelativeLayout>

其中tab_backgrnd 可以是任何drawable。

2 & 3. 首先，您像 Android 本身一样定义选项卡的布局。以下是 Android 的选项卡布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="64dip"
    android:layout_weight="1"
    android:layout_marginLeft="-3dip"
    android:layout_marginRight="-3dip"
    android:orientation="vertical"
    android:background="@drawable/tab_indicator">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle" />

</RelativeLayout>

您可以在此布局中添加任何您想要的内容，而不仅仅是一个ImageView 和一个TextView。要使您的选项卡在按下/选择时发生变化，请将StateListDrawable 设置为根布局的背景和选项卡包含的其他元素的背景（上例中的ImageView 和TextView）。

然后你膨胀这个布局并将其设置为标签指示器：

    TabHost tabHost = getTabHost();
    TabHost.TabSpec tabSpec;  // Reusable TabSpec for each tab
    Intent intent;  // Reusable Intent for each tab
    View tabView;
    LayoutInflater inflater = getLayoutInflater();

    intent = new Intent().setClass(this, YourActivity1.class);
    tabView = inflater.inflate(R.layout.tab_layout, tabHost.getTabWidget(), false);
    tabSpec = tabHost.newTabSpec(TAG_TAB_1).setIndicator(tabView).setContent(intent);
    tabHost.addTab(tabSpec);

    // Do the same for the other tabs
    ...

您可以通过编程方式设置每个选项卡的图标和文本（就像 Android 使用 android:id="@+id/icon" 和 android:id="@+id/title" ids 一样），或者您可以为每个选项卡定义单独的布局。