如何为iMessage Sticker App Grid Sticker提供不同的大小

时间:2016-12-16 07:45:17

标签: ios xcode imessage msstickerview

我已经创建了一个iOS iMessage贴纸应用程序,根据苹果文档,我应该能够以三种不同尺寸之一显示贴纸。

然而,无论我制作贴纸图像的大小(300px乘300px,408px乘408px,618px乘618px),它们只显示为中间网格选项,每行有三个贴纸。有谁知道如何解决这个问题,也许我错过了一些简单的东西?

关于这个主题的文档很少,因为它是相当新的。谢谢您的帮助。

Sticker Sizing Chart

文档链接:https://developer.apple.com/ios/human-interface-guidelines/extensions/messaging/

1 个答案:

答案 0 :(得分:1)

以300x300,408x408或618x618导入图像只会影响贴纸在对话中显示的大小(当作为初始消息发送或拖到现有消息气泡上时。更改图像的尺寸不会影响它&#39 ;在网格布局中的方向。

要在StickerBrowserView中更改网格布局,您可以采用以下两种方式之一:

  • 的InterfaceBuilder

单击StickerPack文件夹,使其突出显示(或从包中选择任何贴纸),然后您可以更改"贴纸尺寸"右侧属性检查器中下拉菜单中的选项为您的首选演示文稿样式:小(2列),中(3列)或大(4列)。这就是全部!这将改变每个贴纸以在布局中以这种方式显示。无论您将图像导入到何种尺寸,您的应用都会将其缩小/缩小到正确的尺寸,以便在所选的布局中使用。

Change Sticker Size from Interface Builder

  • 编程

首先,将一个新项目设置为"消息应用程序",然后创建一个新文件来创建子类MSStickerBrowserViewController,创建数组来存储贴纸,加载/创建贴纸(同时将每个存储到贴纸阵列中),并确保实现MSStickerBrowserViewController的2个必需的数据源方法。为此,您只需将图像拖到Extensions目录中即可。

SubclassFile.Swift

import UIKit
import Messages

class MyBrowserVC: MSStickerBrowserViewController {

    //create stickers array
    var stickers = [MSSticker]()

    //load assets into stickers array
    func loadStickers() {
        createSticker(asset: "boycott", localizedDescription: "boycottSticker")
        createSticker(asset: "alluminaughty", localizedDescription: "alluminaughtySticker")
        createSticker(asset: "beer", localizedDescription: "beerSticker")
    }

    //func to create sticker
    func createSticker(asset: String, localizedDescription: String) {

        //create url from assets in main bundle
        guard let stickerPath = Bundle.main.path(forResource: asset, ofType: "png") else {
            print("Couldn't create sticker path for", asset)
            return
        }
        let stickerURL = URL(fileURLWithPath: stickerPath)
        let sticker: MSSticker

        //create sticker from path(and localized description) and add to array
        do {
            try sticker = MSSticker(contentsOfFileURL: stickerURL,
                                 localizedDescription: localizedDescription)
            stickers.append(sticker)
        } catch {
            print(error)
            return
        }
    }

    //datasource methods
    override func numberOfStickers(in stickerBrowserView: MSStickerBrowserView) -> Int {
        return stickers.count
    }
    override func stickerBrowserView(_ stickerBrowserView: MSStickerBrowserView,
                                          stickerAt index: Int) -> MSSticker {
        return stickers[index]
    }
}

在您的MessagesViewController中(开始新项目时应该自动出现),从子类创建BrowserVC实例,设置贴纸大小,浏览器框架框架,添加子视图到前面,并将贴纸加载到浏览器视图。

MessageViewController.swift

import UIKit
import Messages

class MessagesViewController: MSMessagesAppViewController {

    //create BrowserVC instance of Subclass
    var browserVC: MyBrowserVC!

    override func viewDidLoad() {
        super.viewDidLoad()

    //the next line of code is where you can adjust the "grid layout"
    //your options are: .small(2 columns), .regular(3 columns), or .large(4 columns)

        //instantiate browserVC with sticker size and set frame
        browserVC = MyBrowserVC(stickerSize: .regular)
        browserVC.view.frame = self.view.frame

        //send browserVC to front
        self.addChildViewController(browserVC)
        browserVC.didMove(toParentViewController: self)
        self.view.addSubview(browserVC.view)

        //load stickers onto the browser view
        browserVC.loadStickers()
        browserVC.stickerBrowserView.reloadData()
    }
}

要获得更好的信息,请查看贴纸上去年发布的WWDC video!这是我开始学习制作贴纸的地方,然后点击文档!