具有自定义视图的 ActionBar 选项卡未居中

Question

我需要为我的标签使用自定义视图，问题是 fill_parent 不起作用（如 here 所示）。

所以我需要使用边距和其他东西，但是为了使视图在所有配置（横向/纵向，或在选项卡高度会改变的平板电脑上）的选项卡内居中，这有点棘手.

我不知道在每个配置上使用什么值。另外，我没有找到系统开始使用的默认布局。

Answer 1

我建议您使用 ActionBar Tab 样式。这是干净和简单的。例如（在 TabView 上归零）：

<style name="MyActionBar" parent="@style/android:Widget.Holo.ActionBar">
    <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    <item name="android:attr/actionBarTabTextStyle">@style/MyActionBarTabText</item>
    <item name="android:attr/actionBarTabStyle">@style/MyActionBarTabStyle</item>
</style>

<!-- styling for the tabs -->
<style name="MyActionBarTabStyle" parent="@style/android:Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/tab_bar_bg_master</item>
    <item name="android:gravity">center</item>
</style>

（我还要注意，通过使用自定义 Drawable，这些选项卡具有高度的样式。但这是另一天的话题！）

Answer 2

@Stephane-Mathis 的上述回复是正确的，但我无法让它在我的代码中正常工作。这是一个使用相同概念的更简单的版本。

同样，这个想法是强制您的视图比标签本身高得多。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="3dp"
    android:paddingBottom="3dp">
    <View
        android:id="@+id/spacer_1"
        android:layout_width="0dp"
        android:layout_height="1000dp"
        android:layout_weight="1" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_tabicon_1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_gravity="center_vertical"
        android:textColor="?accentColor"
        android:text="My Albums" />
    <View
        android:id="@+id/spacer_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

spacer_1 和 spacer_2 视图的存在是为了在左右两侧均匀填充 ImageView 和 TextView .此外，spacer_1 上的高度设置为高得离谱的值 (1000dp)，因此迫使父视图过高。然后 ImageView 和 TextView 都重新设置为 center_vertical。

Answer 3

所以，如果你想这样做，你需要做一些肮脏的事情。 由于 fill_parent 不起作用，您需要强制根视图的高度高于选项卡高度，然后将您真正需要的居中。所以我的第一个 LinearLayout 没用，第二个会在 tab 的中心。

这是我使用的。我只想要一个文本视图，右上方有另一个文本视图。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:visibility="invisible">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_tab_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_tab_title"
        android:layout_gravity="right"
        android:background="@drawable/bg_notification"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        android:text="1"
        android:gravity="center"
        android:minWidth="14dp"
        android:textStyle="bold"
        android:textColor="@color/blanc"
        android:textSize="8dp" />
    <TextView
        android:id="@+id/tv_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/noire"
        android:textSize="12dp"
        android:textStyle="bold" />
    <TextView //this has the same height as the `tv_tab_count` so it remains centered vertically
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_tab_title"
        android:layout_gravity="right"
        android:background="#0f0"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        android:text="1"
        android:textSize="8dp"
        android:visibility="invisible" />
</LinearLayout>

这适用于垂直对齐，但视图只有我放入文本视图的内容的宽度。所以如果你需要使用完整的宽度，你应该在其中一个不可见的文本视图中放一个非常长的单词。