What is the android.widget.Toast equivalent for iOS applications? - ios

I have made Android application a few months ago. The Toast class is very useful for me.
I do not need to consider the main Thread and place to show it. Anywhere I can show it and just leave that and it is automatically disappeared.
Toast.makeToast(context, msg, Toast.LENGTH_SHORT).show();
That's it. ^^
What about iPhone? Is there something like the Toast? Just show message and do not need to care about it. It will be automatically disappeared.

I've been writing for Android for a long time and I am missing Toast. I've implemented one. Need code? here you are:
ToastView.h
#import <UIKit/UIKit.h>
#interface ToastView : UIView
#property (strong, nonatomic) NSString *text;
+ (void)showToastInParentView: (UIView *)parentView withText:(NSString *)text withDuaration:(float)duration;
#end
ToastView.m
#import "ToastView.h"
#interface ToastView ()
#property (strong, nonatomic, readonly) UILabel *textLabel;
#end
#implementation ToastView
#synthesize textLabel = _textLabel;
float const ToastHeight = 50.0f;
float const ToastGap = 10.0f;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
}
return self;
}
-(UILabel *)textLabel
{
if (!_textLabel) {
_textLabel = [[UILabel alloc] initWithFrame:CGRectMake(5.0, 5.0, self.frame.size.width - 10.0, self.frame.size.height - 10.0)];
_textLabel.backgroundColor = [UIColor clearColor];
_textLabel.textAlignment = NSTextAlignmentCenter;
_textLabel.textColor = [UIColor whiteColor];
_textLabel.numberOfLines = 2;
_textLabel.font = [UIFont systemFontOfSize:13.0];
_textLabel.lineBreakMode = NSLineBreakByCharWrapping;
[self addSubview:_textLabel];
}
return _textLabel;
}
- (void)setText:(NSString *)text
{
_text = text;
self.textLabel.text = text;
}
+ (void)showToastInParentView: (UIView *)parentView withText:(NSString *)text withDuaration:(float)duration;
{
//Count toast views are already showing on parent. Made to show several toasts one above another
int toastsAlreadyInParent = 0;
for (UIView *subView in [parentView subviews]) {
if ([subView isKindOfClass:[ToastView class]])
{
toastsAlreadyInParent++;
}
}
CGRect parentFrame = parentView.frame;
float yOrigin = parentFrame.size.height - (70.0 + ToastHeight * toastsAlreadyInParent + ToastGap * toastsAlreadyInParent);
CGRect selfFrame = CGRectMake(parentFrame.origin.x + 20.0, yOrigin, parentFrame.size.width - 40.0, ToastHeight);
ToastView *toast = [[ToastView alloc] initWithFrame:selfFrame];
toast.backgroundColor = [UIColor darkGrayColor];
toast.alpha = 0.0f;
toast.layer.cornerRadius = 4.0;
toast.text = text;
[parentView addSubview:toast];
[UIView animateWithDuration:0.4 animations:^{
toast.alpha = 0.9f;
toast.textLabel.alpha = 0.9f;
}completion:^(BOOL finished) {
if(finished){
}
}];
[toast performSelector:#selector(hideSelf) withObject:nil afterDelay:duration];
}
- (void)hideSelf
{
[UIView animateWithDuration:0.4 animations:^{
self.alpha = 0.0;
self.textLabel.alpha = 0.0;
}completion:^(BOOL finished) {
if(finished){
[self removeFromSuperview];
}
}];
}
#end
Call from ViewController
[ToastView showToastInParentView:self.view withText:#"What a toast!" withDuaration:5.0];

There is no class "out-of-the-box" in UIKit to do this. But it is quite easy to create a class that will offer this behavior.
You just have to create a class that inherit from UIView. This class will have the responsibility
- to create what you want to display,
- to add itself in parent view hierarchy
- to dismiss itself using a timer.
You will be able to use it like :
[ToastView toastViewInView:myParentView withText:#"what a wonderful text"];
Regards,
Quentin

Have not tried but you might want to check:
https://github.com/ecstasy2/toast-notifications-ios
https://github.com/scalessec/Toast

You can do this in many ways one of the way is using UIAlertViewController() in swift3
let alertManager=UIAlertController(title: nil, message: "Welcome!", preferredStyle: .alert)
self.present(alertManager, animated: true, completion: nil)
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+1,
execute: {
alertManager.dismiss(animated: false, completion: nil)
})

Edit: Updated for Swift 3
Here is a Swift 3 version based on wojciech_maciejewski's answer. This looks more like Android Toast and doesn't stack toasts on each other. It draws toast into the center of the screen. It can handle long multiline texts.
import UIKit
class ToastView: UIView {
private static let hLabelGap: CGFloat = 40.0
private static let vLabelGap: CGFloat = 20.0
private static let hToastGap: CGFloat = 20.0
private static let vToastGap: CGFloat = 10.0
private var textLabel: UILabel!
static func showInParent(_ parentView: UIView, _ text: String, duration: Double = 3.0) {
let labelFrame = CGRect(x: parentView.frame.origin.x + hLabelGap,
y: parentView.frame.origin.y + vLabelGap,
width: parentView.frame.width - 2 * hLabelGap,
height: parentView.frame.height - 2 * vLabelGap)
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 15.0)
label.text = text
label.backgroundColor = UIColor.clear
label.textAlignment = NSTextAlignment.center
label.textColor = UIColor.white
label.numberOfLines = 0
label.frame = labelFrame
label.sizeToFit()
let toast = ToastView()
toast.textLabel = label
toast.addSubview(label)
toast.frame = CGRect(x: label.frame.origin.x - hToastGap,
y: label.frame.origin.y - vToastGap,
width: label.frame.width + 2 * hToastGap,
height: label.frame.height + 2 * vToastGap)
toast.backgroundColor = UIColor.darkGray
toast.alpha = 0.0
toast.layer.cornerRadius = 20.0
toast.center = parentView.center
label.center = CGPoint(x: toast.frame.size.width / 2, y: toast.frame.size.height / 2)
parentView.addSubview(toast)
UIView.animate(withDuration: 0.4, animations: {
toast.alpha = 0.9
label.alpha = 0.9
})
toast.perform(#selector(hideSelf), with: nil, afterDelay: duration)
}
#objc private func hideSelf() {
UIView.animate(withDuration: 0.4, animations: {
self.alpha = 0.0
self.textLabel.alpha = 0.0
}, completion: { t in self.removeFromSuperview() })
}
}
Usage from another controller:
ToastView.showInParent(navigationController!.view, "Hello world")

I'm posting swift version of Scarmysun answer:) many thanks
import Foundation
import UIKit
class ToastView: UIView {
static let toastHeight:CGFloat = 50.0
static let toastGap:CGFloat = 10;
lazy var textLabel: UILabel = UILabel(frame: CGRectMake(5.0, 5.0, self.frame.size.width - 10.0, self.frame.size.height - 10.0))
static func showInParent(parentView: UIView!, withText text: String, forDuration duration: double_t) {
//Count toast views are already showing on parent. Made to show several toasts one above another
var toastsAlreadyInParent = 0;
for view in parentView.subviews {
if (view.isKindOfClass(ToastView)) {
toastsAlreadyInParent++
}
}
var parentFrame = parentView.frame;
var yOrigin = parentFrame.size.height - getDouble(toastsAlreadyInParent)
var selfFrame = CGRectMake(parentFrame.origin.x + 20.0, yOrigin, parentFrame.size.width - 40.0, toastHeight);
var toast = ToastView(frame: selfFrame)
toast.textLabel.backgroundColor = UIColor.clearColor()
toast.textLabel.textAlignment = NSTextAlignment.Center
toast.textLabel.textColor = UIColor.whiteColor()
toast.textLabel.numberOfLines = 2
toast.textLabel.font = UIFont.systemFontOfSize(13.0)
toast.addSubview(toast.textLabel)
toast.backgroundColor = UIColor.darkGrayColor()
toast.alpha = 0.0;
toast.layer.cornerRadius = 4.0;
toast.textLabel.text = text;
parentView.addSubview(toast)
UIView.animateWithDuration(0.4, animations: {
toast.alpha = 0.9
toast.textLabel.alpha = 0.9
})
toast.performSelector(Selector("hideSelf"), withObject: nil, afterDelay: duration)
}
static private func getDouble(toastsAlreadyInParent : Int) -> CGFloat {
return (70.0 + toastHeight * CGFloat(toastsAlreadyInParent) + toastGap * CGFloat(toastsAlreadyInParent));
}
func hideSelf() {
UIView.animateWithDuration(0.4, animations: {
self.alpha = 0.0
self.textLabel.alpha = 0.0
}, completion: { t in self.removeFromSuperview() })
}
}

Related

How to implement UI like iCarousel Rotary type, Objective-C?

I want to implement this type of UI (Horizontal Scrolling).
I know its kind of "iCarousel", Type = iCarouselTypeRotary. I tried with this library but I am getting this type UI. I cant able to customize fully:
If anyone know how to do this UI in native way orelse any library, please let me know. Any inputs will be appreciated.
The iCarousel library provides the iCarouselTypeCustom type.
The following is a custom example.
override func awakeFromNib() {
super.awakeFromNib()
for i in 0 ... 6 {
items.append(i)
}
}
override func viewDidLoad() {
super.viewDidLoad()
carousel.type = .custom
}
func numberOfItems(in carousel: iCarousel) -> Int {
return items.count
}
func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
var label: UILabel
var itemView: UIImageView
if let view = view as? UIImageView {
itemView = view
label = itemView.viewWithTag(1) as! UILabel
} else {
itemView = UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
itemView.image = UIImage(named: "page.png")
itemView.layer.cornerRadius = 5
itemView.contentMode = .center
label = UILabel(frame: itemView.bounds)
label.backgroundColor = .clear
label.textAlignment = .center
label.font = label.font.withSize(50)
label.tag = 1
itemView.addSubview(label)
}
label.text = "\(items[index])"
return itemView
}
func carousel(_ carousel: iCarousel, valueFor option: iCarouselOption, withDefault value: CGFloat) -> CGFloat {
switch option {
case .visibleItems:
let elemento:Int = self.carousel.currentItemIndex as Int
print(elemento)
if elemento == 0 {
return 2;
}else if elemento == items.count-1 {
return 2;
}else {
return 3;
}
default:
return value
}
}
func carousel(_ carousel: iCarousel, itemTransformForOffset offset: CGFloat, baseTransform transform: CATransform3D) -> CATransform3D {
let offsetFactor:CGFloat = self.carousel(carousel, valueFor: .spacing, withDefault: 1.25) * carousel.itemWidth
let zFactor: CGFloat = 400.0
let normalFactor: CGFloat = 0
let shrinkFactor: CGFloat = 100.0
let f: CGFloat = sqrt(offset * offset + 1)-1
var trans = transform
trans = CATransform3DTranslate(trans, offset * offsetFactor, f * normalFactor, f * (-zFactor))
trans = CATransform3DScale(trans, 1 / (f / shrinkFactor + 1.0), 1 / (f / shrinkFactor + 1.0), 1.0 )
return trans
}
func carousel(_ carousel: iCarousel, shouldSelectItemAt index: Int) -> Bool {
return true
}
Finally I did with custom view and I have achieved UI as I need it. Here, I am providing my code for someone needy.
- (void)viewDidLoad
{
[super viewDidLoad];
_iCarouselItems = [[NSMutableArray alloc]init];
for (int i = 0; i < 10; i++)
{
[_iCarouselItems addObject:#(i)];
}
self.iCarouselView.dataSource = self;
self.iCarouselView.delegate = self;
_iCarouselView.type = iCarouselTypeCustom;
dispatch_async(dispatch_get_main_queue(), ^{
[_iCarouselView reloadData];
});
}
#pragma mark iCarousel methods
- (NSInteger)numberOfItemsInCarousel:(iCarousel *)carousel
{
return [_iCarouselItems count];
}
- (UIView *)carousel:(iCarousel *)carousel viewForItemAtIndex:(NSInteger)index reusingView:(UIView *)view
{
UILabel *label = nil;
//create new view if no view is available for recycling
if (view == nil)
{
NSLog(#"viewForItemAtIndex is %ld",(long)index);
//don’t do anything specific to the index within
//this `if (view == nil) {…}` statement because the view will be
//recycled and used with other index values later
view = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 200, 200.0f)];
// ((UIImageView *)view).image = [UIImage imageNamed:#"smiley-400x400.jpg"];
view.contentMode = UIViewContentModeCenter;
view.backgroundColor = [UIColor whiteColor];
view.layer.cornerRadius = 8;
view.layer.masksToBounds = true;
view.layer.borderColor = [UIColor grayColor].CGColor;
view.layer.borderWidth = 2;
label = [[UILabel alloc] initWithFrame:view.bounds];
label.backgroundColor = [UIColor clearColor];
label.textAlignment = NSTextAlignmentCenter;
label.font = [label.font fontWithSize:50];
label.tag = 1;
[view addSubview:label];
}
else
{
//get a reference to the label in the recycled view
label = (UILabel *)[view viewWithTag:1];
}
label.text = [_iCarouselItems[index] stringValue];
return view;
}
- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:0.3]*carousel.itemWidth;
CGFloat zFactor = 400.0;
CGFloat normalFactor = 0;
CGFloat shrinkFactor = 100.0;
CGFloat f = sqrt(offset * offset + 1)-1;
transform = CATransform3DTranslate(transform, offset * offsetFactor, f * normalFactor, f * (-zFactor));
transform = CATransform3DScale(transform, 1 / (f / shrinkFactor + 1.0), 1 / (f / shrinkFactor + 1.0), 1.0 );
return transform;
}
- (BOOL)carousel:(iCarousel *)carousel shouldSelectItemAtIndex:(NSInteger)index
{
return true;
}
- (void)carousel:(iCarousel *)carousel didSelectItemAtIndex:(NSInteger)index
{
NSLog(#"Selected carouselindex is %ld",(long)index);
}
- (NSInteger)numberOfPlaceholdersInCarousel:(iCarousel *)carousel
{
//note: placeholder views are only displayed on some carousels if wrapping is disabled
return 0;
}
There are several solutions available for 3D carousels.
Take a look at that one for example:https://www.cocoacontrols.com/controls/parallaxcarousel
You can find the source code on Github. This project uses CABasicAnimation und you can install it using CocaPods.

Swift / SnappingSlider / two instances of the slider

I'm using the SnappingSlider.
I want to use two instances of the Slider and be able to change different values depending on the used Slider.
This is my current code:
import UIKit
import SnappingSlider
class ViewController: UIViewController, SnappingSliderDelegate {
private var remainingTime:Double = 0
private let remainingTimeLabel:UILabel = UILabel(frame: CGRectZero)
private let remainingTimeSlider:SnappingSlider = SnappingSlider(frame: CGRectMake(0.0, 0.0, 10.0, 10.0), title: "Slide Me")
private let percentageSlider:SnappingSlider = SnappingSlider(frame: CGRectMake(0.0, 0.0, 10.0, 10.0), title: "Slide Me")
override func viewDidLoad() {
super.viewDidLoad()
remainingTimeLabel.frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width * 0.5, 80.0)
remainingTimeLabel.center = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height * 0.21 - remainingTimeLabel.bounds.size.height * 0.75)
remainingTimeLabel.font = UIFont(name: "TrebuchetMS-Bold", size: 25.0)
remainingTimeLabel.textColor = UIColor.lightGrayColor()
remainingTimeLabel.textAlignment = NSTextAlignment.Center
remainingTimeLabel.text = "\(remainingTime)"
self.view.addSubview(remainingTimeLabel)
remainingTimeSlider.delegate = self
remainingTimeSlider.frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width * 0.9, 50.0)
remainingTimeSlider.center = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height * 0.2)
self.view.addSubview(remainingTimeSlider)
percentageSlider.delegate = self
percentageSlider.frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width * 0.9, 50.0)
percentageSlider.center = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height * 0.4)
self.view.addSubview(percentageSlider)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func snappingSliderDidIncrementValue(slider: SnappingSlider) {
remainingTime += 0.5
remainingTimeLabel.text = "\(remainingTime)"
}
func snappingSliderDidDecrementValue(slider: SnappingSlider) {
remainingTime = max(0, remainingTime - 0.5)
remainingTimeLabel.text = "\(remainingTime)"
}
}
I want to do something like this:
func snappingSliderDidIncrementValue(slider: SnappingSlider) {
if slider == sliderA {
remainingTime += 0.5
remainingTimeLabel.text = "\(remainingTime)"
} else if slider == sliderB {
integerXY = += 0.5
labelXY.text = "\(remainingTime)"
}
I have send the author of the Slider an email and got the follwing text back: You can set a single object to act as a delegate for multiple instances of the slider. So, you’d set the .delegate property of the sliders to be whatever object you have conforming to the delegate and then you’d do the check inside of the delegate callbacks exactly how you’ve shown underneath.
But I don't get it... Help is very appreciated.
Edit:
You need to do something like this:
func snappingSliderDidIncrementValue(slider: SnappingSlider) {
if slider == remainingTimeSlider {
remainingTime += 0.5
remainingTimeLabel.text = "\(remainingTime)"
}
else if slider == percentageSlider {
// do something for this slider
}
}

UISearchController with loading indicator

I implemented UISearchController and I'm getting the data from a js callback but when I tape in the searchbar it takes some time to put the data so I wanted to know how to implement a loading indicator into the table view result of UISearchController
Wrote this extension in Swift 3, which seems to work pretty well.
extension UISearchBar {
private var textField: UITextField? {
return subviews.first?.subviews.flatMap { $0 as? UITextField }.first
}
private var activityIndicator: UIActivityIndicatorView? {
return textField?.leftView?.subviews.flatMap{ $0 as? UIActivityIndicatorView }.first
}
var isLoading: Bool {
get {
return activityIndicator != nil
} set {
if newValue {
if activityIndicator == nil {
let newActivityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .gray)
newActivityIndicator.transform = CGAffineTransform(scaleX: 0.7, y: 0.7)
newActivityIndicator.startAnimating()
newActivityIndicator.backgroundColor = UIColor.white
textField?.leftView?.addSubview(newActivityIndicator)
let leftViewSize = textField?.leftView?.frame.size ?? CGSize.zero
newActivityIndicator.center = CGPoint(x: leftViewSize.width/2, y: leftViewSize.height/2)
}
} else {
activityIndicator?.removeFromSuperview()
}
}
}
}
Loading indicator on search results controller
Updated solution for iOS 13:
extension UISearchBar {
var textField: UITextField? {
if #available(iOS 13.0, *) {
return searchTextField
} else {
if let textField = value(forKey: "searchField") as? UITextField {
return textField
}
return nil
}
}
private var activityIndicator: UIActivityIndicatorView? {
return textField?.leftView?.subviews.compactMap{ $0 as? UIActivityIndicatorView }.first
}
var isLoading: Bool {
get {
return activityIndicator != nil
} set {
if newValue {
if activityIndicator == nil {
let newActivityIndicator = UIActivityIndicatorView(style: .gray)
newActivityIndicator.startAnimating()
if #available(iOS 13.0, *) {
newActivityIndicator.backgroundColor = UIColor.systemGroupedBackground
} else {
newActivityIndicator.backgroundColor = UIColor.groupTableViewBackground
}
newActivityIndicator.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
textField?.leftView?.addSubview(newActivityIndicator)
let leftViewSize = textField?.leftView?.frame.size ?? CGSize.zero
newActivityIndicator.center = CGPoint(x: leftViewSize.width/2, y: leftViewSize.height/2)
}
} else {
activityIndicator?.removeFromSuperview()
}
}
}
}
When you start searching at that time you can create an activity indicator and add it as the subview of UISearchBar using addSubView method.
UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
//set your frame for activity indicator
[searchBar addSubview: spinner];
[spinner startAnimating];
When you finish the search remove it from the search bar using removeFromSuperView method.
Please try this one. May be its helpfull to you
SearchBarWithloading.h
#import <UIKit/UIKit.h>
#interface SearchBarWithloading : UISearchBar
- (void)startActivity; // increments startCount and shows activity indicator
- (void)finishActivity; // decrements startCount and hides activity indicator if 0
#end
SearchBarWithloading.m
import "SearchBarWithloading.h"
#interface SearchBarWithloading()
#property(nonatomic) UIActivityIndicatorView *activityIndicatorView;
#property(nonatomic) int startCount;
#end
#implementation SearchBarWithloading
- (void)layoutSubviews {
UITextField *searchField = nil;
for(UIView* view in self.subviews){
if([view isKindOfClass:[UITextField class]]){
searchField= (UITextField *)view;
break;
}
}
if(searchField) {
if (!self.activityIndicatorView) {
UIActivityIndicatorView *taiv = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
taiv.center = CGPointMake(searchField.leftView.bounds.origin.x + searchField.leftView.bounds.size.width/2,
searchField.leftView.bounds.origin.y + searchField.leftView.bounds.size.height/2);
taiv.hidesWhenStopped = YES;
taiv.backgroundColor = [UIColor whiteColor];
self.activityIndicatorView = taiv;
[taiv release];
_startCount = 0;
[searchField.leftView addSubview:self.activityIndicatorView];
}
}
[super layoutSubviews];
}
- (void)startActivity {
self.startCount = self.startCount + 1;
}
- (void)finishActivity {
self.startCount = self.startCount - 1;
}
- (void)setStartCount:(int)startCount {
_startCount = startCount;
if (_startCount > 0)
[self.activityIndicatorView startAnimating];
else {
[self.activityIndicatorView stopAnimating];
}
}
#end
A cleaner solution for iOS 13 and above:
extension UISearchController {
private static let defaultLeftView: UIView = {
UISearchTextField().leftView ?? UIView()
}()
private static let leftViewSize: CGSize = {
UISearchTextField().leftView?.frame.size ?? .zero
}()
private static let loadingLeftView: UIView = {
let view = UIView(frame: .init(origin: .zero, size: leftViewSize))
let activityIndicatorView = UIActivityIndicatorView(style: .medium)
activityIndicatorView.transform = .init(scaleX: 0.9, y: 0.9)
activityIndicatorView.startAnimating()
view.addSubview(activityIndicatorView)
activityIndicatorView.center = CGPoint(x: leftViewSize.width / 2, y: leftViewSize.height / 2)
return view
}()
func startLoading() {
searchBar.searchTextField.leftView = Self.loadingLeftView
}
func stopLoading() {
searchBar.searchTextField.leftView = Self.defaultLeftView
}
}

