去年底我参与了一个老项目的维护重构，是给Windows Phone平台做微博客户端的适配开发，算下来折腾了快三个月，最后上线效果还不错，不少老用户说界面比之前舒服太多。这段时间跟界面布局打交道比较多，攒了不少实际踩坑摸出来的经验，今天就顺着项目总结，把这些实用的经验分享出来。

最开始拿到需求的时候，我们就发现原来的旧布局适配做得特别差。那时候Windows Phone的设备屏幕尺寸其实跨度不小，从4英寸的低端机到6英寸以上的大屏都有，旧代码里写死了好多固定坐标和固定尺寸，换到不同设备上要么挤成一团，要么留白多到离谱。我们一开始想偷懒，直接套用当时流行的通用网格布局，结果试了两天发现根本不对路子。

微博的核心信息流是纵向滚动的卡片，每个卡片里要放头像、昵称、内容、互动按钮，这些元素的比例不能乱。我们后来改回用StackPanel嵌套Grid的组合方式，外层用StackPanel管纵向排列，每个卡片内部用Grid分栏，把头像固定在左侧1/6宽度，剩下的5/6留给内容区域。头像我们给了固定最大尺寸，小屏幕上会自动按比例缩小，大屏幕也不会放大到变形，试了几款设备，比例都保持得很好。

这里有个挺容易踩的坑，很多人刚做Windows Phone布局的时候，喜欢给所有元素都加Margin，觉得这样间距好看。我们最开始也这么干，结果不同屏幕缩放之后，Margin叠加起来就乱了，有的地方间距拉得特别大，有的地方挤在一起。后来我们统一改成只在需要隔开的元素之间加间距，用Grid的RowDefinition和ColumnDefinition自带的Spacing调距离，比叠Margin稳定太多，不同设备出来的效果基本一致。

再说下拉刷新和加载更多这个模块，这个是微博客户端必不可少的功能。最开始我们用了系统自带的ScrollViewer，直接把刷新控件嵌在顶部，结果滑动的时候经常卡，跟手势冲突还挺严重。后来我们改了布局结构，把刷新控件作为ScrollViewer的直接子元素，然后把整个信息流放在刷新控件内部，调整了垂直对齐方式，才解决了手势冲突的问题。

还有个细节，Windows Phone有个特有的Pivot全景导航，很多客户端都喜欢用这个做标签切换，微博也不例外，顶部放“首页”“热门”“我的”三个标签。最开始我们把Pivot的头放在整个页面最顶部，占了不少高度，小屏幕上内容显示区域被挤得很小，一屏刷不出两条微博。我们后来调整了布局，把Pivot的标题栏改成自适应高度，内容区域对齐页面的顶部，把系统状态栏的空间也利用上，这样一下多出来将近20像素的显示高度，小屏体验好太多。这个改动说起来简单，当时我们调了快一天，才让不同分辨率的设备都能正确对齐，不会挡住状态栏的时间信号。

说到适配，不得不提Windows Phone的动态磁贴，这个是系统特有的功能，微博客户端肯定要做。磁贴的布局其实也有讲究，很多人做磁贴只顾着放内容，不管大小规格，结果小磁贴显示不全，大磁贴留白太多。我们当时是把三种规格的磁贴分开做布局，小磁贴只放用户头像和未读计数，中磁贴加一条最新微博的摘要，大磁贴放三张最新的配图预览。每个规格都单独写布局，没用同一份代码拉伸，出来效果比统一适配整齐太多。还有就是磁贴的背景色，我们跟着系统主题走，没写死纯色，用户改系统主题的时候，磁贴颜色也跟着变，这点用户反馈特别好。

还有一个交互上的布局坑，就是微博内容里的图文混排。用户发微博经常是文字加九图，图的数量不固定，从1张到9张都有，原来的旧布局是不管几张图都留出来九格的位置，缺的就留白，特别丑。我们后来改成了流式布局，根据图片数量自动调整排列，1张图就撑满整个内容宽度，2张并排，3张就是上面一张下面两张，4张就是2x2，9张就是标准九宫格。这个说起来简单，在Windows Phone的原生布局里没有现成的流式控件，得自己改WrapPanel的逻辑，我们调整了好多次间距，才保证不管几张图，整体宽度都跟内容区对齐，不会凸出来也不会留奇怪的白边。

