add-ins Für IOS IMESSAGE Programmieren My Message

/
0 Comments
Das Schreiben und Empfangen von Nachrichten ist wohl eine der wichtigsten Aktivitäten im Smartphone-Bereich. Im Gegensatz zu früheren Zeiten genügt es nicht mehr, einfach nur Textnachrichten verschicken zu können. Es muss ebenfalls möglich sein, Grafiken, Links, Sounds und sogar mit der Kamera erstellte Filme komfortabel an den oder die Empfänger verschicken zu können.

Im September 2016 hat Apple iOS 10 veröffentlicht. Die iMessage-App von iOS 10 wurde komplett neu entwickelt und um viele interessante Funktionen erweitert. Eines der neuen Features ist nicht nur für die Anwender, sondern auch für Entwickler äußerst interessant.

Es gibt nun die Möglichkeit, eigene Erweiterungen (Addins) für iMessage zu programmieren. Der Funktionsumfang von iMessage lässt sich so quasi grenzenlos erweitern. Möglich wird die Erweiterung durch das in iOS 10 neu eingeführte Message-Framework. Es stellt ein entsprechendes API zur Verfügung, über das die iMessage-App angepasst werden kann. In Xcode (ab Version 8.0) macht sich das neue Framework durch die Integration zweier neuer Vorlagen bemerkbar: Sticker Pack Application und iMessage Application (Bild 1). In diesem Artikel werden beide Möglichkeiten an je einem Beispiel demonstriert.

Sticker Pack Application

Die Sticker Pack Application ist eine Erweiterung für iMes-sage, die Bilder oder auch Bildsequenzen zum Einfügen in Nachrichten enthält. Die Sticker Packs können im AppStore auch kommerziell angeboten werden. Eine Besonderheit ist, dass sich der AppStore für iMessage-Erweiterungen auch direkt aus iMessage heraus aufrufen lässt.

Solche Erweiterungen können erstellt werden, ohne dass programmiert werden muss. Man braucht lediglich die gewünschten Bilder zusammenzustellen. Um eine Sticker Pack Application zu erstellen, muss die entsprechende Vorlage für ein neues Projekt gewählt werden. Während der Anlage des Projekts ist wie üblich ein Projektname zu vergeben. Die übersichtliche Struktur einer Sticker Pack Application zeigt Bild 2. Eine Codedatei gibt es nicht, da für diesen Anwen-
Vorlagen des neuen Message-Frameworks (Bild 1)
dungstyp nicht programmiert werden muss. Selektiert man im Project Navigator von Xcode die Datei Stickers.xcstickers, werden in der Übersicht ein Bereich für die App-Icons sowie ein weiterer für die Bilder angezeigt.

Bilder hinzufügen

Bilder kann man einem Sticker-Pack-Projekt via Drag and Drop hinzufügen (Bild 3). In Xcode ist dafür ein entsprechend beschrifteter Bereich vorhanden. Die Bilder können also bequem aus dem entsprechenden Verzeichnis direkt in das Projekt befördert werden. Es werden die Bildformate PNG, GIF und JPG unterstützt. Für animierte Bilder muss das APNG-oder GIF-Format verwendet werden.

Die Dateigröße der Bilder darf 500 Kilobyte nicht überschreiten. Gute Ergebnisse erzielt man, wenn die Bilder eine Auflösung von 100 x 100 oder 206 x 206 Punkten haben. In einer Sticker Pack App werden drei Bildgrößen unterstützt: Small, Medium und Large. Die verwendete (Bild-)Größe kann im Attributes Inspector von Xcode eingestellt werden.

Zuletzt benötigt man für den Upload in den AppStore natürlich noch die passenden App-Icons. Es werden unterschiedliche Größen benötigt, die von Xcode vorgegeben wer-
add-ins Für IOS IMESSAGE Programmieren

My Message

Mit iOS 10 können erstmals Add-ins für die iMessage-App entwickelt werden.
Struktur einer Sticker Pack App (Bild 2)
Hinzufügen von Bildern zur App (Bild 3)
den. Ratsam ist es hier, einen der vielen im Netz verfügbaren Dienste zu verwenden, welche die erforderlichen Größen automatisch erstellen, zum Beispiel der Service unter http:// makeappicon.com/imessageicon.

Folgende Größen werden benötigt: 1024 x 1024 Punkte (für den iMessage AppStore), 27 x 20 Punkte (in @1x, @2x, @3x), 32 x 34 Punkte (in @1x, @2x, @3x). Für iPhone-/ iPad-Einstel-lungen 29 x 29 Punkte (in @1x, @2x, @3x), 60 x 45 Punkte (in @2x, @3x), 67 x 50 Punkte (in @1x, @2x) und 74 x 55 Punkte (@2x) für das iPad Pro. Apple bietet auch ein passendes Template für diese Größen zum Herunterladen an. Hat man alle Icons beisammen, dann müssen diese nur noch via Drag and Drop in den entsprechenden Bereich der App (iMessage App Icon) eingefügt werden (Bild 4).