iOS - Custom Confirmation view

I am working on creating a custom control once user presses a button and action completes. I'm trying to replicate behavior of apple music app when album is added it shows confirmation view in center with a check mark as shown below. Are there any similar cocoa controls available to use?
(swift)
Create a singleton class
class CustomView: UIView {
class var sharedView : CustomView {
struct Static {
static var instance : CustomView?
static var token : dispatch_once_t = 0
}
dispatch_once(&Static.token) {
Static.instance = CustomView()
}
return Static.instance!
}
override init(frame: CGRect) {
super.init(frame: frame)
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func showInView(view:UIWindow) {
var image = UIImage(named:"SomeImage")
self.frame = view.frame
var originX = view.center.x
var originY = view.center.y
let centerView = UIImageView()
centerView.center = CGPointMake(originX, originY)
centerView.contentMode = UIViewContentMode.Center
centerView.image = image
centerView.alpha = 0
self.addSubview(centerView)
view.addSubview(self)
UIView.animateWithDuration(1, animations: { () -> Void in
centerView.alpha = 1
}) { (_) -> Void in
UIView.animateWithDuration(1, animations: { () -> Void in
centerView.frame.size = CGSizeMake(0,0)
centerView.alpha = 0
}) { (_) -> Void in
self.hide()
}
}
}
func hide()
{
if self.superview != nil
{
self.removeFromSuperview()
}
}
}
In your viewController you can just call the method CustomView.sharedView.showInView(view:UIApplication.sharedApplication.keyWindow())
Objective c .h
#import <UIKit/UIKit.h>
#interface CustomView : UIView
+ (instancetype)sharedInstance;
-(void)showInView:(UIWindow*)view;
#end
objective c .m
#import "CustomView.h"
#implementation CustomView
+ (instancetype)sharedInstance
{
static CustomView *sharedInstance = nil;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
sharedInstance = [[CustomView alloc] init];
});
return sharedInstance;
}
- (instancetype)initWithCoder:(NSCoder *)coder
{
self = [super initWithCoder:coder];
if (self) {
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
-(void)showInView:(UIWindow*)view {
UIImage *image = [UIImage imageNamed:#"img.png"];
self.frame = view.frame;
CGFloat originX = view.center.x;
CGFloat originY = view.center.y;
UIImageView *centerView = [UIImageView new];
centerView.center = CGPointMake(originX, originY);
centerView.contentMode = UIViewContentModeCenter;
centerView.image = image;
centerView.alpha = 0;
[self addSubview:centerView];
[view addSubview:self];
[UIView animateWithDuration:1 animations:^{
centerView.alpha = 1;
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:^{
centerView.frame = CGRectMake(originX, originY, 0, 0);
centerView.alpha = 0;
} completion:^(BOOL finished) {
[self hideView];
}];
}];
}
-(void)hideView {
if(self.superview) {
[self removeFromSuperview];
}
}
#end
Import CustomView.h in your file and
[[CustomView sharedInstance] showInView:[[UIApplication sharedApplication]keyWindow]];

Sparkle effect iOS

I want to create sparkle effect over an image as shown in the video Sparkle Effect
the only way I could think of doing it animating each particle separately using core animation, but that would be inefficient as well as time consuming.
Is there any other way I can do the same?
Here is a solution from Erica Susan's cook book. See this works for you.
You can add visual interest to your interfaces by using emitters in tandem with user touches. The following class demonstrates how to follow a touch over its lifetime, adding a little sparkle to wherever the user touches on-screen.
The class begins as soon as the user touches the screen, creating an emitter layer and a single emitter cell. The cell defines the particles — their color, their birth rate, their lifetime, velocity, and so forth.
As the user's touch progresses, this class updates the emitter's location, removing the emitter once the touch is removed from the screen. Although this example is written for single touch interaction, you can easily update the code to add an array of emitters (rather than a single instance) for multi-touch interaction.
Emitters are easily added to your projects and efficient to run. While too much animation is never a good design idea, a little sparkle used judiciously can add life and movement.
#interface SparkleTouchView : UIView {
CAEmitterLayer *emitter;
}
#end
#implementation SparkleTouchView
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
float multiplier = 0.25f;
CGPoint pt = [[touches anyObject] locationInView:self];
//Create the emitter layer
emitter = [CAEmitterLayer layer];
emitter.emitterPosition = pt;
emitter.emitterMode = kCAEmitterLayerOutline;
emitter.emitterShape = kCAEmitterLayerCircle;
emitter.renderMode = kCAEmitterLayerAdditive;
emitter.emitterSize = CGSizeMake(100 * multiplier, 0);
//Create the emitter cell
CAEmitterCell* particle = [CAEmitterCell emitterCell];
particle.emissionLongitude = M_PI;
particle.birthRate = multiplier * 1000.0;
particle.lifetime = multiplier;
particle.lifetimeRange = multiplier * 0.35;
particle.velocity = 180;
particle.velocityRange = 130;
particle.emissionRange = 1.1;
particle.scaleSpeed = 1.0; // was 0.3
particle.color = [[COOKBOOK_PURPLE_COLOR colorWithAlphaComponent:0.5f] CGColor];
particle.contents = (__bridge id)([UIImage imageNamed:#"spark.png"].CGImage);
particle.name = #"particle";
emitter.emitterCells = [NSArray arrayWithObject:particle];
[self.layer addSublayer:emitter];
}
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
CGPoint pt = [[touches anyObject] locationInView:self];
// Disable implicit animations
[CATransaction begin];
[CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
emitter.emitterPosition = pt;
[CATransaction commit];
}
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
[emitter removeFromSuperlayer];
emitter = nil;
}
- (void) touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
[self touchesEnded:touches withEvent:event];
}
#end
Don't forget to create a png file named spark.png in order to create the animation.
/*Tested in swift 5.1*/
Import UIKit
enum Images {
static let box = UIImage(named: "Box")!
static let triangle = UIImage(named: "Triangle")!
static let circle = UIImage(named: "Circle")!
static let swirl = UIImage(named: "Spiral")!
}
class ActivationRequiredViewController: UIViewController {
var emitter = CAEmitterLayer()
var colors:[UIColor] = [
Colors.red,
Colors.blue,
Colors.green,
Colors.yellow
]
var images:[UIImage] = [
Images.box,
Images.triangle,
Images.circle,
Images.swirl
]
var velocities:[Int] = [
100,
90,
150,
200
]
override func viewDidLoad() {
super.viewDidLoad()
startSparkle()
}
func startSparkle() {
emitter.emitterPosition = CGPoint(x: self.view.frame.size.width / 2, y: -10)
emitter.emitterShape = CAEmitterLayerEmitterShape.line
emitter.emitterSize = CGSize(width: self.view.frame.size.width, height: 2.0)
emitter.emitterCells = generateEmitterCells()
self.view.layer.addSublayer(emitter)
}
private func generateEmitterCells() -> [CAEmitterCell] {
var cells:[CAEmitterCell] = [CAEmitterCell]()
for index in 0..<16 {
let cell = CAEmitterCell()
cell.birthRate = 4.0
cell.lifetime = 14.0
cell.lifetimeRange = 0
cell.velocity = CGFloat(getRandomVelocity())
cell.velocityRange = 0
cell.emissionLongitude = CGFloat(Double.pi)
cell.emissionRange = 0.5
cell.spin = 3.5
cell.spinRange = 0
cell.color = getNextColor(i: index)
cell.contents = getNextImage(i: index)
cell.scaleRange = 0.25
cell.scale = 0.1
cells.append(cell)
}
return cells
}
private func getRandomVelocity() -> Int {
return velocities[getRandomNumber()]
}
private func getRandomNumber() -> Int {
return Int(arc4random_uniform(4))
}
private func getNextColor(i:Int) -> CGColor {
if i <= 4 {
return colors[0].cgColor
} else if i <= 8 {
return colors[1].cgColor
} else if i <= 12 {
return colors[2].cgColor
} else {
return colors[3].cgColor
}
}
private func getNextImage(i:Int) -> CGImage {
return images[i % 4].cgImage!
}
}
For anyone doing a Mac app, here's the same concept as #thevikasnayak , for an NSViewController
import Cocoa
enum Images {
static let box = NSImage(named: "Box")!
static let triangle = NSImage(named: "Triangle")!
static let circle = NSImage(named: "Circle")!
static let swirl = NSImage(named: "Spiral")!
}
class SparkleVC: NSViewController {
var emitter = CAEmitterLayer()
var colors:[NSColor] = [
NSColor.blue.withAlphaComponent(0.1),
NSColor.blue.withAlphaComponent(0.2),
NSColor.blue.withAlphaComponent(0.3),
NSColor.blue.withAlphaComponent(0.4)]
var images:[NSImage] = [Images.box, Images.triangle, Images.circle, Images.swirl]
override func viewDidAppear() {
super.viewDidAppear()
view.wantsLayer = true
startSparkle()
}
func startSparkle() {
emitter.emitterPosition = CGPoint(x: view.bounds.size.width / 2.0, y: view.bounds.size.height / 2.0)
emitter.emitterShape = CAEmitterLayerEmitterShape.circle
emitter.emitterSize = CGSize(width: view.bounds.size.width / 4.0, height: view.bounds.size.width / 4.0)
emitter.emitterCells = generateEmitterCells()
view.layer!.addSublayer(emitter)
}
private func generateEmitterCells() -> [CAEmitterCell] {
var cells:[CAEmitterCell] = [CAEmitterCell]()
for index in 0..<16 {
let cell = CAEmitterCell()
cell.birthRate = 200.0
cell.lifetime = 0.01
cell.lifetimeRange = 0.03
cell.velocity = 5
cell.velocityRange = 2
cell.emissionLatitude = Double.random(in: 0 ..< Double.pi)
cell.emissionLongitude = Double.random(in: 0 ..< Double.pi)
cell.emissionRange = Double.pi
cell.spin = 10
cell.spinRange = 10
cell.color = colors[index/4].cgColor
cell.contents = nextImage(i: index)
cell.scaleRange = 0.2
cell.scale = 1
cells.append(cell)
}
return cells
}
private func nextImage(i:Int) -> CGImage {
return (images[i % 4]).cgImage(forProposedRect: nil, context: nil, hints: nil)!
}
}
Please check this solution.
https://github.com/GabriellaQiong/CIS581-Project2-Image-Morphing
CIwarpKernel Kets you warp an image according to reference points. That is exactly what you want to do in order to have image morphing.

Resources