首页顶部横幅增高与青色描边方案及实施记录
需求
保留首页现有蓝色背景图、DNA 图案、标题文字和整体布局风格,
通过适度增加横幅高度并增加克制的青色描边,让“膳食营养e键通”横幅更明显但不突兀。
设计方案
- 横幅宽度、水平位置、背景图片和内部文字样式保持不变。
- 横幅高度比例由
0.200 调整为 0.220,约增加 10%。
- 不采用
0.230 的 15% 增幅,减少 980 × 398 背景图的纵向拉伸。
- 使用独立前景 drawable 绘制描边,不修改原始 PNG。
- 描边颜色为
#CC36D9FF,约 80% 不透明度。
- 描边宽度使用
adaptive_size_2,圆角使用 adaptive_size_18。
双屏适配
横幅高度使用 ConstraintLayout 百分比控制;描边宽度和圆角复用项目已有自适应尺寸。
| 项目 | YF_029E(160dpi) | K203(240dpi) | 最终像素 |
| 横幅高度比例 | 0.220 | 0.220 | 各自屏幕高度的 22% |
| 描边宽度 | 2dp | 1.33dp | 约 2px |
| 圆角半径 | 18dp | 12dp | 约 18px |
实施内容
- 将 headerContainer 的高度比例从 0.200 调整为 0.220。
- 新增透明底、圆角和青色描边组成的 home_header_border.xml。
- 新增 home_header_border 颜色资源。
- 通过 android:foreground 覆盖描边,不改变横幅背景和内部内容。
文件范围
- app/src/main/res/layout/activity_main.xml
- app/src/main/res/drawable/home_header_border.xml
- app/src/main/res/values/colors.xml
验证记录
- 本次涉及的布局、drawable 和颜色 XML 通过 xmllint 检查。
- JDK 8 执行
sh ./gradlew :app:processDebugResources assembleDebug --console=plain。
- 结果为
BUILD SUCCESSFUL in 18s,100 个任务中 22 个执行、78 个复用。
- 资源合并、资源处理和 Debug APK 打包均成功完成。
边界与验收
- 未修改原始横幅 PNG、标题文案、文字字号、DNA 图案和横幅宽度。
- 未修改首页四个功能卡片及其当前未提交的图标底板调整。
- 未安装 APK;建议分别在 YF_029E 和 K203 真机首页截图验收。
- 未执行 Git 暂存、提交、推送或分支操作。