平台
Android + AndroidStudio
概述
RelativeLayout是常见的布局容器, 使用起来相当灵活. 在之前的开发过程中, 用过类似RelativeLayout(相对布局)一文中提及的 “梅花” 布局, 屡试不爽, 只是, 在最近的一段测试代码中突然发现, 它不香了, “梅花” 不见了…
正常的 “梅花”
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/center" android:layout_centerInParent="true" android:layout_width="50dp" android:layout_height="50dp"/> <!-- LEFT RED--> <View android:layout_toLeftOf="@id/center" android:layout_centerVertical="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FFFF0000"/> <!-- TOP GREEN--> <View android:layout_above="@id/center" android:layout_centerHorizontal="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF00FF00"/> <!-- RIGHT BLUE--> <View android:layout_toRightOf="@id/center" android:layout_centerVertical="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF0000FF"/> <!-- BOTTOM WHITE--> <View android:layout_below="@id/center" android:layout_centerHorizontal="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FFFFFFFF"/> </RelativeLayout>
问题
失败的梅花
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <View android:id="@+id/center" android:layout_centerInParent="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF000000"/> <!-- LEFT --> <View android:layout_toLeftOf="@id/center" android:layout_centerVertical="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FFFF0000"/> <!-- TOP --> <View android:layout_above="@id/center" android:layout_centerHorizontal="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF00FF00"/> <!-- RIGHT --> <View android:layout_toRightOf="@id/center" android:layout_centerVertical="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF0000FF"/> <!-- BOTTOM --> <View android:layout_below="@id/center" android:layout_centerHorizontal="true" android:layout_width="50dp" android:layout_height="50dp" android:background="#FFFFFFFF"/> </RelativeLayout>
问题的根源就在于:
控件的大小使用了wrap_content导致.
在后续测试代码中, 不管是宽还是高使用wrap_content均会导致对应边的布局效果超出预期, 谨慎谨慎!
