0

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

这是想要的布局： 在此处输入图像描述 这是我当前的 xml 布局，可以很好地显示图像，但是图像下方的数字不正确，我该怎么做？（您可以将其复制到新项目并观看布局）布局： http: //pastebin.com/aYb8eeQn

4

4 回答 4

6

干得好。

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

第二张图片比其他两张大得多。

在此处输入图像描述

<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>
于 2012-12-05T19:05:57.300 回答
1

只需LinearLayout在水平LinearLayout. 像这样的东西（不完整，只是一个大纲）：

<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>
于 2012-12-05T18:59:41.750 回答
0

你必须花时间使用一个巨大的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
于 2012-12-05T18:51:34.247 回答
0

别着急，试试如下

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

<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>
于 2012-12-05T19:07:07.247 回答