如何为 iMessage Sticker App Grid Sticker 提供不同尺寸 [英] How to provide different sizes for iMessage Sticker App Grid Sticker

问题描述

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

但是，无论我制作什么尺寸的贴纸图像(300 像素 x 300 像素、408 像素 x 408 像素、618 像素 x 618 像素)，它们都只会显示为中间网格选项，每行三个贴纸.有谁知道如何解决这个问题，也许我错过了一些简单的东西?

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

文档链接:

• 以编程方式

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

SubclassFile.Swift

导入 UIKit导入消息类 MyBrowserVC:MSStickerBrowserViewController {//创建贴纸数组var 贴纸 = [MSSticker]()//加载资产到贴纸数组功能加载贴纸(){创建贴纸(资产:抵制"，本地化描述:抵制贴纸")createSticker(资产:alluminaughty"，localizedDescription:alluminaughtySticker")创建贴纸(资产:啤酒"，本地化描述:啤酒贴纸")}//func 来创建贴纸func createSticker(资产:字符串，localizedDescription:字符串){//从主包中的资产创建url守卫让贴纸路径 = Bundle.main.path(forResource: asset, ofType: "png") else {打印(无法创建贴纸路径"，资产)返回}让stickerURL = URL(fileURLWithPath:stickerPath)让贴纸:MSSticker//从路径(和本地化描述)创建贴纸并添加到数组做 {尝试贴纸 = MSSticker(contentsOfFileURL:stickerURL,localizedDescription: localizedDescription)贴纸.附加(贴纸)} 抓住 {打印(错误)返回}}//数据源方法覆盖func numberOfStickers(在stickerBrowserView中:MSStickerBrowserView)->整数{返回stickers.count}覆盖 funcstickerBrowserView(_stickerBrowserView: MSStickerBrowserView,stickerAt 索引:Int) ->MSSticker {回贴[索引]}}

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

MessageViewController.swift

导入 UIKit导入消息类 MessagesViewController:MSMessagesAppViewController {//创建子类的 BrowserVC 实例var browserVC:MyBrowserVC！覆盖 func viewDidLoad() {super.viewDidLoad()//下一行代码是你可以调整网格布局"的地方//您的选项是:.small(2 列)、.regular(3 列)或 .large(4 列)//使用贴纸大小和设置框架实例化browserVCbrowserVC = MyBrowserVC(stickerSize: .regular)browserVC.view.frame = self.view.frame//将浏览器VC发送到前端self.addChild(browserVC)browserVC.didMove(toParent: self)self.view.addSubview(browserVC.view)//加载贴纸到浏览器视图browserVC.loadStickers()browserVC.stickerBrowserView.reloadData()}}

要了解更多信息，请查看去年发布的 WWDC 视频在贴纸上！这是我开始学习制作贴纸的地方，然后点击文档！

I have created an iOS iMessage sticker app, and according to apple documentation, I should be able to display the stickers in one of three different sizes.

However, no matter what size I make the sticker images (300px by 300px, 408px by 408px, 618px by 618px) they only show up as the middle grid option, with three stickers per row. Does anyone know how to fix this issue, maybe I am missing something simple?

Documentation on this topic is scarce because it is fairly new. Thanks for the help.

Link to documentation: https://developer.apple.com/ios/human-interface-guidelines/extensions/messaging/

解决方案

Importing the images at 300x300, 408x408, or 618x618 will ONLY affect the size the sticker appears in the conversation(when sent as initial message or dragged onto an existing message bubble. Changing the dimensions of your images will NOT affect it's orientation in the grid layout.

To change the grid layout in the StickerBrowserView you can do it one of two ways:

• InterfaceBuilder

Click on the StickerPack folder so it is highlighted(or select any sticker from your pack) and then you can change the "Sticker Size" option from the dropdown menu in the attributes inspector on the right-hand side to your preferred presentation style: small(2 columns), medium(3 columns), or large(4 columns). That's all! This will change every sticker to display this way in the layout. No matter what size you import your images at, your app will scale it down/up to the correct dimensions for use in the chosen layout.

• Programmatically

First, set up a new project as a "messages application", then create a new file to subclass MSStickerBrowserViewController, create array to store stickers, load/create stickers(while storing each into stickers array), and make sure to implement the 2 required datasource methods of MSStickerBrowserViewController. For this, you can just drag your images into the Extensions directory.

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]
    }
}

In your MessagesViewController(should be there automatically when beginning a new project), create instance of your BrowserVC from your subclass, set sticker size, browserVC frame, add subview to front, and load stickers to the browser view.

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.addChild(browserVC)
        browserVC.didMove(toParent: self)
        self.view.addSubview(browserVC.view)

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

For better info, check out the WWDC video released last year on Stickers! This is where I started learning to build stickers, then hit up the documentation!

这篇关于如何为 iMessage Sticker App Grid Sticker 提供不同尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！