Android Percent Support Lib 示例项目教程
项目地址: https://gitcode.com/gh_mirrors/an/android-percent-support-lib-sample 还在为Android布局适配不同屏幕尺寸而烦恼吗？百分比布局库（Percent Support Library）为你提供了革命性的解决方案！本文将深入解析Android百分比布局库的完整使用指南，通过实际示例项目带你掌握这一强大的布局工具。
📋 读完本文你将获得
- 百分比布局库的核心概念和工作原理
- 三种百分比布局容器的完整使用指南
- 10+个实用布局示例代码
- 百分比属性的详细说明和使用技巧
- 自定义百分比布局的实现方法
- 从简单到复杂的完整项目实践
🚨 重要提示：已弃用声明
注意： 百分比支持库已在支持库v26版本中标记为弃用，官方推荐使用ConstraintLayout替代。但了解百分比布局的原理和使用方法仍然对理解Android布局系统有重要价值。
🔧 环境配置
首先在项目的build.gradle文件中添加依赖：
dependencies {
implementation 'com.android.support:percent:25.3.0'
}
📊 支持的布局类型
百分比支持库提供了三种主要的布局容器：
| 布局类型 | 类名 | 特点 | 适用场景 |
|---|---|---|---|
| PercentRelativeLayout | android.support.percent.PercentRelativeLayout | 基于RelativeLayout，支持相对定位 | 复杂布局，需要相对定位的场景 |
| PercentFrameLayout | android.support.percent.PercentFrameLayout | 基于FrameLayout，支持层叠 | 简单层叠布局，覆盖效果 |
| PercentLinearLayout | android.support.percent.PercentLinearLayout | 基于LinearLayout，线性排列 | 列表式布局，线性排列需求 |
🎯 核心百分比属性
百分比布局库提供了丰富的百分比属性来控制视图的尺寸和边距：
🏗️ 基础示例：简单百分比布局
示例1：三区域分割布局
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 顶部左侧区域：70%宽度，20%高度 -->
<View
android:id="@+id/top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#ff44aacc"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%" />
<!-- 顶部右侧区域：30%宽度，20%高度 -->
<View
android:id="@+id/top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="20%"
app:layout_widthPercent="30%" />
<!-- 底部区域：100%宽度，80%高度 -->
<View
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@+id/top_left"
android:background="#ff00ff22"
app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>
示例2：等分垂直布局
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 三等分垂直布局 -->
<View
android:id="@+id/top_left"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#ff44aacc"
app:layout_heightPercent="33%" />
<View
android:id="@+id/top_right"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="33%" />
<View
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@+id/top_right"
android:background="#ff00ff22"
app:layout_heightPercent="34%"
app:layout_marginLeftPercent="50%" />
</android.support.percent.PercentRelativeLayout>
🎨 进阶示例：复杂网格布局
示例3：复杂网格系统
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true">
<!-- 第一行：三个水平排列的项目 -->
<View
android:id="@+id/row_one_item_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#5182bb"
app:layout_heightPercent="15%"
app:layout_widthPercent="30%" />
<View
android:id="@+id/row_one_item_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="@+id/row_one_item_one"
android:background="#396190"
app:layout_heightPercent="15%"
app:layout_widthPercent="30%" />
<View
android:id="@+id/row_one_item_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="@+id/row_one_item_two"
android:background="#8fb5e1"
app:layout_heightPercent="15%"
app:layout_widthPercent="40%" />
<!-- 更多行和列的布局... -->
</android.support.percent.PercentRelativeLayout>
📏 PercentLinearLayout 使用示例
示例4：垂直线性百分比布局
<com.juliengenoud.percentsamples.PercentLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 渐增宽度的文本视图 -->
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff44aacc"
android:text="width:60%,height:5%"
android:textColor="#ffffff"
app:layout_heightPercent="5%"
app:layout_marginBottomPercent="5%"
app:layout_widthPercent="60%"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff4400cc"
android:gravity="center"
android:textColor="#ffffff"
android:text="width:70%,height:10%"
app:layout_heightPercent="10%"
app:layout_marginBottomPercent="5%"
app:layout_widthPercent="70%"/>
<!-- 更多文本视图... -->
</com.juliengenoud.percentsamples.PercentLinearLayout>
🔧 自定义百分比布局实现
如果需要自定义百分比布局，可以参考以下实现：
public class PercentLinearLayout extends LinearLayout {
private PercentLayoutHelper mPercentLayoutHelper;
public PercentLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mPercentLayoutHelper = new PercentLayoutHelper(this);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
mPercentLayoutHelper.adjustChildren(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mPercentLayoutHelper.handleMeasuredStateTooSmall()) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
mPercentLayoutHelper.restoreOriginalParams();
}
// 自定义LayoutParams实现百分比支持
public static class LayoutParams extends LinearLayout.LayoutParams
implements PercentLayoutHelper.PercentLayoutParams {
private PercentLayoutHelper.PercentLayoutInfo mPercentLayoutInfo;
public LayoutParams(Context c, AttributeSet attrs) {
super(c, attrs);
mPercentLayoutInfo = PercentLayoutHelper.getPercentLayoutInfo(c, attrs);
}
@Override
public PercentLayoutHelper.PercentLayoutInfo getPercentLayoutInfo() {
return mPercentLayoutInfo;
}
}
}
📊 百分比布局最佳实践
布局设计原则
常见问题解决方案
| 问题现象 | 原因分析 | 解决方案 |
|---|---|---|
| 布局显示异常 | 百分比值总和超过100% | 确保所有百分比值的总和合理 |
| 视图重叠 | 相对定位关系错误 | 检查layout_toRightOf等属性 |
| 边距异常 | 百分比边距设置不当 | 调整marginPercent相关属性 |
🎯 迁移到ConstraintLayout
虽然百分比布局库已弃用，但其设计理念在ConstraintLayout中得到了更好的实现：
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintWidth_percent="0.7"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
📝 总结
通过本文的详细讲解和丰富示例，你应该已经掌握了：
- 百分比布局库的核心概念：理解百分比布局的工作原理和优势
- 三种布局容器的使用：PercentRelativeLayout、PercentFrameLayout、PercentLinearLayout
- 完整的属性体系：尺寸百分比、边距百分比等所有可用属性
- 实际项目应用：从简单到复杂的布局示例
- 自定义扩展：如何实现自定义的百分比布局容器
- 迁移指南：如何从百分比布局迁移到ConstraintLayout
虽然百分比支持库已被官方弃用，但学习其设计思想和实现方式对于深入理解Android布局系统仍然具有重要意义。希望本文能为你的Android开发之路提供有价值的参考！
下一步建议：尝试将示例项目中的布局迁移到ConstraintLayout，体验更现代化的布局解决方案。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
