iOS 7/8 Passcode screen visual effect - ios

Wondering if anyone has any insight on how this effect is achieved. Specifically the circles around the numbers, how you can see through the rim of the circle onto the blurred background behind it. And the brightness is maintained even after the dark overlay appears on the layer between the numbers and the original background.
This is the screen that is presented when the user attempts to unlock their iPhone.

In iOS 8 this can be done with UIVibrancyEffect:
UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *viewWithBlurredBackground = [[UIVisualEffectView alloc] initWithEffect:effect];
viewWithBlurredBackground.frame = self.view.bounds;
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:effect];
UIVisualEffectView *viewWithVibrancy = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
viewWithVibrancy.frame = self.view.bounds;
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button addTarget:self action:#selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
button.layer.cornerRadius = 40;
button.layer.borderWidth = 1.2;
button.layer.borderColor = [UIColor whiteColor].CGColor;
button.frame = CGRectMake(100, 100, 80, 80);
[viewWithVibrancy.contentView addSubview:button];
[viewWithBlurredBackground.contentView addSubview:viewWithVibrancy];
[self.view addSubview:viewWithBlurredBackground];
NSMutableAttributedString *titleString = [[NSMutableAttributedString alloc] initWithString:#"2\nA B C"];
[titleString addAttribute:NSForegroundColorAttributeName value:[UIColor whiteColor] range:(NSRange){0, titleString.length}];
[titleString addAttribute:NSFontAttributeName value:[UIFont fontWithName:#"HelveticaNeue-Thin" size:32] range:[titleString.string rangeOfString:#"2"]];
[titleString addAttribute:NSFontAttributeName value:[UIFont fontWithName:#"HelveticaNeue-Thin" size:10] range:[titleString.string rangeOfString:#"A B C"]];
// Add UILabel on top of the button, in order to avoid UIVibrancyEffect for text.
// If you don't need it, just call [button setAttributedTitle:titleString forState:UIControlStateNormal];
UILabel *notVibrancyLabel = [[UILabel alloc] init];
notVibrancyLabel.attributedText = titleString;
notVibrancyLabel.textAlignment = NSTextAlignmentCenter;
notVibrancyLabel.numberOfLines = 2;
notVibrancyLabel.frame = button.frame;
[self.view addSubview:notVibrancyLabel];
Also you need change background color when button is pressed.
- (void)buttonPressed:(id)sender
{
UIButton *button = sender;
// Of course, this is just an example. Better to use subclass for this.
[UIView animateWithDuration:0.2 animations:^
{
button.backgroundColor = [UIColor whiteColor];
} completion:^(BOOL finished)
{
[UIView animateWithDuration:0.2 animations:^
{
button.backgroundColor = [UIColor clearColor];
}];
}];
}
Result:

Related

Displaying a custom line over view

Hi I want to show a line in over view like given image.
But when i am doing this i m getting line in complete view .
My code-
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(2,30, _MovetoSearch.frame.size.width, 1)];
lineView.backgroundColor = [UIColor whiteColor];
[_MovetoSearch addSubview:lineView];
How to make line like above image ?
When you set child view frame that time always set it using parent view frame so if in future you can change parent frame then no need to change child frame its automatically change as per parent view like I write as follow.
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(_MovetoSearch.frame.origin.x+2,_MovetoSearch.frame.size.height-5, _MovetoSearch.frame.size.width-30, 1)];
lineView.backgroundColor = [UIColor whiteColor];
[_MovetoSearch addSubview:lineView];
I assume your searchBtn is having similar kind of code
UIButton *searchBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[searchBtn setFrame:CGRectMake(_MovetoSearch.frame.size.width-32, 0, 32, 32)];
[searchBtn setImage:[UIImage imageNamed:#"search.png"] forState:UIControlStateNormal];
[searchBtn setImage:[UIImage imageNamed:#"search.png"] forState:UIControlStateHighlighted];
[searchBtn addTarget:self action:#selector(searchBtnPressed) forControlEvents:UIControlEventTouchUpInside];
For your UITextField should be
CGFloat fieldHeight = searchBtn.frame.size.height-2;
CGFloat fieldWidth = _MovetoSearch.frame.size.width - (searchBtn.frame.size.width + 4);
UITextField *textfield = [[UITextField alloc] initWithFrame:CGRectMake(2, 0, fieldWidth, fieldHeight)];
[textfield setBackgroundColor:[UIColor clearColor]];
[textfield setBorderStyle:UITextBorderStyleNone];
[textfield setNeedsDisplay];
[_MovetoSearch addSubview:textfield];
for line view
CGFloat fieldHeight = searchBtn.frame.size.height-2;
CGFloat fieldWidth = _MovetoSearch.frame.size.width - (searchBtn.frame.size.width + 4);
UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(2, fieldHeight+1, fieldWidth, 1)];
lineView.backgroundColor = [UIColor whiteColor];
[_MovetoSearch addSubview:lineView];
Hope it will work for you
I would suggest to use layer for such task and not overuse UIView.
CALayer * lineLayer = [CALayer alloc]init];
[lineLayer setFrame:CGRectMake(x,y,width,1)];
[lineLayer setBackgroundColor:[UIColor whiteColor].CGColor];
[self.view.layer addSublayer:lineLayer];

Shadow on UIButton text only (not background)

I have a set of UIButtons with background colors. when the user taps one, I want only the button's text to have a shadow all around it (to show that it has been selected). However, when I add the shadow, the shadow appears over the whole button (background and all), and not just the text. Is there an easier workaround to this than just adding a UILabel over a blank button?
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
...
[button setBackgroundColor:[UIColor blueColor]];
[button.layer setShadowRadius:8.0];
[button.layer setShadowColor:[[UIColor orangeColor] CGColor]];
[button.layer setShadowOpacity:0];
...
Here is the simple way to add shadow to the button title with shadow radius property available in Objective-C:
#import <QuartzCore/QuartzCore.h>
button.titleLabel.layer.shadowOffset = CGSizeMake(2.0, 2.0);
button.titleLabel.layer.shadowColor = [UIColor colorWithWhite:0.1 alpha:0.7].CGColor;
button.titleLabel.layer.shadowRadius = 2.0;
button.titleLabel.layer.shadowOpacity = 1.0;
button.titleLabel.layer.masksToBounds = NO;
Swift ..
Say you override the UIButton class ..
titleLabel!.layer.shadowColor = UIColor.black.cgColor
titleLabel!.layer.shadowOffset = CGSize(width: -0.5, height: 0.5)
titleLabel!.layer.shadowOpacity = 1.0
titleLabel!.layer.shadowRadius = 0
titleLabel!.layer.masksToBounds = false
You need to use setTitleShadowColor: forState: and shadowOffset property of UIButton.
below code will add shadow only to button label whenever user tap on button.
UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem];
[button setBackgroundColor:[UIColor blueColor]];
button.frame = CGRectMake(50, 70, 200, 100);
[button setTitle:#"Test Button" forState:UIControlStateNormal];
[button.titleLabel setFont:[UIFont systemFontOfSize:45]];
[button setTitleShadowColor:[UIColor redColor] forState:UIControlStateHighlighted];
[button.titleLabel setShadowOffset:CGSizeMake(2.0, 2.0)];
Hope this will help.
Just set the shadow on the titleLabel property of the UIButton rather than what you're doing now.
eg
button.titleLabel.shadowColor = ((selectionState) ?[UIColor orangeColor] : [UIColor clearColor] );
button.titleLabel.shadowOffset = CGSizeMake (1.5,1.5);
For 2018
This does not work. Use the answer of #Userich
One way to do this is to use attributed strings for the normal and highlighted titles. You can create an NSShadow object, and assign that as the value for the NSShadowAttributeName. This gives you control over the properties of the shadow. To keep the title from dimming, you should set the button type to Custom instead of System.
- (void)viewDidLoad {
[super viewDidLoad];
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowColor = [UIColor darkGrayColor];
shadow.shadowOffset = CGSizeMake(2, 2);
shadow.shadowBlurRadius = 2;
NSString *titleString = #"Title";
NSAttributedString *normalTitle = [[NSAttributedString alloc] initWithString:titleString];
NSAttributedString *highlightedTitle = [[NSAttributedString alloc] initWithString:titleString attributes:#{NSShadowAttributeName:shadow}];
[self.button setAttributedTitle:normalTitle forState:UIControlStateNormal];
[self.button setAttributedTitle:highlightedTitle forState:UIControlStateHighlighted];
}

Dismiss custom alert view iOS

I'm setting up a subclass of UIView to roll my own UIAlertView style view. I've got everything set up properly with displaying the view, but I'm at a bit of a loss as to how to dismiss the view properly. Specifically, when a user taps on the button in the view, it needs to animate out of the main view. This is the code for the view itself:
+ (void)showCustomAlertWithTitle:(NSString *)titleString andMessage:(NSString *)messageString inView:(UIView *)view andButton1Title: (NSString *)button1Title andButton2Title: (NSString *)button2Title
{
UIWindow *window = [[[UIApplication sharedApplication] windows] lastObject];
CGRect windowFrame = window.frame;
[view setAlpha:0.5f];
UIColor *buttonColor = [UIColor colorWithRed:0/255.0f green:130/255.0f blue:216/255.0f alpha:1];
UIColor *titleColor = [UIColor colorWithRed:0/255.0f green:153/255.0f blue:102/255.0f alpha:1];
// Shade
UILabel *shadeWindow = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, windowFrame.size.width, windowFrame.size.height)];
shadeWindow.backgroundColor = [UIColor blackColor];
shadeWindow.alpha = 0.50f;
// Define size and origin of alert box
float alertBoxHeight = 225;
float alertBoxWidth = 200;
float alertBoxXorigin = windowFrame.size.width / 2 - (alertBoxWidth / 2);
float alertBoxYorigin = windowFrame.size.height / 2 - (alertBoxHeight / 2);
// Initialize background
UIView *alertBackground = [[UIView alloc] initWithFrame:CGRectMake(alertBoxXorigin, alertBoxYorigin, alertBoxWidth, alertBoxHeight)];
alertBackground.layer.cornerRadius = 5.0f;
[alertBackground.layer setMasksToBounds:YES];
alertBackground.layer.backgroundColor = [UIColor whiteColor].CGColor;
// Title Label
UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, alertBoxWidth, 40)];
titleLabel.text = titleString;
titleLabel.textAlignment = NSTextAlignmentCenter;
titleLabel.textColor = titleColor;
titleLabel.layer.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.05f].CGColor;
[titleLabel setFont:[UIFont fontWithName:#"AvenirNext-Bold" size:20.0]];
// Title Divider
UILabel *titleDivider = [[UILabel alloc] initWithFrame:CGRectMake(0, 40, alertBoxWidth, 1.0)];
titleDivider.backgroundColor = [UIColor grayColor];
titleDivider.alpha = 0.5f;
// Alert Message Text
UITextView *alertMessage = [[UITextView alloc] initWithFrame:CGRectMake(0, 40, alertBoxWidth, alertBoxHeight - 90)];
alertMessage.text = messageString;
alertMessage.layer.backgroundColor = [UIColor whiteColor].CGColor;
[alertMessage setFont:[UIFont fontWithName:#"Avenir" size:15.0]];
alertMessage.textAlignment = NSTextAlignmentCenter;
alertMessage.textColor = [UIColor grayColor];
[alertMessage setEditable:NO];
// Button 1
UIButton *button1 = [[UIButton alloc] init];
UIButton *button2 = [[UIButton alloc] init];
[button1 addTarget:self action:#selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
if (button2Title == nil)
{
button1.frame = CGRectMake(10, alertBoxHeight - 50, alertBoxWidth - 20, 40);
}
else
{
button1.frame = CGRectMake(10, alertBoxHeight - 50, (alertBoxWidth / 2) - 20, 40);
button2.frame = CGRectMake(alertBoxWidth / 2 + 10, alertBoxHeight - 50, (alertBoxWidth / 2) - 20, 40);
}
button1.layer.backgroundColor = buttonColor.CGColor;
[button1 setTitle:button1Title forState:UIControlStateNormal];
[button1.titleLabel setFont:[UIFont fontWithName:#"AvenirNext-Bold" size:15.0f]];
button1.layer.cornerRadius = 2.5f;
[button1.layer setMasksToBounds:YES];
// Button 2
button2.layer.backgroundColor = buttonColor.CGColor;
[button2 setTitle:button2Title forState:UIControlStateNormal];
[button2.titleLabel setFont:[UIFont fontWithName:#"AvenirNext-Bold" size:15.0f]];
button2.layer.cornerRadius = 2.5f;
[button2.layer setMasksToBounds:YES];
// Bounce Implementation
alertBackground.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.25 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^
{
alertBackground.transform = CGAffineTransformIdentity;
}
completion:^(BOOL finished)
{
// do something once the animation finishes, put it here
}];
[window addSubview:view];
[window addSubview:alertBackground];
[view addSubview:shadeWindow];
[view bringSubviewToFront:alertBackground];
[alertBackground addSubview:button1];
[alertBackground addSubview:titleLabel];
[alertBackground addSubview:titleDivider];
[alertBackground addSubview:alertMessage];
[alertBackground addSubview:button2];
[alertBackground bringSubviewToFront:titleDivider];
/* [[[customAlerts sharedInstance] subViewArray] addObject:alertBackground];
[[[customAlerts sharedInstance] subViewArray] addObject:view];
[[[customAlerts sharedInstance] subViewArray] addObject:window];*/
}
When button1 is tapped, for instance, I need to have it animate the view out of the superView and remove it from the stack. I'm not sure how to handle this. Does anyone have any ideas?
To permanently remove a view, I generally use the UIView instance method removeFromSuperview. followed by a line setting the relevant variable to nil:
[myAlertView removeFromSuperview];
myAlertView = nil;
In your case then, I think you need to move the view off the screen by animating the its bounds property, then use the above couple of lines to remove any references to it.
Just found the answer here:
Dismiss view controller from #selector without creating seperate method
Had to download some custom classes but it worked:
[button1 addEventHandler:^(id sender, UIEvent *event)
{
[UIView animateWithDuration:0.25f animations:^{
[alertBackground setAlpha:0.0f];
[shadeWindow setAlpha:0.0f];
[window setAlpha:0.0f];
}];
} forControlEvent:UIControlEventTouchUpInside];
Custom classes can be found here:
https://github.com/ZeR0-Wu/JTTargetActionBlock

UILabel causes app to crash when added to view (Xcode 6 and iOS 8 only)

I have transitioned my project to Xcode 6 in order to build for iOS 8. However, a particular UILabel is causing the app to crash when it is added to the view hierarchy. This is the only error log I receive:
-[MyViewController _contentInsetsFromFonts]: unrecognized selector sent to instance 0x16d90da0
I have been unable to locate the contentInsetsFromFonts method anywhere in my project. Additionally, I have not even been able to find a reference for it anywhere online, including Apple's documentation. I am not using a NIB for this UIViewController so the UI is built in the loadView method:
- (void)loadView {
UIImage *trackImage = [UIImage imageNamed:#"sliderTrack.png"];
sliderBackground = [[UIImageView alloc] initWithImage:trackImage];
UIView *view = [[UIView alloc] initWithFrame:sliderBackground.frame];
[view addSubview:sliderBackground];
slider = [[UISlider alloc] initWithFrame:sliderBackground.frame];
CGRect sliderFrame = slider.frame;
sliderFrame.size.width -= 46;
slider.frame = sliderFrame;
slider.center = sliderBackground.center;
slider.backgroundColor = [UIColor clearColor];
[slider setMinimumTrackImage:[UIImage imageNamed:#"sliderMaxMinTrackImage.png"] forState:UIControlStateNormal];
[slider setMaximumTrackImage:[UIImage imageNamed:#"sliderMaxMinTrackImage.png"] forState:UIControlStateNormal];
UIImage *thumbImage = [UIImage imageNamed:#"cancel-slider.png"];
[slider setThumbImage:thumbImage forState:UIControlStateNormal];
slider.minimumValue = 0.0;
slider.maximumValue = 1.0;
slider.continuous = YES;
slider.value = 0.0;
// Set the slider action methods
[slider addTarget:self
action:#selector(sliderUp:)
forControlEvents:UIControlEventTouchUpInside];
[slider addTarget:self
action:#selector(sliderDown:)
forControlEvents:UIControlEventTouchDown];
[slider addTarget:self
action:#selector(sliderChanged:)
forControlEvents:UIControlEventValueChanged];
NSString *labelText = #"label text";
UIFont *labelFont;
NSString *osVersion = [[UIDevice currentDevice] systemVersion];
if ([osVersion floatValue] >= 7.0) {
labelFont = [UIFont systemFontOfSize:22.0];
} else {
labelFont = [UIFont systemFontOfSize:24.0];
}
CGSize labelSize = [labelText sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:labelFont, NSFontAttributeName, nil]];
label = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, labelSize.width, labelSize.height)];
CGFloat labelHorizontalCenter = slider.center.x + (thumbImage.size.width / 2);
label.center = CGPointMake(labelHorizontalCenter, slider.center.y);
// Set other label attributes and add it to the view
label.textColor = [UIColor whiteColor];
label.textAlignment = NSTextAlignmentCenter;
label.backgroundColor = [UIColor clearColor];
label.font = labelFont;
label.text = labelText;
[view addSubview:label];
[view addSubview:slider];
label.layer.delegate = self;
self.view = view;
}
The app does not crash at [view addSubview:label]; it crashes after the loadView method returns.
From the UIView documentation:
Never change the delegate of this layer object.
Delete this line:
label.layer.delegate = self;
Whatever you're trying to accomplish here, you'll need to do in another way.

How can i add a stylish white color uialertview with activity indicator

when i press one button i have to display one white color uialertview with activity indicator for 5 seconds ?
i saw some codes and i select the following code ,is that enough? how can i change the color of activity indicator
myAlertView = [[UIAlertView alloc] initWithTitle:#"Loading" message:#"\n\n"
delegate:self
cancelButtonTitle:#""
otherButtonTitles:#"OK", nil];
UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc]
initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
loading.frame=CGRectMake(150, 150, 16, 16);
[myAlertView addSubview:loading];
i want something like in this image with uiactivity indicator
You can create a custom alert like follow (PS: i had developed this custom alert after 3 hours of working, its compatible with iPhone4, iPhone5 and iPad ):
-(void)showAlert{
alertViewView = [[UIView alloc]initWithFrame:self.window.frame];
UIImageView *alertBackground = [[UIImageView alloc]initWithFrame:CGRectMake(-200, -200, self.window.frame.size.width*2, self.window.frame.size.height*2)];
// alertBackground.image = [UIImage imageNamed:#"alertBackGround.png"];
[alertViewView addSubview:alertBackground];
alertBackground.backgroundColor = [UIColor blackColor];
alertBackground.alpha = 0.5;
UIImageView *alertImage = [[UIImageView alloc]initWithFrame:CGRectMake(self.window.frame.size.width/2-310/2, self.window.frame.size.height/2-179/2, 310, 248)];
alertImage.image = [UIImage imageNamed:#"rommanAlertBig.png"];
[alertViewView addSubview:alertImage];[alertBackground release];[alertImage release];
UIButton *lButton = [UIButton buttonWithType:UIButtonTypeCustom];
lButton.frame = CGRectMake(self.view.frame.size.width/2-150+40-15, self.view.frame.size.height/2-179/2+118 , 120, 41);
[lButton setTitle:#"Cancel" forState:UIControlStateNormal];
[lButton addTarget:self action:#selector(removeAlert) forControlEvents:UIControlEventTouchUpInside];
[alertViewView addSubview:lButton];
UIButton *rButton = [UIButton buttonWithType:UIButtonTypeCustom];
rButton.frame = CGRectMake(self.view.frame.size.width/2-150+170-15, self.view.frame.size.height/2-179/2+118 , 120, 41);
[rButton setTitle:#"OK" forState:UIControlStateNormal];
[rButton addTarget:self action:#selector(yesAction) forControlEvents:UIControlEventTouchUpInside];
[alertViewView addSubview:rButton];
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(self.window.frame.size.width/2-310/2+30, self.window.frame.size.height/2-179/2+75, 260, 40+69)];
lbl.text = #"Description";
lbl.textColor = [UIColor whiteColor];
lbl.textAlignment =UITextAlignmentCenter;
lbl.numberOfLines = 0;
lbl.font = [UIFont systemFontOfSize:17.0];
lbl.backgroundColor = [UIColor clearColor];
[alertViewView addSubview:lbl];[lbl release];
[self.window addSubview:alertViewView];
alertViewView.alpha = 0;
[UIView animateWithDuration:0.1 animations:^{alertViewView.alpha = 1.0;}];
alertViewView.layer.transform = CATransform3DMakeScale(0.5, 0.5, 1.0);
CAKeyframeAnimation *bounceAnimation = [CAKeyframeAnimation animationWithKeyPath:#"transform.scale"];
bounceAnimation.values = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.5],
[NSNumber numberWithFloat:1.1],
[NSNumber numberWithFloat:0.8],
[NSNumber numberWithFloat:1.0], nil];
bounceAnimation.duration = 0.3;
bounceAnimation.removedOnCompletion = NO;
[alertViewView.layer addAnimation:bounceAnimation forKey:#"bounce"];
alertViewView.layer.transform = CATransform3DIdentity;
}
-(void)removeAlert{
for (UIView *v in [alertViewView subviews]) {
[v removeFromSuperview];
}
[alertViewView removeFromSuperview];
[alertViewView release];
}
-(void)yesAction
{ [self removeAlert];
// Your Code here
}
Change color of activity indicator
In iOS 5.0 and up you can use setColor: on the UIActivityIndicatorView to set a custom color.
MAke a custom alertview
make a subclass
In drawrect draw white color on top of the view part
Why not use the class you took the picture from? https://github.com/m1entus/WCAlertView
For the ActivityIndicator you can just drag one out with the IB and change its color. Then do something like :
[activityindicator startanimating];
//put alert code here
// choose when you want to stop the animation:
//[activityindicator stopanimating];

Resources