Android：使用 TabHost 和 TabHost 自定义选项卡的外观选项卡小部件

Question

我之前打开过一篇关于此问题的帖子，但我觉得我现在可以（在阅读其他一些帖子之后）更好地解释我想要的内容并重新措辞，以便更好地理解。

我按照开发指南上有关选项卡布局的教程进行操作，并设法用它创建选项卡，但我想对其进行一些自定义（我确实查看了其他帖子，但代码要么有很多错误，要么没有不回答我正在寻找的东西）。

1. 我遇到的第一个问题是测试大部分是在图标上方而不是在图标下方（我按照开发指南中的建议使用了尺寸为 48x48 的图标）。我希望选项卡的行为就像wrap_content 一样。 我还想更改文本大小（我认为它称为标签）。

2. 我想使用十六进制三元组来更改选项卡的背景颜色，以在以下情况之间更改它：何时选择此选项卡以及何时不选择该选项卡。

3. 我希望能够更改选项卡下方线条的颜色，我找不到有关如何执行此操作的任何信息。

我当前用于创建新选项卡的代码是（来自开发指南）：（

    intent = new Intent().setClass(this, GroupsActivity.class);
    spec = tabHost.newTabSpec("groups").setIndicator("groups",
                      res.getDrawable(R.drawable.ic_tab_groups))
                  .setContent(intent);
    tabHost.addTab(spec);

groups 是选项卡名称）。

非常感谢帮助！

Answer 1

与其尝试自定义小部件选项卡本身，这里是我在一个项目中成功使用的另一种方法，它可能会为您省去一些麻烦：

这个想法是在布局中使用隐藏的 TabWidget 并使用自定义的 LinearLayout 来控制它，其中包含按钮。这样，您可以更轻松地将按钮自定义为您想要的外观。您将在每个按钮的 OnClick 内控制 Activity 中的实际 TabWidget。

1. 使用 TabWidget 和按钮创建布局：

    
   
   
       
           
   
           
               <按钮 android:id="@+id/firstButton"
                   android:layout_alignParentTop="true" android:background="@drawable/btn_first_on"
                   android:layout_width=”100dp” android:layout_height=”43dp”
                   android:clickable="true">
               <按钮 android:id="@+id/secondButton"
                   android:layout_alignParentTop="true" android:background="@drawable/btn_second_off"
                   android:layout_height="43dp" android:layout_width="100dp"
                   android:clickable="true">
               <按钮 android:id="@+id/thirdButton"
                   android:layout_alignParentTop="true" android:background="@drawable/btn_third_off"
                   android:layout_height="43dp" android:layout_width="100dp"
                   android:clickable="true">
               <按钮 android:id="@+id/forthButton"
                   android:layout_alignParentTop="true" android:background="@drawable/btn_forth_off"
                   android:layout_height="43dp" android:layout_width="100dp"
                   android:clickable="true">
           
   
           
   
       
   
   

2. 设置 Activity 的 onCreate 来处理使用按钮调整选项卡视图的情况：

    public void onCreate(Bundle savingInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.main);
   
           // 标签        
           第一个按钮 = (按钮) findViewById(R.id.firstButton);
           SecondButton = (Button) findViewById(R.id.secondButton);        
           ThirdButton = (Button) findViewById(R.id.thirdButton);
           forthButton = (Button) findViewById(R.id.forthButton);
   
           资源 res = getResources(); // 获取Drawables的资源对象
           最终 TabHost tabHost = getTabHost(); // 活动 TabHost
           TabHost.TabSpec 规范； // 每个选项卡可重复使用的 TabSpec
           意图意图； // 每个选项卡的可重用意图
   
           意图 = new Intent().setClass(this, FirstGroupActivity.class);
           spec = tabHost.newTabSpec("第一个").setIndicator("第一个").setContent(intent);
           tabHost.addTab(规格);
           意图 = new Intent().setClass(this, SecondGroupActivity.class);
           Spec = tabHost.newTabSpec("第二").setIndicator("第二").setContent(意图);
           tabHost.addTab(规格);   
   
           意图 = new Intent().setClass(this, ThirdGroupActivity.class);
           spec = tabHost.newTabSpec("第三").setIndicator("第三").setContent(intent);
           tabHost.addTab(规格);
   
   
           意图 = new Intent().setClass(this, ForthActivity.class);
           spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent);
           tabHost.addTab(规格);
   
   
           tabHost.setCurrentTab(0);
   
           firstButton.setOnClickListener(new OnClickListener() {
   
               公共无效onClick（查看v）
               {
                   tabHost.setCurrentTab(0);
                   firstButton.setBackgroundResource(R.drawable.btn_first_on);
                   SecondButton.setBackgroundResource(R.drawable.btn_second_off);              
                   thirdButton.setBackgroundResource(R.drawable.btn_third_off);
                   forthButton.setBackgroundResource(R.drawable.btn_forth_off);            
               }
   
           });
   
   
           SecondButton.setOnClickListener(new OnClickListener() {
   
               公共无效onClick（查看v）
               {
                   tabHost.setCurrentTab(1);
                   firstButton.setBackgroundResource(R.drawable.btn_first_off);
                   SecondButton.setBackgroundResource(R.drawable.btn_second_on);                       
                   thirdButton.setBackgroundResource(R.drawable.btn_third_off);                        
                   forthButton.setBackgroundResource(R.drawable.btn_forth_off);
   
               }
   
           });
   
   
           thirdButton.setOnClickListener(new OnClickListener() {
   
               公共无效onClick（查看v）
               {
                   tabHost.setCurrentTab(3);
                   firstButton.setBackgroundResource(R.drawable.btn_first_off);
                   SecondButton.setBackgroundResource(R.drawable.btn_second_off);              
                   thirdButton.setBackgroundResource(R.drawable.btn_third_on);
                   forthButton.setBackgroundResource(R.drawable.btn_forth_off);
   
               }
   
           });
   
   
           forthButton.setOnClickListener(new OnClickListener() {
   
               公共无效onClick（查看v）
               {
                   tabHost.setCurrentTab(4);
                   firstButton.setBackgroundResource(R.drawable.btn_first_off);
                   SecondButton.setBackgroundResource(R.drawable.btn_second_off);              
                   thirdButton.setBackgroundResource(R.drawable.btn_third_off);
                   forthButton.setBackgroundResource(R.drawable.btn_forth_on);
   
               }
   
           });
       }
   

