Android：使用TabHost和TabWidget自定义选项卡的外观

Question

我以前打开过与此相关的文章，但我认为我现在（在阅读了其他文章之后）可以更好地解释我想要的内容并重新措辞，以便更好地理解。

我遵循了开发指南上有关Tab Layout的教程，并设法用它创建了Tabs，但是我想对其进行一些自定义（我确实看过其他文章，但是代码中有很多错误，或者代码没有不回答我在寻找什么）。

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

（组是选项卡名称）。

非常感谢您的帮助！

Answer 1

这是我在项目中成功使用的另一种方法，而不是尝试自己自定义窗口小部件选项卡，这可以省去您一些麻烦：

想法是在布局中使用隐藏的TabWidget，并使用包含Buttons的自定义LinearLayout对其进行控制。 通过这种方式，您可以更轻松地自定义按钮，以根据需要进行外观。 您将在每个按钮的OnClick中的“活动”中控制实际的TabWidget。

1. 使用TabWidget和Button创建布局：

     <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RelativeLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="bottom"> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:visibility="gone" /> <LinearLayout android:id="@+id/tabbar" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button 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"></Button> <Button 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"></Button> <Button 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"></Button> <Button 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"></Button> </LinearLayout> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@+id/tabbar" /> </RelativeLayout> </TabHost> 

2. 设置活动的onCreate，以使用用于调整选项卡视图的按钮进行处理：

     public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // tabs firstButton = (Button) findViewById(R.id.firstButton); secondButton = (Button) findViewById(R.id.secondButton); thirdButton = (Button) findViewById(R.id.thirdButton); forthButton = (Button) findViewById(R.id.forthButton); Resources res = getResources(); // Resource object to get Drawables final TabHost tabHost = getTabHost(); // The activity TabHost TabHost.TabSpec spec; // Resusable TabSpec for each tab Intent intent; // Reusable Intent for each tab intent = new Intent().setClass(this, FirstGroupActivity.class); spec = tabHost.newTabSpec("first").setIndicator("First").setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, SecondGroupActivity.class); spec = tabHost.newTabSpec("second").setIndicator("Second").setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, ThirdGroupActivity.class); spec = tabHost.newTabSpec("third").setIndicator("Third").setContent(intent); tabHost.addTab(spec); intent = new Intent().setClass(this, ForthActivity.class); spec = tabHost.newTabSpec("forth").setIndicator("Forth").setContent(intent); tabHost.addTab(spec); tabHost.setCurrentTab(0); firstButton.setOnClickListener(new OnClickListener() { public void onClick(View 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() { public void onClick(View 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() { public void onClick(View 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() { public void onClick(View 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 Tab栏（在Android.jar中查找资源以找到正确的可绘制对象）所使用的按钮来自定义每个按钮的可绘制对象，此外，还可以根据需要自定义其他行为。

最后，从用户角度，您将获得图形上类似于标签栏的内容，但从开发人员角度来看，其行为将有所不同。