Im letzten Schritt kann die Sticker-Pack-Erweiterung für iMessage nun ausprobiert werden. Für den Test wird nicht zwangsläufig ein iOS-Gerät benötigt, denn er kann komplett im Simulator durchgeführt werden. Hierzu muss das Projekt lediglich über die Xcode-Schaltfläche Build & Run auf dem
App-Icons in das Projekt einfügen (Bild 4)
gewünschten Simulator aktiviert werden. Da es sich um eine Erweiterung für iMes-sage handelt, wird in der Regel auch automatisch iMes-sage auf dem Gerät gestartet.

Nach dem Start der App wird die Erweiterung im entsprechenden Bereich (AppStore) der App angezeigt.

Durch Auswahl wird die Erweiterung aktiviert, und es kann ein Bild aus dem Sticker Pack in einer neuen iMes-sage-Nachricht eingefügt werden (Bild 5).

Innerhalb der iMessage-App werden auch zwei Konten für Anwender simuliert.

So lässt sich nicht nur der Versand einer Nachricht testen, sondern auch der Empfang. Zwischen den beiden Benutzern kann über den <-Button umgeschaltet werden.

Neben der Vorlage Sticker Pack Application gibt es noch einen weiteren Vorlagentyp, der die Entwicklung von speziell angepassten Add-ins ermöglicht: iMessage Application.

iMessage Application

Im folgenden Abschnitt soll einmal eine triviale Erweiterung für iMessage umgesetzt werden, bei der in eine neue Nachricht auf Knopfdruck ein Text eingefügt werden soll. Nachdem sich der Dialog für das Anlegen eines neuen Projekts geöffnet hat, muss die Vorlage iMessage Application ausgewählt werden. Xcode erzeugt anschließend das zugehörige Projekt. Das besteht im Wesentlichen aus zwei Teilen: Storyboard und Klassendatei.

Während die Storyboard-Datei den Namen Maininterface trägt, wird die zugehörige Klassendatei mit dem Namen MessagesViewController angelegt. Innerhalb der Klasse sind bereits einige Methoden enthalten, die beispielsweise beim Start der Übertragung einer Nachricht didStartSending eine Interaktion ermöglichen.

Als Parameter werden in den Methoden unter anderem MSMessage und MSConversation übergeben. MSConversa-tion repräsentiert den gerade stattfindenden Nachrichtenaustausch und ermöglicht den Zugriff daraif. So kann man hier beispielsweise eine neue Nachricht (MSMessage wird grafisch innerhalb einer Blase angezeigt) einfügen und an den Empfänger übertragen. MSMessage enthält eine einzelne Nachricht der Konversation. Die Klasse MSMessageTem-plateLayout ermöglicht die Konfiguration des Layouts einer Nachrichtenblase. In dieser kann ja nicht nur Text, sondern zum Beispiel auch ein Bild eingefügt werden.

Der Zugriff auf eine Instanz von MSMessageTemplateLay-out ist relativ wichtig, da über diesen Weg Änderungen am Layout der Nachricht möglich sind. Hierfür werden einige Eigenschaften bereitgestellt. Damit man das Layout den ►
Test der Sticker Pack App im Simulator 
eigenen Vorstellungen entsprechend bearbeiten kann, muss man sich mit dem Aufbau von MSMessageTemplateLayout auseinandersetzen. Im Nachrichtenfenster gibt es beispielsweise die Eigenschaften image Title und image Subtitle. Wie die Bezeichnung vermuten lässt, können diese beiden Eigenschaften genutzt werden, um Bildunterschriften einzufügen.

Außerdem gibt es noch weitere Eigenschaften zur Beschriftung: Caption, Subcaption, Trailing Caption und Trailing Subcaption. Eine detaillierte Beschreibung aller Eigenschaften und Methoden der Klasse finden Sie in der Apple-Dokumen-tation.

Nach Betätigung des Plus-Buttons eines Steppers soll in einer Instanz von MSMessageTemplateLayout die zuvor im Stepper eingestellte Zahl innerhalb der Nachricht angezeigt
werden. Die Zahl wird in das Nachrichtenfeld geschrieben, sobald der Button mit der Bezeichnung Text erzeugen betätigt wurde.

Listing 1 zeigt den erforderlichen Code. Er besteht im Wesentlichen aus zwei Methoden. Innerhalb der Ereignismethode btnPressed befindet sich der Code, der ausgeführt wird, sobald der Button betätigt wurde.

