垂直分隔符引起的Android表格布局问题

Question

以下是我的Android App布局，

我试过了表格布局， 如果我不添加垂直分隔符，那就没问题了。 但问题是： 图像不对齐中心，由我的垂直分隔线（线性布局）引起。 这是我的示例代码：

<TableLayout android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:stretchColumns="*"
             android:layout_centerHorizontal="true"
             android:id="@+id/tableexample"

             android:showDividers="middle" android:divider="?android:attr/dividerVertical"
             android:layout_weight="1">
    <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/tableRowContainer1"
            >

        <LinearLayout  android:layout_width="0dp" android:orientation="vertical"
                         android:layout_height="fill_parent"

                         android:layout_weight="1"
                         android:id="@+id/tableRowLayout1"
                         android:layout_centerHorizontal="true"
                         android:paddingTop="@dimen/example_list_padding"
                         >

            <ImageButton android:layout_width="match_parent"
                         android:layout_height="wrap_content"
                         android:id="@+id/exampleImg1"
                         android:background="@android:color/transparent"
                         android:src="@drawable/reconstruct_icon01"/>
            <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
                       android:textColor="@color/example_list_color"
                      android:layout_centerHorizontal="true" android:textSize="@dimen/example_font_size"

                      android:text="Caption1" android:layout_below="@id/exampleImg1"
                    />

        </LinearLayout>


        <LinearLayout  android:layout_width="1dp" android:layout_height="wrap_content"
                       android:orientation="vertical" android:minWidth="1dp"
                       android:gravity="center"
                       android:id="@+id/tableRowDivider1">
            <View
                    style="@style/Divider"
                    />
        </LinearLayout>
        <LinearLayout  android:layout_width="0dp" android:orientation="vertical"
                         android:layout_height="fill_parent"
                         android:gravity="center_horizontal"
                         android:paddingTop="@dimen/example_list_padding"
                        >

            <ImageButton android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         android:id="@+id/exampleImg2"
                         android:background="@android:color/transparent"
                         android:src="@drawable/reconstruct_icon02"/>
            <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
                      android:gravity="center_horizontal|center" android:textColor="@color/example_list_color"
                      android:layout_centerHorizontal="true" android:textSize="@dimen/example_font_size"
                      android:text="Caption2" android:layout_below="@id/exampleImg2"
                    />
        </LinearLayout>
    </TableRow>
     <TableRow>
        <TextView android:background="@color/example_list_divider_color" android:layout_height="1dp"
                  android:layout_span="3"
                />
    </TableRow>
   .....
</TableLayout>

顺便说一句，左上角是以编程方式填充以进行测试。 如果我这样做，图像就在位置上，但这会引起另一个问题：图像会变换。

以下是我真正想要的。

渲染此布局的正确方法是什么？ 非常感谢！

Answer 1

我不确定，但看看我的布局，我希望它会帮助你

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="@android:color/darker_gray"
    android:orientation="vertical"
    tools:context=".MainActivity" >

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

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" >

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />

                    <TextView
                        android:id="@+id/myPRsTextView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="5dp"
                        android:fontFamily="sans-serif-light"
                        android:gravity="center"
                        android:textColor="@android:color/white"
                        android:text="My PRs"
                         />
                </LinearLayout>

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />

                    <TextView
                        android:id="@+id/workoutsTextView"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:fontFamily="sans-serif-light"
                        android:layout_marginTop="5dp"
                        android:textColor="@android:color/white"
                        android:gravity="center"
                        android:text="Workouts"
                        />
                </LinearLayout>
            </TableRow>

            <TableRow
                  android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <View
                    android:id="@+id/divider"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1" >
                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv3"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:textColor="@android:color/white"
                    android:gravity="center"
                    android:text="Timers"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv4"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:gravity="center"
                    android:text="Statistics"
                    android:textColor="@android:color/white"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <View
                    android:id="@+id/divider"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />
            </TableRow>

            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1" >

                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv5"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:gravity="center"
                    android:text="Box Locator"
                    android:textColor="@android:color/white"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="5dp"
                    android:layout_marginRight="5dp"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                 <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical" >

                    <ImageView
                        android:id="@+id/imageView1"
                        android:layout_width="80dp"
                        android:layout_height="80dp"
                        android:src="@drawable/ic_launcher" />
                <TextView
                    android:id="@+id/tv6"
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:fontFamily="sans-serif-light"
                    android:gravity="center"
                    android:text="Something"
                    android:textColor="@android:color/white"
                    android:layout_marginTop="5dp"/>
                </LinearLayout>
            </TableRow>

            <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <View
                    android:id="@+id/divider"
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="0.03"
                    android:background="@android:color/white" />

                <View
                    android:layout_width="fill_parent"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    android:background="@android:color/white" />
            </TableRow>

        </TableLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="This area is decorative image"
                android:textColor="@android:color/white"
                android:textAppearance="?android:attr/textAppearanceLarge" />

        </LinearLayout>

    </LinearLayout>

</FrameLayout>

Answer 2

转到网格视图。它非常简单，您可以实现您想要的效果，并且所有屏幕尺寸都支持它。请参阅：http://developer.android.com/guide/topics/ui/layout/gridview.html