java - Android:使用 TabHost 和 TabWidget 自定义选项卡的外观

Question

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

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

1. 我遇到的第一个问题是测试大部分是在图标上方而不是下方(我使用了开发指南中推荐的尺寸为 48x48 的图标)。我希望 tab 的行为像 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，并使用包含按钮的自定义 LinearLayout 来控制它。这样，您可以更轻松地自定义按钮，使其看起来像您喜欢的那样。您将在每个按钮的 OnClick 中控制 Activity 中的实际 TabWidget。

1. 使用 TabWidget 和 Buttons 创建您的布局:

       <?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. 设置 Activity 的 onCreate 以处理使用按钮调整选项卡 View :

       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 选项卡的外观时，您将不受可用选项的限制，您可以为您的选项卡创建完全自定义的外观。