APP 开机画面,如何实现兼容手机屏幕尺寸,显示效果要一致

2022-09-23 10:42:07 +08:00
 DreamCMS
895 次点击
所在节点    问与答
12 条回复
DreamCMS
2022-09-23 10:51:44 +08:00
请高手指点一二
coosir
2022-09-23 11:00:14 +08:00
不同的屏幕尺寸显示完全一致本来就不可能,所以一般是把重要信息放中间,边上不管是切掉上下还是切掉左右都不影响主要信息就好了(比如边上都是纯色)
kera0a
2022-09-23 11:00:49 +08:00
不可能一致的
整张图全屏显示的,尽量预留左右或上下边界安全距离。
一定要启动图显示一致,就加个底栏调整下,让启动图片显示的长宽比一致
kop1989smurf
2022-09-23 11:03:56 +08:00
居中裁切
james2013
2022-09-23 11:08:43 +08:00
显示效果一致是不可能,不同手机还是有差距
相对较好的方法是纯色背景或者有规律的背景图,拿个小图片居中显示
retrocode
2022-09-23 11:09:59 +08:00
尽量简洁, 用方图居中, 上下部分不要有重要内容, 举个例子: 一般都是纯白色底, 屏幕中间放个 slogan
also24
2022-09-23 11:10:26 +08:00
需要定义一下 “显示效果一致”,希望的 “一致” 效果是怎样的。

当屏幕的尺寸、像素密度变化时,保持不变的应当是物理尺寸还是像素尺寸,或者保持屏幕上的比例就行?

长宽比不符的时候,是拉伸,还是填充(纯色 /图片),或者裁切?

或者更特殊一点,按点 9 图的玩儿法来做特殊的缩放?
https://developer.android.com/guide/topics/graphics/drawables#nine-patch

当你定义好这个 “一致” 之后,其实实现方案基本也就跟着确定了。
HugoChao
2022-09-23 11:14:26 +08:00
留个 LOGO 和文字居中然后其余留白自适应?如果素材很多的话那要考虑单独适配不同分辨率
also24
2022-09-23 11:15:27 +08:00
如果说,本身并不存在严格的 “一致” 要求,只是希望有一种相对 “美观” 且简单的思路。

那么重点需要解决的是 “特殊长宽比” 的情况,有一些常见思路。

1 、纯色做底,特殊比例多余部分填充纯色
2 、作图时预留 “出血” 位置,特殊比例直接裁切
3 、背景和主图分离,主图居中按比例显示,背景按需平铺显示(或拉伸、裁切)
4 、直接使用点 9 图实现类似第 3 条的效果
5 、在上面几种方式的基础上,针对横竖屏两种比例预先优化一下布局
cht
2022-09-23 11:18:04 +08:00
京东方:?

xz410236056
2022-09-23 11:29:53 +08:00
你倒是说一下哪个平台啊。。。不同平台策略不同啊。。
iOS 有 LaunchScreen.storyboard 可以用自动布局。 至于你是等比例缩放还是裁切等等策略都可以上。
HarryQu
2022-09-23 14:00:28 +08:00
Android 平台基本上有三种方法,我之前分析的咸鱼、微信读书和皮皮虾启动图,你可以参考下:

http://t.csdn.cn/I7F8C

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/882330

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX