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

我之前开了一个关于这个的帖子，但我觉得我现在可以(在阅读了其他一些帖子之后)更好地解释我想要什么，并重新措辞，以便更好地理解。

我在开发指南上遵循了关于标签布局的教程，我设法用它创建了标签，但我想对它做一些自定义(我确实看过其他帖子，但代码有很多错误，或者它没有回答我正在寻找的内容)。

我遇到的第一个问题是，测试大部分是在图标上方，而不是在图标下方(我使用了一个尺寸为48x48的图标，这是开发指南中推荐的)。我希望选项卡的行为与wrap_content一样。我还想改变文本的大小(我想它被称为标签)。
我想使用十六进制三元组来改变选项卡的背景颜色，在两种情况下改变它:当这个选项卡被选中时，当它不是。
我希望能够改变标签下面的行颜色，我找不到关于如何做到这一点的任何信息

我目前用来创建新选项卡的代码是(来自开发指南):

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

(组是标签名)。

非常感谢你的帮助!

与其尝试自定义小部件选项卡本身，我在一个项目中成功地使用了另一种方法，可以为您节省一些麻烦:

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

创建TabWidget和按钮的布局:

    <?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>

设置活动的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选项卡的外观时，您就不局限于可用的选项，您可以为您的选项卡创建一个完全自定义的外观。

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/平台/android-7/数据/res/可拉的

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

android-sdk-linux_x86/平台/android-7/数据/res/drawable-mdpi

tab_focus.9.png (change color)
tab_focus_bar_left.9.png
tab_focus_bar_right.9.png
Tab_press.9.png (change color)
tab_press_bar_left.9.png
tab_press_bar_right.9.png
Tab_selected.9.png (change color)
tab_selected_bar_left.9.png tab_selected_bar_right.9.png
tab_unselected.9.png

我对这个问题的解决方案怎么样?

你可以自定义每个按钮的可绘制性，使用与本机Android Tab栏相同的方法(在Android.jar中查找资源以找到正确的可绘制性)，另外你还可以自定义其他行为。

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

相关内容

最新更新

热门标签：