带有xml的ActionBar选项卡背景

Question

是否有可能使用xml drawables创建类似Holo的ActionBar选项卡背景 ？如果有，怎么样？如果不是，有什么限制？

浏览Android源代码我发现标签背景是使用tab_indicator_holo.xml中可选择的选择器定义的：

<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_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/tab_selected_holo" />

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

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_holo" />

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

然后为每个州使用9个补丁drawable，例如tab_selected_holo.9.png。

我想知道是否可以用图层列表drawables，shape drawables或组合替换这9个patch drawables，从而节省了创建各种PNG文件的需要（按我的计数每密度6个）。

我注意到ActionBarSherlock也使用了9个补丁绘图，所以很有可能这是唯一的方法。

Answer 1

要完全自定义ActionBar选项卡，请尝试使用名为“Home”的虚构选项卡，如下所示。此布局包含图像和标签。

（1）正常创建标签，但通过ActionBar.Tab.setCustomView（）指定自定义布局

// Home tab
LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
HomeFragment homeFragment = new HomeFragment();
RelativeLayout layoutView = (RelativeLayout)inflater.inflate(R.layout.layout_tab_home, null);
TextView title = (TextView)layoutView.findViewById(R.id.title);
ImageView img = (ImageView)layoutView.findViewById(R.id.icon);
ActionBar.Tab tabHome = mActionBar.newTab();
tabHome.setTabListener(homeFragment);
title.setText(this.getString(R.string.tabTitleHome));
img.setImageResource(R.drawable.tab_home);
tabHome.setCustomView(layoutView);
mActionBar.addTab(tabHome);

（2）为你的标签创建一个布局（layout_tab_home.xml）

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="56dip" android:layout_weight="0" android:layout_marginLeft="0dip" android:layout_marginRight="0dip">
    <ImageView android:id="@+id/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:paddingBottom="2dip" />
    <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/icon" android:paddingLeft="0dip" android:paddingRight="0dip" style="@style/tabText" />
</RelativeLayout>

（3）为你的形象设置一个drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/home_sel" />
    <item android:state_selected="false" android:drawable="@drawable/home_unsel" />
</selector>

在这个例子中，我只有一个PNG图形，其颜色为选定状态与未选择状态

你似乎对BACKGROUND drawable最感兴趣，所以同样适用，但在RelativeLayout上设置一个背景drawable，并使用类似于上面的选择器。

Answer 2

您可以使用插入drawables在底部创建线条。这个xml会创建一个白色矩形，底部有一条蓝线，就像你发布的那条。然后你可以使用状态列表drawables来表示它的状态。

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="0dp"
android:insetLeft="-5dp"
android:insetRight="-5dp"
android:insetTop="-5dp" >

<shape>
    <solid android:color="#FFF" />

    <stroke
        android:width="3dp"
        android:color="#00F" />
</shape>
</inset>

有关详细信息，请查看此帖子：http://blog.stylingandroid.com/archives/1329