首页   注册   登录
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/
iOS 开发实用书单
iPhone App Development: The Missing Manual
Cocoa and Objective-C: Up and Running
Cocoa Programming for Mac OS X
深入浅出设计模式 Head First Design Patterns
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
V2EX  ›  iDev

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

  •  
  •   KillPaul · 189 天前 · 5773 次点击
    这是一个创建于 189 天前的主题,其中的信息可能已经有所发展或是发生改变。
    UI 设计新人,暂未入职... 所以如果这个问题太小儿科请见谅。

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

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

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

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

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

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

    建议看一下手 Q 的自定义皮肤,中间拉伸,这样设计和开发都很轻松,扩展性也好。
        24
    kevinlm   188 天前 via iPhone   ♥ 1
    这种设计会被骂的,渐变色跨度太大了。字体到底用白色还是黑色??
        25
    iosnewbee   188 天前
    纯色做背景色,你还的考虑 iPad。。。
        26
    KillPaul   188 天前
    @kevinlm ?所以字体颜色必须一致是吗?好吧明白了😂
        27
    KillPaul   188 天前
    @iosnewbee iPad 怎么?
        28
    kevinlm   187 天前 via iPhone
    @KillPaul 不是字体颜色一致,是你背景图片,上面黑,下面白。那你白色字体还是黑色字体?
        29
    kevinlm   187 天前 via iPhone
    看错了,以为 14 楼是你设计的
        30
    wezzard   184 天前
    9 切片圖做 mask,然後用 CAGradientLayer。
        31
    DamonYu   174 天前 via iPhone
    ImageStretch Cap 什么的
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2873 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 11:37 · PVG 19:37 · LAX 04:37 · JFK 07:37
    ♥ Do have faith in what you're doing.