Thay đổi màu sắc và công cụ chọn trong TabWidget

Question

Tôi đã TabWidget, độc lập với ÀctionBar , in a FragmentTabHost`.

Tôi muốn tùy chỉnh giao diện của TabWidget nhưng tôi không hiểu. Ý định của tôi là thay đổi màu văn bản và màu của bộ chọn, như bạn có thể thấy trong hình ảnh tôi có thể thay đổi nền của TabWidget. Tôi không muốn sử dụng tùy chỉnh TextView cho các tab vì các tab phải có giao diện Holo.

Tôi đã cố gắng để đưa một phong cách cho TabWidget nhưng nó không hoạt động. Bằng cách này:

<TabWidget 
      android:id="@android:id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="horizontal" 
      style="@style/MyTabs" 
      /> 

và với phong cách

<style name="MyTabs"> 
     <item name="android:textColor">@color/white</item> 
     <item name="android:background">@drawable/tabs</item> 
     <item name="android:backgroundStacked">@color/red_action_bar</item> 
    </style> 

tôi đã cố gắng để thêm phong cách từ một theme.xml sử dụng parent="android:Widget.Holo.TabWidget", nhưng không có gì xảy ra.

Answer 1

Cuối cùng tôi đã tìm ra cách để thực hiện điều đó. Sử dụng mã này trong phương pháp onCreateView của Fragment

for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) { 
       View v = tabHost.getTabWidget().getChildAt(i); 
       v.setBackgroundResource(R.drawable.tabs); 

       TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title); 
       tv.setTextColor(getResources().getColor(R.color.white)); 
} 

Và thiết lập các màu bakcground của TabWidget sang màu đỏ

Answer 2

tôi đã không thay đổi các tab bản thân, nhưng tôi sẽ cho rằng bạn có thể làm điều đó với những phong cách từ styles.xml ...

<style name="Widget.Holo.TabWidget" parent="Widget.TabWidget"> 
     <item name="android:tabStripLeft">@null</item> 
     <item name="android:tabStripRight">@null</item> 
     <item name="android:tabStripEnabled">false</item> 
     <item name="android:divider">?android:attr/dividerVertical</item> 
     <item name="android:showDividers">middle</item> 
     <item name="android:dividerPadding">8dip</item> 
     <item name="android:measureWithLargestChild">true</item> 
     <item name="android:tabLayout">@android:layout/tab_indicator_holo</item> 
    </style> 

với tab_indicator_holo.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
     <!-- Non focused states --> 
     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_holo" /> 
     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" /> 

     <!-- Focused states --> 
     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected_focused_holo" /> 
     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" /> 

     <!-- Pressed --> 
     <!-- Non focused states --> 
     <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" /> 
     <item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" /> 

     <!-- Focused states --> 
     <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_focused_holo" /> 
     <item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_focused_holo" /> 
    </selector> 

Hoặc bạn cũng có thể thử

<style name="Widget.Holo.ActionBar.TabView" parent="Widget.ActionBar.TabView"> 
      <item name="android:background">@drawable/tab_indicator_ab_holo</item> 
      <item name="android:paddingLeft">16dip</item> 
      <item name="android:paddingRight">16dip</item> 
     </style> 

và tab_indicator_ab_holo.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
     <!-- Non focused states --> 
     <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@color/transparent" /> 
     <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" /> 

     <!-- Focused states --> 
     <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/list_focused_holo" /> 
     <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected_focused_holo" /> 

     <!-- Pressed --> 
     <!-- Non focused states --> 
     <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/list_pressed_holo_dark" /> 
     <item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" /> 

     <!-- Focused states --> 
     <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" /> 
     <item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" /> 
    </selector> 

Cuối cùng, sử dụng hai đối tượng png-9 drawables: tab_selected_holo và tab_unselected_holo. Họ trông giống như hai dòng màu xanh đậm và mỏng hơn mà bạn đang nói đến.

Hay bạn có nghĩa là minitabs?

<style name="Widget.ActionBar.TabView" parent="Widget"> 
     <item name="android:gravity">center_horizontal</item> 
     <item name="android:background">@drawable/minitab_lt</item> 
     <item name="android:paddingLeft">4dip</item> 
     <item name="android:paddingRight">4dip</item> 
    </style> 

với trong minitab_lt.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true" android:state_selected="true" 
      android:drawable="@drawable/minitab_lt_press" /> 
    <item android:state_selected="true" 
      android:drawable="@drawable/minitab_lt_selected" /> 
    <item android:state_pressed="true" 
      android:drawable="@drawable/minitab_lt_unselected_press" /> 
    <item android:drawable="@drawable/minitab_lt_unselected" /> 
</selector> 

Nếu bạn cần định nghĩa khác chỉ cần tìm kiếm TabWidget ở đây: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml

Sau đó, như thường lệ xác định phong cách riêng của bạn với tất cả các thuộc tính cần thiết và drawables ...

Answer 3

Như tôi đã trả lời here, điều này thực sự có thể được thực hiện bằng các chủ đề XML. TabWidget sử dụng android:textPrimaryColor cho tab đã chọn và android:textSecondaryColor cho các tab không được chọn.Các màu nhấn được xác định bởi colorAccent và màu nền bởi colorPrimary Vì vậy, bạn có thể đạt được mong muốn tùy biến như thế này:

Trong styles.xml:

<style name="TabWidgetTheme" parent="AppTheme"> 
    <item name="colorPrimary">@color/your_primary_color</item> 
    <item name="colorAccent">@color/your_accent_color</item> 
    <item name="android:textPrimaryColor">@color/your_primary_color</item> 
    <item name="android:textSecondaryColor">@color/your_secondary_color</item> 
</style> 

Trong bố cục của bạn:

<TabHost 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:theme="@style/TabWidgetTheme"/> 

Lưu ý rằng android:theme không được trực tiếp trong chính số TabWidget, mà đúng hơn là có chứa TabHost hoặc tương tự.

Answer 4

Hãy thử điều này:

1.Create một phong cách mới:

<style name="TabText"> 
    <item name="android:textColor">@color/YOUR_COLOR</item> 
</style> 

2.On Tab Máy chủ, thiết lập chủ đề:

<TabHost android:theme="@style/TabText"> 

3.The nền bạn có thể đặt bình thường trên TabWidget

<TabWidget android:background="#FFF"/>