[iOS] Ich habe versucht, mit Swift eine insta-ähnliche Verarbeitungsanwendung zu erstellen
Ich habe mit Swift eine Verarbeitungs-App erstellt!
Die Übersicht ist wie folgt.
- Stellen Sie das Bild ein
Erstellen Sie zunächst ein Projekt, verschieben Sie es in das Main.storyboard und platzieren Sie dann die Schaltflächen Ansicht, UIImageView und. Zuerst Ansicht nach oben, rechts, links 0, Höhe 200. Als nächstes werde ich die UIImageView in die Ansicht einfügen, aber bitte machen Sie mit dem Layout, was Sie wollen. Die folgenden Schaltflächen befinden sich nur in einer Atmosphäre. Passen Sie sie daher nach Ihren Wünschen an. Außerdem habe ich das Bild in einer Atmosphäre in UIImageView platziert. Wenn Sie jedoch nichts festlegen, sieht es wie ein Leerzeichen aus, sodass es leichter zu verstehen ist, wenn Sie etwas festlegen.
Verbinden Sie anschließend jedes Teil mit IBOutlet.
Viewcontroler.swift
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var photo: UIImageView!
@IBOutlet weak var shareButton: UIButton!
//Ausgewähltes Bild
var selectedImage: UIImage?
override func viewDidLoad() {
super.viewDidLoad()
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.handleSelectPhoto))
photo.addGestureRecognizer(tapGesture)
photo.isUserInteractionEnabled = true
}
@IBAction func shareButton_TouchUpInside(_ sender: Any) {
view.endEditing(true)
}
@objc func handleSelectPhoto() {
let pickerController = UIImagePickerController()
pickerController.delegate = self
pickerController.allowsEditing = true
present(pickerController, animated: true, completion: nil)
}
}
extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
guard let image = info[.editedImage] as? UIImage else { return }
self.selectedImage = image
photo.layer.masksToBounds = true
photo.clipsToBounds = true
photo.image = image
dismiss(animated: true, completion: nil)
}
}
Ich möchte UIImageView mit dem Foto verbinden und das ausgewählte Bild verwenden.
Viewcontroller.swift
//Ausgewähltes Bild
var selectedImage: UIImage?
Ist definiert als. Danach wird die Tap-Erkennung mit viewDidLoad durchgeführt und UIImagePickerController () aufgerufen. In der Erweiterung wird dann das von didFinishPickingMediaWithInfo ausgewählte Bild im Foto gespeichert. Überprüfen Sie den Code hier.
- Erstellen Sie einen Filterbildschirm
Wenn Sie ein Foto festlegen können, erstellen wir einen Bildschirm zur Auswahl von Filter.
Erstellen Sie einen neuen View Controller und verwenden Sie ihn als FilterViewController.
Setzen Sie dann Present Mordally from Viewcontroller auf FilterViewController.
Bitte definieren Sie "filter_segue" für den erstellten Abschnitt. Es wird beim späteren Übergang verwendet.
Als nächstes legen Sie die Teile in den FilterViewController.
Wie in der Abbildung gezeigt, platzieren Sie zuerst eine neue Ansicht oben und dann die Schaltflächen Abbrechen und Weiter in dieser Ansicht.
Platzieren Sie dann die UIImageView unter der obigen Ansicht. Das im View Controller ausgewählte Bild spiegelt sich darin wider.
Legen Sie zum Schluss die CollectionView unter die UIImageView und halten Sie sie etwas weiter entfernt. Auch in dieser Sammlungsansicht
Platzieren Sie die UIImageView und wählen Sie das Bild aus, das hier verarbeitet werden soll.
Sehen Sie sich nach dem Platzieren die Bildlaufansicht der Sammlungsansicht an.
・ Horizontale Anzeige anzeigen
・ Vertikale Anzeige anzeigen
Bitte deaktivieren Sie die beiden. Auf diese Weise können Sie die horizontale Folien-Benutzeroberfläche ausdrücken, die häufig bei der Verarbeitung von Apps verwendet wird.
Stellen Sie nach dem Platzieren der erforderlichen Teile den Delegaten und die Datenquelle einzeln ein.
Und da für die Zelle von CollectionView eine neue Klasse erforderlich ist, erstellen Sie "FilterCollectionViewCell.swift", das UICollectionViewCell erneut erbt.
FilterCollectionViewCell.swift
import UIKit
class FilterCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var filterPhoto: UIImageView!
}
Nur die UICollectionView in der CollectionView ist hier in Ordnung.
- Erstellen Sie eine Verarbeitungs-App
Ich werde es tatsächlich von hier aus schaffen, aber vorerst werde ich den gesamten Code an die erste Stelle setzen. Wenn Sie ihn verstehen, können Sie ihn kopieren, aber für diejenigen, die ihn nicht verstehen, werde ich ihn in der Reihenfolge von oben erklären.
FilterViewController.swift
import UIKit
protocol FilterViewControllerDelegate {
func updatePhoto(image: UIImage)
}
class FilterViewController: UIViewController {
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var filterPhoto: UIImageView!
var delegate: FilterViewControllerDelegate?
var selectedImage: UIImage!
var CIFilterNames = [
"CIPhotoEffectChrome",
"CIPhotoEffectFade",
"CIPhotoEffectInstant",
"CIPhotoEffectNoir",
"CIPhotoEffectProcess",
"CIPhotoEffectTonal",
"CIPhotoEffectTransfer",
"CISepiaTone"
]
override func viewDidLoad() {
super.viewDidLoad()
filterPhoto.image = selectedImage
filterPhoto.contentMode = .scaleAspectFill
}
@IBAction func cancelBtn_TouchUpInside(_ sender: Any) {
dismiss(animated: true, completion: nil)
}
@IBAction func nextBtn_TouchUpInside(_ sender: Any) {
dismiss(animated: true, completion: nil)
delegate?.updatePhoto(image: self.filterPhoto.image!)
}
func resizeImage(image: UIImage, newWidth: CGFloat) -> UIImage {
let scale = newWidth / image.size.width
let newHeight = image.size.height * scale
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
}
extension FilterViewController: UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return CIFilterNames.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FilterCollectionViewCell", for: indexPath) as! FilterCollectionViewCell
let context = CIContext(options: nil)
let newImage = resizeImage(image: selectedImage, newWidth: 150)
let ciImage = CIImage(image: newImage)
let filter = CIFilter(name: CIFilterNames[indexPath.item])
filter?.setValue(ciImage, forKey: kCIInputImageKey)
if let filteredImage = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
let result = context.createCGImage(filteredImage, from: filteredImage.extent)
cell.filterPhoto.image = UIImage(cgImage: result!)
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let context = CIContext(options: nil)
let ciImage = CIImage(image: selectedImage)
let filter = CIFilter(name: CIFilterNames[indexPath.item])
filter?.setValue(ciImage, forKey: kCIInputImageKey)
if let filteredImage = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
let result = context.createCGImage(filteredImage, from: filteredImage.extent)
self.filterPhoto.image = UIImage(cgImage: result!)
}
}
}
Ausgangsverbindung von FilterViewController I.
FilterCollectionView.swift
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var filterPhoto: UIImageView!
@IBAction func cancelBtn_TouchUpInside(_ sender: Any) {
dismiss(animated: true, completion: nil)
}
@IBAction func nextBtn_TouchUpInside(_ sender: Any) {
dismiss(animated: true, completion: nil)
delegate?.updatePhoto(image: self.filterPhoto.image!)
}
Ich habe es als belassen. CancelButton kehrt zum vorherigen Bildschirm zurück, und NextButton gibt das in der Zelle unten ausgewählte Bild an den Ansichtscontroller weiter.
Definieren Sie als Nächstes die von FilterViewController verwendeten Eigenschaften.
FilterCollectionView.swift
var selectedImage: UIImage!
var CIFilterNames = [
"CIPhotoEffectChrome",
"CIPhotoEffectFade",
"CIPhotoEffectInstant",
"CIPhotoEffectNoir",
"CIPhotoEffectProcess",
"CIPhotoEffectTonal",
"CIPhotoEffectTransfer",
"CISepiaTone"
]
Sie müssen nicht mehr selectedImage sagen, aber die folgenden CIFilterNames sollten nicht mit Klein- oder Großbuchstaben verwechselt werden. Dieses Mal werde ich nur 8 Typen verwenden. Das hier beschriebene CI ~ ist im Apple Core Image Filter-Referenzhandbuch definiert. Ich möchte diese in Zellen verwenden, also werde ich sie in ein Array einfügen. Es spielt keine Rolle, ob es nicht separat geschrieben wurde oder 8 oder mehr Typen in Ordnung sind. Bitte fügen Sie jedes hinzu, wie Sie möchten. Referenz: Core Image Filter Reference
Reflektieren Sie nach dem Hinzufügen das im vorherigen (View Controller) ausgewählte Bild mit viewDidLoad, damit alle sichtbar sind. Erstellen Sie dann eine Funktion für die Verarbeitung, die in der Zelle verwendet werden soll.
FilterCollectionView.swift
override func viewDidLoad() {
super.viewDidLoad()
filterPhoto.image = selectedImage
filterPhoto.contentMode = .scaleAspectFill
}
func resizeImage(image: UIImage, newWidth: CGFloat) -> UIImage {
let scale = newWidth / image.size.width
let newHeight = image.size.height * scale
UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
image.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
numberOfItemsInSection zählt die Anzahl der CIFilterNames. Ich zähle hier 8. Legen Sie in cellForItemAt fest, während Sie FilterCollectionViewCell verwenden. In newImage wird die Größe mithilfe der oben definierten Funktion resizeImage angepasst und für jede Zelle ein neues Filterbild festgelegt. In ciImage wird das zum Filtern ausgewählte Bild auf CIImage gesetzt. Und ciImage setzt im Filter so viele wie CIFilterNames. Danach habe ich ein neues CGImage erstellt, es zu einem UIImage gemacht und es in der Zelle festgelegt. didSelectItemAt ist der gleiche Prozess.
FilterCollectionView.swift
extension FilterViewController: UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return CIFilterNames.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FilterCollectionViewCell", for: indexPath) as! FilterCollectionViewCell
let context = CIContext(options: nil)
let newImage = resizeImage(image: selectedImage, newWidth: 150)
let ciImage = CIImage(image: newImage)
let filter = CIFilter(name: CIFilterNames[indexPath.item])
filter?.setValue(ciImage, forKey: kCIInputImageKey)
if let filteredImage = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
let result = context.createCGImage(filteredImage, from: filteredImage.extent)
cell.filterPhoto.image = UIImage(cgImage: result!)
}
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let context = CIContext(options: nil)
let ciImage = CIImage(image: selectedImage)
let filter = CIFilter(name: CIFilterNames[indexPath.item])
filter?.setValue(ciImage, forKey: kCIInputImageKey)
if let filteredImage = filter?.value(forKey: kCIOutputImageKey) as? CIImage {
let result = context.createCGImage(filteredImage, from: filteredImage.extent)
self.filterPhoto.image = UIImage(cgImage: result!)
}
}
}
Es scheint, als wäre es vorbei, wenn Sie diesen Punkt erreichen, aber so wie es ist, wird das verarbeitete und ausgewählte Bild nicht im Ansichts-Controller wiedergegeben. Daher werde ich ein neues Protokoll definieren.
FilterViewController.swift
protocol FilterViewControllerDelegate {
func updatePhoto(image: UIImage)
}
Definieren Sie Delegateigenschaften, um dieses Protokoll zu verwenden.
FilterViewController.swift
var delegate: FilterViewControllerDelegate?
Ich möchte diesen Delegaten nach der Verarbeitung an den Ansichtscontroller für das ausgewählte Bild übergeben. Klicken Sie daher auf die Schaltfläche Weiter, um es an den Delegaten weiterzuleiten.
FilterViewController.swift
@IBAction func nextBtn_TouchUpInside(_ sender: Any) {
dismiss(animated: true, completion: nil)
delegate?.updatePhoto(image: self.filterPhoto.image!)
}
Fügen Sie abschließend die folgende Verarbeitung zu ViewController.swift hinzu. Dies spiegelt das ausgewählte Bild wider.
ViewController.swift
extension ViewController: FilterViewControllerDelegate {
func updatePhoto(image: UIImage) {
self.photo.image = image
}
}
- Am Ende
Dies ist mein erster Beitrag. Der Inhalt dieser Verarbeitungs-App wurde aus dem folgenden Udemy-Kurs erstellt.
https://www.udemy.com/course/build-instagram-to-master-swift-and-firebase/
Überseekurse sind schwierig, aber die Qualität ist sehr hoch, daher kann ich es nur empfehlen. Niemand hat geschrieben, wie man einen Verarbeitungsantrag stellt, deshalb habe ich ihn vorgestellt. Ich denke, wenn Sie es weiter modifizieren, können Sie eine Anwendung auf kommerzieller Ebene erstellen. Sie sollten wissen, dass es nicht so schwierig ist. Ich hoffe, es ist nützlich für Anfänger, die daran interessiert sind, einen Bearbeitungsantrag zu stellen.
Wenn es von nun an Inhalte gibt, die noch niemand gepostet hat, werde ich sie jedes Mal zur gleichen Zeit wie die Ausgabe einführen. Vielen Dank.
Recommended Posts