如何防止android中的imageview重叠

时间:2014-09-18 05:29:32

标签: android xml imageview relativelayout

我想把多个imageview连成这样的

http://imgur.com/wYpAgxE

但是有一些错误,图像视图重叠在一起,我想把它们并排放在一起

http://imgur.com/WUHbzCd

以下是我的XML文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@drawable/background"
    android:clipChildren="false"
    android:clipToPadding="false"
    tools:context=".MainActivity" > 

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="182dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/music_720p" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView1"
        android:layout_toEndOf="@+id/imageView1"
        android:layout_marginTop="182dp"
        android:layout_marginRight="70dp"
        android:layout_marginEnd="70dp"
        android:scaleType="centerCrop"
        android:src="@drawable/video_720p" />
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView2"
        android:layout_toEndOf="@+id/imageView2"
        android:layout_marginTop="182dp"
        android:layout_marginRight="70dp"
        android:layout_marginEnd="70dp"
        android:scaleType="centerCrop"
        android:src="@drawable/photo_720p" />
    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView3"
        android:layout_toEndOf="@+id/imageView3"
        android:layout_marginTop="182dp"
        android:layout_marginRight="10dp"
        android:layout_marginEnd="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/web_720p" />
    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView4"
        android:layout_toEndOf="@+id/imageView4"
        android:layout_marginTop="182dp"
        android:layout_marginRight="10dp"
        android:layout_marginEnd="10dp"
        android:scaleType="centerCrop"
        android:src="@drawable/setting_720p" /> 

</RelativeLayout>

感谢任何帮助。

3 个答案:

答案 0 :(得分:0)

我建议您选择HorizontalScrollView,根据需要提供功能。

结帐链接向您展示如何实施HorizontolScrollView

我希望这会对你有所帮助。

您还可以查看已完全显示实施的vijju的答案HERE

答案 1 :(得分:0)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:clipChildren="false"
    android:clipToPadding="false"
    tools:context=".MainActivity" > 

  <HorizontalScrollView
      android:id="@+id/horizontalScrollView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="false"
      android:scrollbars="none" >

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <ImageView
                        android:id="@+id/setupImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|left"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="20dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/uploadImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/visulizationImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|right"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/setupImageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|left"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="20dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/uploadImageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|center"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:id="@+id/visulizationImageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom|right"
                        android:layout_marginBottom="10dp"
                        android:layout_marginLeft="30dp"
                        android:src="@drawable/ic_launcher" />
                </LinearLayout>

            </HorizontalScrollView>

</RelativeLayout>

请试试这个。我希望能帮到你。

答案 2 :(得分:0)

我可以看到你在任何地方都使用过 wrap_content ,所以你可以减少图像的宽度和高度,也可以在布局文件或.java文件中明确定义它。

对于使用 GridLayout 的情况,比使用 RelativeLayout 更好的选择。。它... 以下是GridLayout的一个很好的示例: - http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources