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

我之前对此进行过一篇文章的讨论,但是我觉得我现在可以(在阅读其他文章之后)更好地解释我想要的内容,然后重新翻译它,以便更好地理解。

我遵循开发指南中关于Tab Layout的教程,我设法创build了Tab,但是我想对它做一些定制(而且我也看过其他post,但是代码有很多错误,或者它没有回答我在找什么)。

  1. 我遇到的第一个问题是testing大部分是在图标上而不是在下面(我使用了开发指南中build议的尺寸为48×48的图标)。 我想要标签与wrap_content一样行事。 我也想改变文字的大小(我认为这就是所谓的标签)。

  2. 我想要使​​用hex三元组来改变标签的背景颜色,以改变它之间的情况:当这个标签是一个select的时候,当它不是。

  3. 我希望能够更改标签下面的行的颜色,我找不到任何有关如何做到这一点的信息。

我正在用来创build一个新标签的代码是(从开发指南):

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

(组是标签名称)。

非常感谢帮助!

Solutions Collecting From Web of "Android:使用TabHost和TabWidget自定义选项卡的外观"

而不是尝试自定义小部件选项卡,这里是一个替代方法,我成功地使用了一个项目,可以节省您的一些头痛:

这个想法是在布局中使用隐藏的TabWidget,并使用包含button的自定义LinearLayout来控制它。 这样,您可以更轻松地自定义button,看看你想要的。 您将在每个button的OnClick中控制实际的TabWidget。

  1. 使用TabWidget和Buttons创build布局:

      <?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来处理使用button来调整选项卡视图:

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

正如你所看到的,我正在使用drawable来打开和closuresbutton的图像。 使用这种技术,您并不仅限于可用的选项,而只是试图自定义TabWidget选项卡的外观,并且可以为选项卡创build完全自定义外观。

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-不可能使用hex三元组来更改选项卡的背景颜色,因为可绘制的颜色不是颜色。 但是,您可以使用更改绘图的select器。 你可以将这个解决scheme与setColorFilter()和android:tint结合起来,然后你可以select使用hex三元组的背景: 如何着色一个位图

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中find这些文件,并在修改它们以使用gimp改变颜色之后将它们复制到你的项目中。 您可以将此解决scheme与setColorFilter()和android:tint结合使用,然后您可以使用hex三元组select背景。 阅读: 进一步的解释

Android的SDK-linux_x86 /平台/机器人-7 /数据/ RES /抽拉

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

Android的SDK-linux_x86 /平台/机器人-7 /数据/ RES /抽拉-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

我在这个问题上提出的解决scheme呢?

你可以自定义每个button的可绘制使用原生的Android标签栏使用相同的(在Android.jar寻找资源find正确的drawables),再加上你可以自定义额外的行为,如你所愿。

最后,从用户的angular度来看,您将获得与tabbargraphics相似的东西,但是从开发人员的angular度来看,其行为是不同的。