Question

我试图设置这种布局：水平显示3个图像，并在这些图像下显示下一行中的数字。

这是想要的布局： enter image description here 这是我当前的xml布局，它可以很好地显示图像，但数字不在图像下方，我该怎么做？（您可以将其复制到新项目并观察布局）布局： http://pastebin.com/aYb8eeQn

Answer 1

你走了。

我使用了android:weightSum="3"的水平LinearLayout，以及android:layout_weight="1"的每个孩子。另请注意，childred的宽度为android:layout_width="0dip"。

第二张图片比另外两张图片大。

enter image description here

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="100dip"
        android:background="#333"
        android:orientation="horizontal"
        android:weightSum="3" >

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/wonders_of_zen" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_margin="5dip"
            android:layout_weight="1"
            android:background="#fff"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:scaleType="centerInside"
                android:src="@drawable/ic_launcher" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3" />
        </LinearLayout>
    </LinearLayout>

Answer 2

只需在水平LinearLayout内设置均匀分布的LinearLayout s。像这样的东西（不完整，只是一个大纲）：

<LinearLayout
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="0"
        android:layout_weight="1"
        android:orientation="vertical">
        <ImageView /> <!-- first image -->
        <TextView /> <!-- 1 -->
    </LinearLayout>
    <!-- Repeat the above LinearLayout as many times as you like -->
</LinearLayout>

Answer 3

你必须花时间使用一个巨大的RelativeLayout。我将向您展示两张图片，只是继续扩展图案。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >

   <ImageButton
        android:id="@+id/img1"
        android:onClick="myClickHandler"
        android:layout_marginLeft="5dp"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/emptystar" />
   <ImageButton
        android:id="@+id/img2"
        android:onClick="myClickHandler"
        android:layout_marginLeft="5dp"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/emptystar" 
        android:layout_toLeftOf="@+id/img1"
        android:alignParentRight="True"/>
   <TextView
        android:textStyle="bold"
        android:text="1"
        android:layout_toLeftOf="@id/img1"
        android:textSize="48sp"
        android:layout_marginLeft="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img1"
        android:layout_alignRight="@+id/img1"
        android:layout_alignLeft="@+id/img1"
        android:layout_alignParentBottom="true"/>
   <TextView
        android:textStyle="bold"
        android:text="2"
        android:textSize="48sp"
        android:layout_marginLeft="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/img2"
        android:layout_alignRight="@+id/img2"
        android:layout_alignLeft="@+id/img2"
        android:layout_alignParentBottom="true"/>
</RelativeLayout

Answer 4

别担心，请尝试以下

首先根据需要创建内部布局，

<LinearLayout android:layout_width="wc" ...height="wc" orientation="vertical">
//Here place your image view
<ImageButton ..width="48dp" ..height="48dp" />

//Then place your text view
<TextView ..width="match_parent" ..height="wc" ..gravity="center" />
</LinearLayout>

在相对布局中复制此布局并提供适当的位置。否则将重复的布局放在另一个线性布局（默认方向）内，如下所示

<LinearLayout ....>
         <LinearLayout ...... orientation="vertical">
             <ImageButton ...... />
             <TextView ......... />
         </LinearLayout>

         <LinearLayout ...... orientation="vertical">
             <ImageButton ...... />
             <TextView ......... />
         </LinearLayout>

         <LinearLayout ...... orientation="vertical">
             <ImageButton ...... />
             <TextView ......... />
         </LinearLayout>


</LinearLayout>

在android中创建布局

4 个答案: