V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
KillPaul
V2EX  ›  iDev

iOS 端聊天气泡如何实现拉伸的?

  •  
  •   KillPaul · 2019-04-09 15:29:43 +08:00 · 8828 次点击
    这是一个创建于 2080 天前的主题,其中的信息可能已经有所发展或是发生改变。
    UI 设计新人,暂未入职... 所以如果这个问题太小儿科请见谅。

    学习时知道安卓端的聊天气泡是用 “.9 ” 切图实现,然而不知道 iOS 端实现的方法,更神奇的是我谷歌居然还没找到满意的答案???(否则也不会发帖丢人了)

    因为设计的一款应用主色用到了渐变,而且还是 45 度角渐变😊 想给聊天气泡的底色也用这种渐变是不是实现起来很困难?(所以我改成单色的了,是不是很乖)

    有大大来告诉求知的我吗?可爱脸
    31 条回复    2019-04-24 15:14:39 +08:00
    plutodai
        1
    plutodai  
       2019-04-09 15:32:00 +08:00   ❤️ 1
    给 iOS 和安卓一样的.9 图片就行了,iOS 也有类型安卓.9 图片的处理方式
    KillPaul
        2
    KillPaul  
    OP
       2019-04-09 15:36:22 +08:00
    @plutodai 这样啊... 好的!谢谢解惑~
    sSsSsSs
        3
    sSsSsSs  
       2019-04-09 15:36:57 +08:00   ❤️ 1
    不是渐变的话, 正常 png,就可以了,至于楼上说的.9 图片,我个人没用过。。。
    MarginK
        4
    MarginK  
       2019-04-09 15:37:46 +08:00   ❤️ 1
    一样的 9 切片啊。。。。
    KillPaul
        5
    KillPaul  
    OP
       2019-04-09 15:39:32 +08:00
    @sSsSsSs 所以就切一张最小的 png 交给开发去实现么
    amon
        6
    amon  
       2019-04-09 15:39:52 +08:00   ❤️ 1
    我就不信搜 iOS 图片拉伸会没有答案。
    stretchableImage 了解一下
    MarginK
        7
    MarginK  
       2019-04-09 15:40:52 +08:00   ❤️ 1
    你是已经有渐变图的气泡了还是想自己画?
    有的话,如果是斜着的渐变气泡用 9 切片恐怕不行,自己画斜的渐变并不难啊。。。
    finab
        8
    finab  
       2019-04-09 15:41:25 +08:00   ❤️ 1
    KillPaul
        9
    KillPaul  
    OP
       2019-04-09 15:48:41 +08:00
    @amon
    @finab 我可能没表达清楚,只是想问问作为 UI 设计师应该做的是哪些,看了你们的回答是不是只要把聊天气泡的 png 切图提供给开发就行了呢?
    KillPaul
        10
    KillPaul  
    OP
       2019-04-09 15:49:40 +08:00
    @MarginK 我是做了斜的渐变气泡 png 图片。所以这种斜的渐变就只能由开发代码去实现了?谢谢
    sSsSsSs
        11
    sSsSsSs  
       2019-04-09 15:51:12 +08:00   ❤️ 1
    @KillPaul 对的
    finab
        12
    finab  
       2019-04-09 15:52:49 +08:00   ❤️ 1
    @KillPaul
    文档里就是说怎么做的,相关参数你也可以一并告诉开发(一般 UI 只给个图,开发还得自己推测出来,给个参数显得非常专业)
    你看他给的示范图,有箭头的都是拉伸的,没箭头的保持原样
    KillPaul
        13
    KillPaul  
    OP
       2019-04-09 16:04:31 +08:00
    @finab 明白了~ 这个给参数是必须的,毕竟比 .9 还要简单一些。
    psychoo
        14
    psychoo  
       2019-04-09 16:05:13 +08:00   ❤️ 1
    是不是这个意思?:

    我的思路是把渐变的底图给开发,开发用代码实现的,要分 W>=H 和 W<H 两种情况。
    KillPaul
        15
    KillPaul  
    OP
       2019-04-09 16:15:20 +08:00
    @psychoo 嗯,我不懂开发,这种类似 PS 里的剪切蒙版方式吧,我也想到过但不知道是不是这样实现的。但是这种情况就得切一张很大的渐变背景图了吧,因为小的图片就算只是渐变放大应该也会虚的,毕竟要考虑到一条很长很长的信息这种情况。我觉得应该还是有用代码实现的方法才对。PS.附上我的设计截图(突然觉得有点丑..)
    https://imgur.com/HefpKVe
    KillPaul
        16
    KillPaul  
    OP
       2019-04-09 16:16:45 +08:00
    发错格式了。再试试
    shawndev
        17
    shawndev  
       2019-04-09 16:24:41 +08:00   ❤️ 1
    Image Slice, 有保留区域也有拉伸区域,拉伸区域和保留区域如果同时用渐变,这个方案会出现渐变速率不匀的现象。可以考虑代码实现。
    psychoo
        18
    psychoo  
       2019-04-09 16:26:48 +08:00
    @KillPaul #16 我觉得光是 45 度这个设定,就避免不了在很长的信息的时候底图被拉伸得很严重,不妨根据长宽比自动调整角度?
    或者你能用“函数”把底图描述出来,这样开发就可以用函数将底图“画”出来(类似矢量图的概念,不过程序小哥可能会发火哈哈)
    KillPaul
        19
    KillPaul  
    OP
       2019-04-09 16:36:42 +08:00
    @psychoo 哈哈,我觉得还是老老实实用纯色吧... 我怕被喷死
    MarginK
        20
    MarginK  
       2019-04-09 17:40:09 +08:00   ❤️ 1
    @KillPaul 是的,如我所说,如果非要斜着渐变的话 就只能 UI 给个图,代码去填充渐变色了,

    当然,与其这样这样的话,还不如纯代码画泡泡算了。。。我没对比过 9 切片相比贝塞尔画图的性能优劣,你可以对比看看哈
    CSwater
        21
    CSwater  
       2019-04-09 18:50:28 +08:00 via iPhone   ❤️ 1
    气泡图片做蒙板,渐变底色用代码填充,完事。
    唯一的问题是,对技术细节的实现有较高的要求。
    cjh1095358798
        22
    cjh1095358798  
       2019-04-09 20:45:16 +08:00
    svg 可以作
    xiubin
        23
    xiubin  
       2019-04-09 23:12:02 +08:00 via iPhone   ❤️ 1
    @KillPaul #16
    类似于这种,代码实现更简单。

    如果是可拉伸的,还是切图方便。

    建议看一下手 Q 的自定义皮肤,中间拉伸,这样设计和开发都很轻松,扩展性也好。
    kevinlm
        24
    kevinlm  
       2019-04-10 10:55:04 +08:00 via iPhone   ❤️ 1
    这种设计会被骂的,渐变色跨度太大了。字体到底用白色还是黑色??
    iosnewbee
        25
    iosnewbee  
       2019-04-10 16:20:40 +08:00
    纯色做背景色,你还的考虑 iPad。。。
    KillPaul
        26
    KillPaul  
    OP
       2019-04-10 19:00:13 +08:00
    @kevinlm ?所以字体颜色必须一致是吗?好吧明白了😂
    KillPaul
        27
    KillPaul  
    OP
       2019-04-10 19:00:48 +08:00
    @iosnewbee iPad 怎么?
    kevinlm
        28
    kevinlm  
       2019-04-10 20:22:31 +08:00 via iPhone
    @KillPaul 不是字体颜色一致,是你背景图片,上面黑,下面白。那你白色字体还是黑色字体?
    kevinlm
        29
    kevinlm  
       2019-04-10 20:25:14 +08:00 via iPhone
    看错了,以为 14 楼是你设计的
    wezzard
        30
    wezzard  
       2019-04-14 13:42:33 +08:00
    9 切片圖做 mask,然後用 CAGradientLayer。
    DamonYu
        31
    DamonYu  
       2019-04-24 15:14:39 +08:00 via iPhone
    ImageStretch Cap 什么的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2413 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 16:00 · PVG 00:00 · LAX 08:00 · JFK 11:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.