Erstellen von Fortschrittskreis als WKInterfaceImage in Watch App

Question

Ich versuche, einen Fortschrittskreis für die Apple Watch-Version meiner App zu erstellen. Ich weiß, dass wir UIViews nicht benutzen können (was die Dinge so viel einfacher machen würde!), Also suche ich nach Alternativen.

Grundsätzlich würde ich eine dieser Prototypen erstellen möchten:

Die Art, wie ich hatte gehofft, Dinge zu tun, war es, die Hintergrundebenen als normaler WKInterfaceImage hinzuzufügen und dann der Fortschritt Pfeil/Linie oben als WKInterfaceImage, das sich basierend auf dem berechneten Prozentsatz um den Kreis dreht.

Ich habe den Prozentsatz so im Grunde berechnet, was ich suche etwas Hilfe mit dem zum Drehen des Pfeils Mathe-Code ist.

Wer weiß, ob dies möglich ist, und jemand mich, wenn so helfen könnte? Ich versuche nicht, den Kreis zu aktualisieren, während die App ausgeführt wird. Es muss nur aktualisiert werden, wenn die Watch App gestartet wird, um der iOS-Version zu entsprechen.

Danke!

Answer 1

WKInterface-Klassen können nicht unterklassiert werden. Daher ist ein benutzerdefiniertes Steuerelement nicht möglich.

Auch Animation ist begrenzt. Um eine Animation zu erstellen, müssen Sie jeden einzelnen Rahmen als Bild speichern. Dann können Sie in Ihrer WatchKit-App eine Bildansicht erstellen, die diese Bilder durchläuft.

Speichern Sie die Bilder im Images.xcassets Ordner in der Uhren Ziel und versuchen, um zu Chaos mit der den Rahmen zu ändern, basierend auf dem Prozentsatz der Aktivität beendet ist.

Eine zusätzliche Anmerkung: 100 Bilder zu haben wäre nicht effizient, da jede WatchKit App nur einen begrenzten Platz auf der Uhr hat (ich glaube es sind 20MB, aber ich bin mir nicht sicher). Vielleicht habe ich ein Bild für alle 5%.

Answer 2

Das meiste, was auf iOS verfügbar ist nicht vorhanden ist (noch) nicht in WatchKit. Insbesondere sind einige der Dinge, die Sie tun möchten, fast unmöglich. (Hoffnungsschimmer in einem Moment). Insbesondere können Sie ein Bild nicht drehen. Oder Sie können ein Bild drehen, aber Sie müssen es am Telefon tun und dieses Bild dann zur Laufzeit an die Uhr weitergeben. Außerdem können Sie Bilder nicht einfach zusammensetzen - es gibt jedoch eine Möglichkeit, dies zu tun.

Eine Möglichkeit wäre, das gesamte rotierte, zusammengesetzte Bild so zu gestalten, wie Sie es auf dem Telefon haben möchten, und die endgültigen Daten mit [WKInterfaceButton setBackgroundImage:] an die Schaltfläche zu übergeben. Unglücklicherweise wird es im Simulator wahrscheinlich zu langsam sein und wahrscheinlich wird es auf der tatsächlichen Uhr schlecht funktionieren. Kaum zu wissen, denn wir haben keins, aber das sendet das Bild spontan über Bluetooth. So erhalten Sie keine sanfte Animation oder gute Antwortzeiten.

Ein besserer Weg ist Weg, um es auf der Uhr zu hacken. Dies beruht auf zwei Tricks: Einer, der Gruppen mit Hintergrundbildern übereinanderlegt. Zwei mit - [WKInterfaceImage startAnimatingWithImagesInRange: duration: repeatCount:].

Zum ersten Trick, eine Gruppe in Ihr Layout fallen, dann in ihm eine andere Gruppe setzen, dann (möglicherweise) eine Taste im Inneren, dass. Verwenden Sie dann - [WKInterfaceGroup setBackgroundImage:] und die Bilder werden zusammengefügt. Stellen Sie sicher, dass Sie die richtige Transparenz usw. verwenden.

