百分比布局

短命女 2022-07-13 01:16 265阅读 0赞

在学习“第二行代码”3.3.4百分比布局时，我照着文章所述，将代码都写了一遍，发现居然引用“compile ‘com.android.support:percent:24.2.1’”，我就奇怪了！!

![这里写图片描述][SouthEast]  
真是出师不利啊！！  
后来所幸看了源码后，才知道这个是因为我自己的原因，后来改过后，才能顺利进入下一步！

修改后，如图：

![这里写图片描述][SouthEast 1]

或者是这样：

![这里写图片描述][SouthEast 2]

然后看布局文件：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_percent_layout" android:layout_width="match_parent" android:layout_height="match_parent" >
    
        <TextView android:id="@+id/tv_test1" android:text="认" android:background="@android:color/holo_blue_light" android:layout_gravity="top|left" android:gravity="center" app:layout_widthPercent="30%" app:layout_heightPercent="30%"/>
        <TextView android:id="@+id/tv_test2" android:text="努" android:background="@android:color/holo_orange_light" android:layout_gravity="top|right" android:gravity="center" app:layout_widthPercent="70%" app:layout_heightPercent="70%"/>
    
        <TextView android:id="@+id/tv_test3" android:text="真" android:background="@android:color/holo_green_light" android:layout_gravity="bottom|left" android:gravity="center" app:layout_widthPercent="50%" app:layout_heightPercent="70%"/>
        <TextView android:id="@+id/tv_test4" android:text="力" android:background="@android:color/holo_red_light" android:layout_gravity="bottom|right" android:gravity="center" app:layout_widthPercent="70%" app:layout_heightPercent="50%"/>
    
    </android.support.percent.PercentFrameLayout>

百分比布局支持PerecentRelativeLayout和PercentFrameLayout，可以理解为只是在宽高上面使用百分比来代替了具体的值和“wrap\_content”,然后和RelativeLayout（FrameLayout）属性完全相同。但是百分比是需要自定义命名空间，如代码部分。

预览效果：

![这里写图片描述][SouthEast 3]

最后的效果图：

![这里写图片描述][SouthEast 4]

就这么简单！  
郭神说的是，该布局兼容Android所有系统版本！！！赶紧试一试，看看还没有坑？

[SouthEast]: /images/20220713/05a3527f7b38488d8ebec7d40ea9398d.png
[SouthEast 1]: /images/20220713/a75f251b6afa4030b9fbdd7c3228480f.png
[SouthEast 2]: /images/20220713/caa49b29b2544ad8a8dc8644f8e36b74.png
[SouthEast 3]: /images/20220713/5f7a78bea7c04d428bbfabd04f185ec1.png
[SouthEast 4]: /images/20220713/6f96920dfc7746bc8ce7996750bd4fc1.png