V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dagger2
V2EX  ›  程序员

关于 figma 的单位

  •  
  •   dagger2 · 2022-05-20 08:47:30 +08:00 · 4481 次点击
    这是一个创建于 918 天前的主题,其中的信息可能已经有所发展或是发生改变。

    设计出的图,上面显示的单位都是 px ,Android 开发一般用 dp ,有人知道这个怎么才能查看 dp 吗,问了 UI 也说不知道怎么看。。

    12 条回复    2022-05-20 21:52:01 +08:00
    WilsonGGG
        1
    WilsonGGG  
       2022-05-20 08:52:05 +08:00
    dp = (width in pixels * 160) / screen density

    Material Design 的官方文档有写。https://material.io/design/layout/pixel-density.html#pixel-density-on-android
    WilsonGGG
        2
    WilsonGGG  
       2022-05-20 08:58:09 +08:00
    补充 #1:这个 160 是怎么来的呢?是由于 Android 要做自适应,所以定义 1dp 为在一块 160dpi 屏幕上,显示为一个物理像素,对应你可以理解,如果你的程序运行在一块 640dpi 的屏幕上,那么 1dp 显示为 4 个物理像素。

    px= dp ( dpi / 160 )
    Leonard
        3
    Leonard  
       2022-05-20 09:16:08 +08:00
    UI 不知道怎么看???
    dagger2
        4
    dagger2  
    OP
       2022-05-20 09:21:57 +08:00
    @Leonard 真不知道。。。
    dagger2
        5
    dagger2  
    OP
       2022-05-20 09:23:44 +08:00
    屏幕适配用的 autosize ,设计图尺寸是 750*1624 ,如果直接把这个当 dp 处理的话,第三方库的 UI 没法看了,第三方的大小一般都是按 720P 的设计图来的
    chengyiqun
        6
    chengyiqun  
       2022-05-20 09:31:32 +08:00
    UI 是写死的值, 让研发换算适配不同屏幕是吧?

    这个你可以用一个软件 Pixel Ruler, 可以在手机屏幕上, 把 px 转成 dp
    https://play.google.com/store/apps/details?id=com.bidyut.app.pixelruler
    Tenlp
        7
    Tenlp  
       2022-05-20 10:34:30 +08:00
    试下在元素的 Inspect -> Code -> CSS 改成 android ,样式代码里面有 dp 属性
    whyrookie
        8
    whyrookie  
       2022-05-20 11:04:58 +08:00
    @dagger2 #5 这个本身就是 autosize 的一个缺陷?
    itgoyo
        9
    itgoyo  
       2022-05-20 13:09:55 +08:00
    你这个 750 * 1624 本来就是错的,正常的 UI 给图的尺寸都是 750 * 1334
    我也在用 autosize 基本没啥问题,只是之前时候 dialog 可能有莫名其妙的问题,后面自定义了之后就好了
    davin
        10
    davin  
       2022-05-20 14:12:01 +08:00
    5 小时 17 分钟前 · 996 次点击 😁可以看看隔壁的蓝湖或者腾讯的 Codesign ,他们的设计稿右边都会有不同设备的单位比例转换。
    pengtdyd
        11
    pengtdyd  
       2022-05-20 14:16:59 +08:00
    android 开发工具没有 px 转 dp 的插件吗,我记得 vscode 有类似的插件,写 px 自动转为 dp
    darkengine
        12
    darkengine  
       2022-05-20 21:52:01 +08:00
    750*1624 应该是按照 iOS 的 @2x 标准出的图,安卓的话直接用标注值除以二来设置就行(简单适配的情况)。如果要做到效果更好,UI 应该要标注那些地方的约束是定死的,哪些是可自适应的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1261 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:01 · PVG 02:01 · LAX 10:01 · JFK 13:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.