Für den zweiten Trick, beziehen Sie sich auf die offizielle Dokumentation - im Wesentlichen benötigen Sie eine Reihe von Bildern, eines für jeden möglichen Rotationswert, wie erdekhayser sagte. Nun, dies scheint ungeheuerlich (es ist) und möglicherweise unpraktisch (ist es nicht). So empfiehlt Apple, Spinner und ähnliches zu erstellen - zumindest für den Moment. Und ja, das kann bedeuten, 360 verschiedene Bilder zu erzeugen, obwohl mein kleiner Tipp wegen des kleinen Bildschirms ist, alle 3-5 Grad zu gehen (niemand wird den Unterschied erkennen können).

Hoffe, das hilft.

Answer 3

Eine andere Lösung ist 100 Bild zu erstellen, für jede Nummer haben Sie einen Rahmen. Sie können also eine Animation mit der Methode 'startAnimatingWithImagesInRange: duration: repeatCount' anzeigen.

Das Problem ist, dass es schwierig ist, jeden Rahmen anzupassen. Jemand hat über dieses Problem nachgedacht und einen Generator erstellt. Sie können es mit diesem Namen finden:

Radial Bar Chart Generator

Dieser Link sollen Ihnen den Rahmen gestalten helfen: http://hmaidasani.github.io/RadialChartImageGenerator/

Auch Sie haben dieselben Proben auf git Link. Für 100 Bilder mit einem einzigen Bogenrahmen erhalten Sie ca. 1,8 MB auf der Festplatte.

Answer 4

Nein, es ist nicht möglich, diesen benutzerdefinierten Kreis im Uhrenkit zu erstellen, da UIView nicht am Uhrenkit arbeitet.

gibt es nur die Lösung Ihres Problems ist, müssen Sie 100 Bilder von jedem Rahmen ... und stellen Sie sicher, dass die Größe der Bilder kleiner als 20 MB ist. weil die Größe der Uhr Anwendung ist bis zu 20 MB

Answer 5

Niemand posts code ??? Hier ist es! genießen:

1) hier die Bilder erstellen: http://hmaidasani.github.io/RadialChartImageGenerator/

2) Ziehen n einen Picker in der View-Controller-Drop, und verknüpft es mit einem gewissen viewController.swift Datei. Setzen Sie den Picker-Stil im rechts angezeigten Menü auf "Sequenz".

3) Fügen Sie diesen Code auf die viewController.swift, und verbinden Sie den Picker auf die IBOutlet und der IBAction:

import WatchKit 
import Foundation 

class PickerViewController: WKInterfaceController { 

    override func awakeWithContext(context: AnyObject?) { 
     super.awakeWithContext(context) 
    } 

    @IBOutlet var itemPicker: WKInterfacePicker! 

    override func willActivate() { 
     super.willActivate() 

     let pickerItems: [WKPickerItem] = (0...100).map { 
      let pickerItem = WKPickerItem() 
      pickerItem.contentImage = WKImage(imageName: "singleArc\($0).png") 
      return pickerItem 
     } 
     itemPicker.setItems(pickerItems) 
    } 

    @IBAction func pickerSelectedItemChanged(value: Int) { 
     NSLog("Sequence Picker: \(value) selected.") 
    } 

    override func didDeactivate() { 
     super.didDeactivate() 
    } 

} 

Answer 6

Ab watchOS 3 ist es möglich, SpriteKit zu verwenden.

SKShapeNode kann Formen zeichnen, so ist es möglich, radiale Ringe zu erstellen.

1. Fügen Sie einen WKInterfaceSKScene zu Ihrem Schnittstellencontroller im Storyboard hinzu und schließen Sie ihn über eine Steckdose an.

2. Set es im Wach Methode des Interface-Controllers bis

   override func awake(withContext context: Any?) { 
       super.awake(withContext: context) 
       scene = SKScene(size: CGSize(width: 100, height: 100)) 
       scene.scaleMode = .aspectFit 
       interfaceScene.presentScene(scene) 
   } 
   

3. eine Form Knoten erstellen und sie zu der Szene hinzufügen

   let fraction: CGFloat = 0.75 
   let path = UIBezierPath(arcCenter: .zero, 
            radius: 50, 
            startAngle: 0, 
            endAngle: 2 * .pi * fraction, 
            clockwise: true).cgPath 
   
   let shapeNode = SKShapeNode(path: path) 
   shapeNode.strokeColor = .blue 
   shapeNode.fillColor = .clear 
   shapeNode.lineWidth = 4 
   shapeNode.lineCap = .round 
   shapeNode.position = CGPoint(x: scene.size.width/2, y: scene.size.height/2) 
   scene.addChild(shapeNode)