V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
DreamCMS
V2EX  ›  问与答

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

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

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

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

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

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

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

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

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

    http://t.csdn.cn/I7F8C
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1019 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:36 · PVG 03:36 · LAX 11:36 · JFK 14:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.