我试图设置这种布局:水平显示 3 张图像,下一行显示在这些图像下方的数字。
这是想要的布局: 这是我当前的 xml 布局,可以很好地显示图像,但是图像下方的数字不正确,我该怎么做?(您可以将其复制到新项目并观看布局)布局: http: //pastebin.com/aYb8eeQn
我试图设置这种布局:水平显示 3 张图像,下一行显示在这些图像下方的数字。
这是想要的布局: 这是我当前的 xml 布局,可以很好地显示图像,但是图像下方的数字不正确,我该怎么做?(您可以将其复制到新项目并观看布局)布局: http: //pastebin.com/aYb8eeQn
干得好。
我使用了一个水平 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>
只需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>
你必须花时间使用一个巨大的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
别着急,试试如下
首先根据您的需要创建内部布局,
<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>