钛：Android的选项卡组栏和选项卡的定制

Question

我已经建立了使用Objective-C中的iOS标签栏，我试图让Android上的标签栏看起来尽可能接近使用钛。我在想：

1. 你如何给标签栏本身一个背景图片？我唯一能做的就是给它一个背景颜色。 backgroundImage属性不起作用。

2. 如何更改所选标签的背景颜色？我试过改变activeTabBackgroundSelectedColor没有运气。

3. 如何修改活动标签的图标？我很喜欢这个图标在没有被选中时是灰色的，但是在被选中时是白色的。我试图创建一个可绘制的，但我不能让Android应用使用Titanium.App.Android.R.drawable.ic_tab_coupon 感谢您的帮助它识别！

-

附：对于它的价值，这里是我正在使用的代码片段。请注意，我有被实例化其他选项卡/加同样的方式，我只是没有表现出他们的简洁。

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

在钛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

，则回答这个问题是：

• 您可以将图标不能设置为绘制资源
• 不能更改标签图标的选项卡绘制

后直到上面一个是avaliable你当您使用Ti.UI.TabGroup/Ti.UI.Tab时，将无法更改选项卡的图标。

Answer 2

您需要定义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。

首先定义的布局，由于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）可在设置图标和每个选项卡的编程的文本或用户还可以定义单独的每个选项卡的布局。