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

时间:2015-09-10 06:51:04

标签: java android android-layout android-tabhost

我使用TabWidget获取标签式导航。每个标签区块下方都有图标和文本。作为我的标签的内容我目前有cardview列表。 因此,标签按钮布局:

<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用于在用户在选项卡之间切换时用片段替换选项卡内容。它有效,但有一些问题。这是它的样子: Result

如您所见 - 第一个问题是图标对齐。如果文本被包装为多行(大字体和小屏幕),则图标不会与具有一个行标签的其他图标对齐。如何正确对齐所有图标? 第二 - 我的标签控件上面有白色的额外空间 - 为什么?如何禁用它?

有什么想法吗?

[编辑] 我的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周围还有额外的余量 - 顶部,底部,左侧和右侧。如何禁用它?

1 个答案:

答案 0 :(得分:0)

对于空间问题看看here,它可能是一个重复的答案。

对于图标对齐,请查看here,它会显示如何将文字保留在单行上,并使用省略号截断它,如果您的设备没有足够的空间来显示它。它可能不是您完美的解决方案,但它是一个很好的暗示。