设计：android TableLayout答案

【问题标题】：Design: android TableLayout设计：android TableLayout
【发布时间】：2020-07-09 18:12:35
【问题描述】：

这是我的第一个 android 应用程序，我面临很多问题。我想做这样的设计：

我尝试了很多解决方案，但没有任何效果。这是我的代码：

<TableLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            >
<View
            android:layout_height="2dip"
            android:background="@color/dark_blue"/>
        <!--Product information-->
        <TableRow android:id="@+id/product_info">
            <ImageView android:id="@+id/product_img"
                       android:src="@drawable/mdpi_product_verify_scan_code"
                       android:layout_width="fill_parent"
                       android:layout_height="fill_parent"
                       android:layout_weight="1"
                    />
            <TextView android:id="@+id/tvdesc"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      android:layout_weight="2"
                      android:text="description description description "
                      android:textColor="@color/black"
                    />
        </TableRow>

<View
            android:layout_height="2dip"
            android:background="@color/dark_blue"/>

        <!--Images button-->
        <TableRow
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                >
            <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Product Description"
                    android:textColor="@color/black"
                    android:textAppearance="?android:textAppearanceMedium"
                    />
            <FrameLayout
                    android:background="@color/dark_blue"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="top|left"
                    android:padding="5dp">
            <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/mdpi_btn_show_images_icon"
                    android:background="@android:color/transparent"
                    />
                <TextView
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                    android:text="Images"/>
            </FrameLayout>
        </TableRow>

        <TableRow android:id="@+id/product_info">
            <ImageView android:id="@+id/ima"
                       android:src="@drawable/mdpi_product_verify_scan_code"
                       android:layout_width="fill_parent"
                       android:layout_height="fill_parent"
                       android:layout_weight="1"
                    />
            <TextView android:id="@+id/tv2"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      android:layout_weight="2"
                      android:text="description description description "
                      android:textColor="@color/black"
                    />
        </TableRow>

        <!--Verification -->
        <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                android:text="product verification"
                android:textAppearance="?android:textAppearanceMedium"
                android:textColor="@color/green"/>
        </TableRow>
        <TableRow
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This product can be verified. Tap on the VERIFY PRODUCT button above."
                    android:textColor="@color/green"/>
        </TableRow>
        
    </TableLayout>

这就是结果

如你所见，所有元素都搞砸了当我设置重力时，图像按钮也会消失

这张图片显示了哪些问题：

如何将每个文本放在一行中。
将图像设置在左侧（重力左侧不起作用）
如何画垂直线？
如何将图像与文本放在一起？（我使用的是跨度，但它只适用于一行，我有两个文本行，是否有合并两个垂直单元格）。
图片按钮消失。

感谢您的帮助。

【问题讨论】：

您尝试替换 TableLayout 了吗？也许是RelativeLayout 和LinearLayouts/something 的某种组合？
@Keyser 实际上没有，我仍然不知道所有的 android 设计技术。我看到了一些使用 tablelayout 的教程，这就是我使用它的原因。
然后和其他人一起做实验。 Android Dev 网站上有很多示例和文档
@Keyser 我会的，谢谢你的帮助 :)

标签： android android-tablelayout

【解决方案1】：

我想这应该可以帮助您了解它的工作原理。我设法做一些看起来像你可能需要的事情

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Tap to Verify Product" />

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

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

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="16dp"
            android:src="@drawable/ic_launcher" />

        <View
            android:id="@+id/view1"
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="22dp"
            android:layout_toRightOf="@+id/imageView1"
            android:background="@android:color/darker_gray" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView1"
            android:layout_alignLeft="@+id/textView2"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/textView3"
            android:layout_alignLeft="@+id/textView1"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/textView2"
            android:layout_marginLeft="21dp"
            android:layout_toRightOf="@+id/view1"
            android:text="TextView" />
    </RelativeLayout>

    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp" />

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="46dp" >

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="22dp"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="20dp"
            android:src="@drawable/ic_launcher" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="TextView" />

</LinearLayout>

在您的 IDE 中尝试一下，如果您需要进一步的帮助，我会看看我能做些什么。

【讨论】：

谢谢，图片还是有问题，不显示，有一个文字正确显示，就像这张图片显示i.imgur.com/DvCK7m0.png?1
好吧，对于图像，您显然应该更改资源文件/路径。对于文本，可能是一些相关的布局属性需要改变。
更改图像路径是我做的第一件事，对于文本我尝试更改一些属性但它不起作用。无论如何我会再试一次。
我对你写的代码没有太大的改变，我现在正在写，如果我做不好我会问你怎么做，谢谢你帮助。如果您不介意从代码中填充数据的任何教程或示例，我想问您一些蹩脚的问题。我上面设计中的一些图片和文字，将从代码中填充，如果您给我一个链接或其他东西，将不胜感激。
sree.cc/google/android/… ，很简单，但你真的应该阅读developer.android.com 文档