选项卡小部件自定义选项卡 - 不需要的额外边距和文本对齐问题

Question

我正在使用 TabWidget 来获得选项卡式导航。每个选项卡图块下方都有图标和文本。作为我标签的内容，我目前有卡片视图列表。 所以，标签按钮布局：

<LinearLayout android:id="@+id/tabsLayout"
              xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"

              android:gravity="center"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:layout_gravity="bottom|center"/>

    <TextView android:id="@+id/title"
              style="@android:style/TextAppearance.Holo.Medium"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentBottom="true"
              android:layout_centerHorizontal="true"
              android:textColor="#000000"
              android:text="test"
              android:visibility="visible"
              android:focusableInTouchMode="false"
              android:layout_gravity="center"
              android:textIsSelectable="true" android:textSize="13sp"
              android:textAlignment="center"
              android:gravity="center_horizontal"/>
</LinearLayout>

我使用标签小部件的活动：

<?xml version="1.0" encoding="utf-8"?>
<TabHost
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" android:background="#84dadada"/>

    </LinearLayout>
</TabHost>

FrameLayout 用于在用户切换选项卡时将选项卡内容替换为片段。它有效，但也存在一些问题。这是它的样子：

如您所见 - 第一个问题是图标对齐。如果文本被包裹为多行（大字体和小屏幕），则图标与具有一个行标签的其余图标不对齐。如何让所有图标正确对齐？ 第二 - 我的选项卡控件上方有额外的白色空间 - 为什么？如何禁用它？

有什么想法吗？

[编辑] 我的 CardView 定义如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="horizontal"
              android:padding="3dp"
    >

    <android.support.v7.widget.CardView android:id="@+id/card_view"
                                        xmlns:card_view="http://schemas.android.com/apk/res-auto"
                                        android:layout_width="match_parent"
                                        android:layout_height="100dp"
                                        android:layout_gravity="center_vertical"
                                        android:background="?android:attr/selectableItemBackground"

                                        card_view:cardCornerRadius="0dp"
                                        card_view:cardElevation="dp" android:clickable="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/card_image"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="2"
                android:padding="6dp"
                android:src="@drawable/ic_launcher"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="5"
                android:orientation="vertical"
                android:padding="4dp">

                <TextView
                    android:id="@+id/card_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="2dp"
                    android:text="Large Text"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    android:textStyle="bold"/>

                <TextView
                    android:id="@+id/card_info"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="2dp"
                    android:text="Small Text"
                    android:textAppearance="?android:attr/textAppearanceSmall"/>

            </LinearLayout>

            <ImageView
                android:id="@+id/arrow"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:padding="6dp"
                android:src="@drawable/arrow"/>

        </LinearLayout>


    </android.support.v7.widget.CardView>



</LinearLayout>

因此，cardview 周围似乎有额外的边距 - 顶部、底部、左侧和右侧。如何禁用它？

Answer 1

空间问题看here，可能是重复的答案。

对于图标对齐，请查看here，它显示了如何将文本保持在单行上，并在您的设备没有空间完全显示时使用省略号将其截断。这可能不是您的完美解决方案，但它是一个很好的提示。