最后说一下性能问题，其实布局跟性能关系特别大。我们最开始做完适配，翻个三五屏就开始卡，尤其是每条微博都带图的时候，滑动掉帧掉得厉害。查了半天才发现，布局嵌套太多了，每个卡片里叠了三四层Panel，渲染的时候每层都要重绘，滑动的时候CPU占满了。后来我们做布局扁平化，能合并的Panel就合并，原来的四层嵌套改成两层，没用的容器全删掉，再给图片加上缓存，一下就流畅了。很多人觉得布局就是摆位置，其实嵌套太多对性能影响真的很大，尤其是这种长列表滚动的页面，每一个卡片都要渲染，一点点冗余积累起来就会很卡。

其实做这个项目之前，我对Windows Phone的布局理解也停留在书本上，真的动手做一个成熟的客户端，才发现很多经验都是踩坑踩出来的。比如不要一味追求用新技术，适合业务的才是最好的，我们最开始想用电离布局，后来发现对于固定结构的卡片来说，Grid反而更简单高效。也不要写死任何尺寸，相信系统的自适应机制，只要把比例规则写对，不同屏幕都会给你不错的结果。

这个项目结束之后，我最大的感受就是，界面布局从来不是照着设计图堆控件就行。你得考虑不同设备的适配，考虑用户交互的流畅度，考虑极端情况的显示效果，这些都是书本上不会详细说的，得自己做过才懂。希望这些我们实际踩坑出来的经验，能给做类似开发的朋友一点参考，少走点我们走过的弯路。

Windows phone,微博客户端,开发项目总结,界面布局,布局实践,经验分享,屏幕适配,Windows phone开发,客户端开发,布局优化

[Q]：Windows phone微博客户端开发中，信息流卡片布局用什么方案比较合适？
[A]：可以采用外层StackPanel管纵向排列、卡片内部用Grid分栏的组合方案，左侧给头像固定比例宽度，剩余空间给内容，给头像设置最大尺寸，适配不同屏幕时比例能保持稳定。
[Q]：为什么不推荐给布局元素叠加过多Margin？
[A]：不同屏幕缩放时，叠加的Margin会累加导致间距混乱，要么间距过大、要么元素挤在一起，用Grid自带的Spacing调整间距，比叠加Margin更稳定，不同设备显示效果更一致。
[Q]：Windows phone微博的下拉刷新布局怎么解决手势冲突？
[A]：不要把刷新控件嵌套在多层容器内，把刷新控件作为ScrollViewer的直接子元素，再将整个信息流放在刷新控件内部，调整垂直对齐方式就能解决滑动卡顿、手势冲突的问题。
[Q]：Pivot全景导航布局怎么优化小屏显示效果？
[A]：将Pivot标题栏改成自适应高度，让内容区域对齐页面顶部，充分利用系统状态栏的空间，可以多出来近20像素的显示高度，提升小屏设备的内容展示量。
[Q]：Windows phone动态磁贴的布局要注意什么？
[A]：不要用同一份布局拉伸适配不同大小的磁贴，要针对小、中、大三种规格分别做布局，小磁贴只放核心信息，大磁贴增加内容，同时配合系统主题动态调整磁贴背景色，体验更好。
[Q]：微博里多变数量的图片怎么布局更美观？
[A]：不要给九图固定预留所有位置，可以自定义流式布局，根据图片数量自动调整排列，1张图撑满宽度、2张并排、4张2×2排列、9张用九宫格，能避免奇怪的留白，整体更整齐。
[Q]：为什么长列表信息流滑动会卡顿，和布局有关系吗？
[A]：有关系，如果布局嵌套层数过多，每个卡片都有多层容器，滑动渲染时每层都要重绘，会占用大量CPU资源导致掉帧，把布局扁平化，合并多余容器、减少嵌套层数就能明显提升流畅度。
[Q]：Windows phone界面布局有什么通用实践经验？
[A]：不要写死固定尺寸，要给元素设置比例规则适配不同屏幕，不要盲目追求新技术，适合业务结构的布局方案才是最高效的，同时要注意控制布局嵌套层数，避免冗余影响性能。