如您所见，我使用可绘制对象来显示按钮打开和关闭的图像。使用此技术，当您只是尝试自定义 TabWidget 选项卡的外观时，您将不受可用选项的限制，并且您可以为选项卡创建完全自定义的外观。

Answer 2

1- 使用自定义视图：

    spec = tabHost.newTabSpec("groups");
    View view = LayoutInflater.from(this).inflate(R.layout.tabwidget_tabs, tabHost.getTabWidget(), false);
    spec.setIndicator(view);
    spec.setContent(intent);

而不是：

    spec = tabHost.newTabSpec("groups").setIndicator("groups", res.getDrawable(R.drawable.ic_tab_groups)).setContent(intent);
    tabHost.addTab(spec);

然后在文件 tabwidget_tabs.xml 中定义选项卡的视图（您可以在 textView 和 textsize 之前定义 ImageView）：

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tabsLayout" 
        android:layout_width="wrap_content"
        android:layout_height="34dp"
        android:background="@drawable/tabs_bkgrd"
        android:padding="5dp" 
        android:orientation="vertical">

        <TextView android:id="@+id/tabsText" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:singleLine="true"
            android:textStyle="bold" 
            android:gravity="center_horizontal"
            android:textSize="14dp" />
    </LinearLayout>

2- 不可能使用十六进制三元组来更改选项卡的背景颜色，因为是可绘制的而不是颜色。但是，您可以使用选择器来更改可绘制对象。您可以将此解决方案与 setColorFilter() 和 android:tint 结合使用，然后您可以使用十六进制三元组选择背景： 如何给位图着色

tabs_bkgrd.xml：

    <?xml version="1.0" encoding="utf-8"?>
    <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_shape" />
    <item android:state_focused="false" android:state_selected="true" 
        android:state_pressed="false" android:drawable="@drawable/tab_selected_shape" /> 

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

    <!-- Pressed -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_pressed_shape" /> 

    </selector>

您可以定义颜色或形状，tab_selected_shape.xml：

    <?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
                android:shape="rectangle">
            <gradient android:startColor="@color/gold1"
                android:centerColor="@color/gold2" 
                android:endColor="@color/gold2"
                android:angle="@integer/vertical_shape" />
    </shape>

3-该线是可绘制的 也。您可以在sdk中找到这些文件，然后使用gimp修改它们以更改颜色后将其复制到您的项目中。您可以将此解决方案与 setColorFilter() 和 android:tint 结合使用，然后您也可以使用十六进制三元组选择背景。读：
进一步说明

android-sdk-linux_x86/platforms/android-7/data/res/drawable

tab_bottom_left.xml,  
tab_bottom_right.xml,  
tab_indicator.xml  (define state changes)

android-sdk-linux_x86/platforms/android-7/data/res/drawable-mdpi

tab_focus.9.png（更改颜色）
tab_focus_bar_left.9.png
tab_focus_bar_right.9.png
tab_press.9.png（更改颜色）
tab_press_bar_left.9.png
tab_press_bar_right.9.png
tab_selected.9.png（更改颜色）
tab_selected_bar_left.9.png tab_selected_bar_right.9.png
tab_unselected.9.png

Answer 3

我在 这个问题？

您可以使用本机 Android 选项卡栏使用的相同内容自定义每个按钮的可绘制内容（在 Android.jar 中查找资源以找到正确的可绘制内容），此外您还可以根据需要自定义其他行为。

最后，从用户的角度来看，您将获得图形上类似于选项卡栏的东西，但从开发人员的角度来看，其行为却有所不同。