Um den Text in der Nachricht später anzeigen zu können, wird im ersten Schritt eine Instanz der Klasse MSMessage-TemplateLayout angelegt. Dieser Instanz wird neben einem Text (Eigenschaft: caption) zusätzlich noch ein Bild (Eigenschaft: image) zugewiesen. Dieses Bild wird innerhalb der Methode generateimage erzeugt. In der Methode ist hierzu zuerst eine neue Label-Instanz (label) anzulegen. Anschlie-
Listing 1: MessagesViewController
import UIKit func insertImage() -> UIImage? {
import Messages let uiView = UIView(frame:
class MessagesViewController: CGRect(x: 0, y: 0, width: 200, height: 200))
MSMessagesAppViewController uiView.backgroundColor =
{ UIColor.white
@IBOutlet var uiStepper: UIStepper! let label = UILabel(frame:
@IBOutlet var uiLabel: UILabel! CGRect(x: 50, y: 50, width: 100,
override func viewDidLoad() { height: 100))
super.viewDidLoad() label.font = UIFont.systemFont(
} ofSize: 56.0)
override func label.backgroundColor = UIColor.green
didReceiveMemoryWarning() { label.textColor = UIColor.white
super.didReceiveMemoryWarning() label.text = "\(Int(uiStepper.value))"
} label.textAlignment = .center
@IBAction func uiStepperPressed(_ sender: Any) { uiView.addSubview(label)
uiLabel.text = uiView.frame.origin = CGPoint(
String(uiStepper.value) x: view.frame.size.width,
} y: view.frame.size.height)
@IBAction func btnPressed(_ sender: Any) { view.addSubview(uiView)  UIGraphicsBeginImageContextWithOptions(
if let image = insertImage(), let conversation = uiView.frame.size, false,
activeConversation { UIScreen.main.scale)
let messageTemplateLayout = uiView.drawHierarchy(in:
MSMessageTemplateLayout() uiView.bounds,
messageTemplateLayout.image = image afterScreenUpdates:
messageTemplateLayout.caption = "Stepper-Wert" true)
let message = MSMessage() let image =
message.layout = messageTemplateLayout UIGraphicsGetImageFromCurrentImageContext()
message.url = URL(string: "emptyURL") UIGraphicsEndImageContext()
conversation.insert( uiView.removeFromSuperview()
message, completionHandler: { return image
(error: Error?) in }
print(error as Any)  })  }  } //Quellcode entfernt
}



About Post Author

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

You may also like

Keine Kommentare:

Blog-Archiv

Powered by Blogger.

About

Popular Posts

  • Achondroplasie
    Abb. A.6 Achondroplasie. a Minderwuchs mit verkürzten Extre-mitaten. b Röntgenbild: Die Mittelstücke der langen Röhrenknochen sind verkü...
  • PEUGEOT METROPOLIS 400 ABS/TCS
    Die Küstenstraße zwischen Man-delieu bei Cannes und St. Raphael, die D599, gehört zu den schönsten Panoramastraßen an der französischen Cot...
  • We have many primrosos that often self-seed in less-
    than-ideal positions. One was growing under a thick evergreen shrub where it couldn't be seen, so I moved it to a more open setting whe...
  • DIE HUMAN FLAG STEMMEN
    DIE HUMAN FLAG STEMMEN Cathrin (21), Elektronikerin, Kiel „Die Human Flag traut mir keiner zu, weil ich zu schmal und schwach sei. ...
  • Bargeld-Pflicht in Bosnien
    Bargeld-Pflicht in Bosnien Seit Januar gilt in Bosnien und Herzegowina nur noch die harte Mark: Wer einreist, muss Bares vorweisen könn...
  • Prozent haben SSL-Zertifikate
    Prozent haben SSL-Zertifikate Die Unternehmensberatung Absolit hat die 500 umsatzstärksten deutschen Unternehmen auf 17 Variablen analy...
  • Einkaufen mit der HoloLen
    Einkaufen mit der HoloLens In Zusammenarbeit mit Saturn bringt Microsoft die Mixed-Reality-Technolo-gie in den stationären Handel. In e...
  • DIE KÄMPFER IN DER KÄLTE
    DIE KÄMPFER IN DER KÄLTE Lena Albrecht (29) ist seit acht Jahren begeisterte Stand-up-Paddlerin, sie leitet den „Saltwater Shop“ in Hei...
  • SCHWARZ-FAHRER
    MOPED-VERSICHERUNG Moped- und Rollerfahrer benötigen ab dem 1. März ein neues Versicherungs-Kennzeichen. Das kommt diesmal in Schwarz daher...
  • Adipositas beim Erwachsenen
    Herr Kramer klagt seiner Hausärztin: „Ich würde gerne abnehmen, weil ich beim Treppensteigen so schnell aus der Puste komme und die ...

Instagram

Facebook