Android在布局中将文本放在图像上

Question

对不起，如果之前有人问过这个问题，但我是 Android 的新手。我正在尝试在 Android 上实现一个小应用程序，但遇到了布局问题。我必须并排放置 4 个图像，并将文本放在每个图像的白框中间，就像图片中一样

有人可以帮助我如何将这样的图像放在布局上，并且每个图像的文本都像这样。任何建议都非常感谢！！！！ 我尝试了一些代码，但仍然不确定我应该如何处理图像、图像大小？缩放问题？使用 TableLayout？

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:shrinkColumns="*"
        android:stretchColumns="*" >

        <!-- Row 1 with single column -->

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal" >

            <TextView
                android:id="@+id/recipe_description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_span="4"
                android:padding="10dip"
                android:paddingBottom="30dip" />
        </TableRow>

        <!-- Row 2 with 3 columns -->

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/cal"
                android:layout_weight="1"
                android:background="@drawable/fat1"
                android:gravity="center"
                android:padding="20dip"
                android:text="text1"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/fat"
                android:layout_weight="1"
                android:background="@drawable/fat2"
                android:gravity="center"
                android:padding="20dip"
                android:text="text2"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/carbon"
                android:layout_weight="1"
                android:background="@drawable/fat3"
                android:gravity="center"
                android:padding="20dip"
                android:text="text3"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/protein"
                android:layout_weight="1"
                android:background="@drawable/fat4"
                android:gravity="center"
                android:padding="18dip"
                android:text="text4"
                android:textColor="#000000" />
        </TableRow>
    </TableLayout>
</ScrollView>

Answer 1

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#493F0B"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:gravity="center_horizontal"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="10dp"
            android:paddingTop="40dp"
            android:text="text1" />

        <TextView
            android:id="@+id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:paddingLeft="10dp"
            android:paddingBottom="10dp"
            android:paddingRight="10dp"
            android:paddingTop="40dp"
            android:text="text2" />

        <TextView
            android:id="@+id/tv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:gravity="center_horizontal"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="10dp"
            android:paddingTop="40dp"
            android:text="text3" />

        <TextView
            android:id="@+id/tv4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="10dp"
            android:paddingTop="40dp"
            android:text="text4" />
    </LinearLayout>

如果你想让所有的 textview 有相同的宽度，你必须从 java 代码中改变宽度，像这样

DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        int screenWidth = metrics.widthPixels;
int width = (int) (screenWidth / 4);

        tv1.setLayoutParams(new LinearLayout.LayoutParams(width,
                LinearLayout.LayoutParams.MATCH_PARENT));

        tv2.setLayoutParams(new LinearLayout.LayoutParams(width,
                LinearLayout.LayoutParams.MATCH_PARENT));
        tv3.setLayoutParams(new LinearLayout.LayoutParams(width,
                LinearLayout.LayoutParams.MATCH_PARENT));
        tv4.setLayoutParams(new LinearLayout.LayoutParams(width,
                LinearLayout.LayoutParams.MATCH_PARENT));