带有 xml 的 ActionBar 选项卡背景答案

【问题标题】：ActionBar tab background with xml带有 xml 的 ActionBar 选项卡背景
【发布时间】：2012-07-24 02:46:22
【问题描述】：

是否可以使用 xml drawables仅创建类似 Holo 的 ActionBar 选项卡背景？如果是，如何？如果没有，有什么限制？

浏览Android源码发现tab背景是用tab_indicator_holo.xml中的selector drawable定义的：

<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 个补丁可绘制对象，例如 tab_selected_holo.9.png。

我想知道这 9 个补丁可绘制对象是否可以替换为图层列表可绘制对象、形状可绘制对象或组合，从而节省创建各种 PNG 文件的需要（根据我的计算，每个密度 6 个）。

我注意到ActionBarSherlock 也使用了 9 个补丁可绘制对象，因此很可能这是唯一的方法。

【问题讨论】：

我所做的是从 android 平台资源文件夹中复制它们并稍微调整一下
@ferdy182 我也是这样做的，我宁愿避免这样做。我不喜欢在 18 个文件中硬编码选项卡的外观和颜色。
也许这有点帮助，虽然它不能回答你的问题jgilfelt.github.com/android-actionbarstylegenerator
是的，您应该能够使用形状或其他可绘制对象来代替 9-patch
@CSmith 你能举个例子吗？比方说，把 tab_selected_holo 做成一个 9 补丁？

标签： android android-actionbar actionbarsherlock nine-patch

【解决方案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) 为您的图像设置可绘制对象

<?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 图形，其中选定状态与未选定状态的颜色不同

您似乎对背景可绘制对象最感兴趣，因此同样适用，但在您的 RelativeLayout 上设置可绘制背景，并使用与上述类似的选择器。

【讨论】：

我认为问题在于根本不使用 PNG，而是只使用组合的可绘制对象
是的。不是我要的，但无论如何都要尝试 CSmith。

【解决方案2】：

您可以使用 inset 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

【讨论】：