【Android基础】利用布局来拼图

这次我们来讲一个拼图的例子，主要讲解下相对布局。

使用布局将下面的碎片排列成一张完整的图片：

完成效果图：

布局文件代码如下：

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="cn.yzx.layout.MainActivity" >

    <ImageView
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/center" />

    <ImageView
        android:id="@+id/buttom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_centerHorizontal="true"
        android:src="@drawable/buttom" />

    <ImageView
        android:id="@+id/top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_centerHorizontal="true"
        android:src="@drawable/top" />

    <ImageView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/center"
        android:layout_centerVertical="true"
        android:src="@drawable/left" />

    <ImageView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/center"
        android:layout_centerVertical="true"
        android:src="@drawable/right" />

    <ImageView
        android:id="@+id/lefttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/left"
        android:layout_alignLeft="@id/left"
        android:layout_alignRight="@id/left"
        android:src="@drawable/lefttop" />

    <ImageView
        android:id="@+id/righttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/right"
        android:layout_alignLeft="@id/right"
        android:layout_alignRight="@id/right"
        android:src="@drawable/righttop" />

    <ImageView
        android:id="@+id/leftbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/left"
        android:layout_alignLeft="@id/left"
        android:layout_alignRight="@id/left"
        android:src="@drawable/leftbutton" />

    <ImageView
        android:id="@+id/rightbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/right"
        android:layout_alignLeft="@id/right"
        android:layout_alignRight="@id/right"
        android:src="@drawable/rightbutton" />

</RelativeLayout>

不知道是图片裁剪的不平整还是我布局不好，最后显示的结果长短不一，希望各位给我指出来错误。