Android:Vertical LinearLayout - 两个图像视图,我希望底部一个缩放为顶部的宽度

时间:2011-02-07 16:48:37

标签: android layout android-layout android-linearlayout

我正在尝试使用垂直LinearLayout来显示带有第二个图像视图的图像视图。我希望较低的imageview是顶部图像视图的宽度。

我正在尝试当前的布局xml:

            <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center">   

                <ImageView
                android:id="@+id/image_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerInside"
                android:adjustViewBounds="true"
                android:layout_weight="1"
                />

                <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"> 
                    <ImageView
                    android:id="@+id/spacer"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/spacer"
                    />
                </LinearLayout>

            </LinearLayout>

图像将以“spacer”显示,该“spacer”是屏幕的整个宽度,而不是图像的宽度。间隔物是一个渐变边缘图形,我希望它与上面的图像宽度相同。

注意:顶部imageview的图像是以编程方式设置的,可以是横向或纵向图像。

有人想过如何实现这个目标吗?

提前致谢!

3 个答案:

答案 0 :(得分:2)

RelativeLayout会这样做。使用layout_below来实现垂直排序,使用layout_widht="match_parent"使layout_alignLeftlayout_alignRight约束条件下的底部图片视图尽可能宽:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"/>

    <ImageView
        android:id="@+id/spacer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image_view"
        android:layout_alignLeft="@id/image_view"
        android:layout_alignRight="@id/image_view"
        android:background="@drawable/spacer" />

</RelativeLayout>

示例输出:

sample output

使用略微改变的布局用于演示目的,由于缺少contentDescription s引起的警告:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" >

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:background="#f00"/>

    <ImageView
        android:id="@+id/spacer"
        android:layout_width="fill_parent"
        android:layout_height="10dp"
        android:layout_below="@id/image_view"
        android:layout_alignLeft="@id/image_view"
        android:layout_alignRight="@id/image_view"
        android:background="#0f0" />

</RelativeLayout>

(是的,我知道。老问题,但没有好的答案,并被社区搞砸了。)

答案 1 :(得分:0)

嘿r3mo使用以下代码,你可以得到你想要实现的目标

<RelativeLayout android:layout_height = "fill_parent" android:layout_width = "fill_parent">
    <ImageView android:layout_width = "wrap_content"
        android:layout_height = "wrap_content" android:id = "@+id/ImageView1"
        android:src = "@drawable/spacer"/>
    <ImageView android:layout_width = "wrap_content"
        android:layout_height = "wrap_content" android:id = "@+id/ImageView2"
        android:src = "@drawable/spacer"
        android:layout_below = "@+id/ImageView1"/>
</RelativeLayout>

答案 2 :(得分:0)

使用表格布局而不是相对和LinearLayout为实现此目的,表格布局自动为所有行提供相同的列。