昨天刚折腾完一个记账APP的界面，从新建项目到跑通预览花了整下午。新手搞这个真得一步一步踩坑，我把摸索出来的门道捋捋。

第一步 先给界面搭骨架

打开Android Studio新建项目，选那个空模板。完事自动生成个MainActivity，重点在res文件夹里有个layout目录，里面的activity_*就是主战场。双击打开发现是个大白板，这时候别慌。

• 1. 左边控件栏直接拽个LinearLayout（竖直排列）到画板上
• 2. 再往LinearLayout里塞三个按钮，按钮间距在属性面板调个20dp
• 3. 顶部硬加了个TextView当标题，字体大小调到18sp

结果预览出来按钮挤成一坨，标题快贴到状态栏了——得，忘记设外边距！

第二步 控件排版讲究多

解决挤压问题全靠两个参数：margin和padding。给最外层的LinearLayout加个android:padding="16dp"，瞬间四周留出呼吸空间。按钮之间想拉开距离？每个按钮单独设android:layout_marginTop="10dp"，总算不像狗啃的。

• · 用ConstraintLayout能精准定位，但新手先用LinearLayout更直观
• · 尺寸单位要用dp和sp，别用px！不同屏幕会乱套

第三步 给按钮加点花样

默认按钮灰不溜秋太丑。在drawable文件夹右击新建Drawable Resource File，文件名写btn_*。里面贴这段代码：

<>

回到布局文件，给按钮加上background="@drawable/btn_style"，圆角橙色按钮立马生效！顺手把文字颜色改成白色，否则黑字配深底根本看不清。

第四步 对付颜色灾难

改着改着发现标题紫、按钮橙、背景白——丑得眼瞎！赶紧在res/values/*统一配色：

#6750A4
#FF6200EE

原来乱写的色值全换成@color/brand_purple，立马顺眼多了。这里建议起步定好三四个主色，到处复用才不乱。

第五步 边改边看实时预览

最救命的是右上角那个Split视图，左边改代码右边秒变效果。有次手滑把height写成"100"，预览突然变成细长条——原来漏写dp单位！还有次图标不显示，拖进drawable文件夹忘点刷新按钮…这些蠢问题全靠实时预览逮住。

• 1. 预览记得选不同尺寸手机看看效果
• 2. 多设备测试前先关掉虚拟按键栏
• 3. 字体颜色和背景色反差要大

现在看这记账界面：紫色标题栏+圆角按钮+统一边距，虽然比不上大厂作品，至少像个能用的东西了。下次得研究怎么让不同屏幕不跑版…