iOS 8 Transparent View with non-transparent subviews - ios

I want to place non transparent content on top of a UIImageView. So I have a view with a transparent background which contains all the content. And I've placed it on top of imageview. I've set this view's background color to clearColor but still I can not get the desired effect.
This was clearly possible with iOS 6 SDK , but now I'm trying with iOS 8 SDK which does not give me what I want.
Check this app's screenshot
I'm trying to achieve similar effect (a semi transparent view) with iOS 8 SDK. However I need to set opacity very low value which makes the view almost transparent. All I could achieve was very little transparency (something like alpha 0.9 even I set 0 ).

This can be achieved by Using UIVisualEffect and UIVisualEffectView which are available from iOS 8 on.
This will provide a transparent view, as you said, without affecting the subviews.
Try this
UIVisualEffectView *blurredView =[[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
[blurredView addSubview:self.mySubView];
and you can add your subviews and image views as well.

Add your required views in the order, similar to the below code...
UIImageView* bottomImgView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
bottomImgView.image=[UIImage imageNamed:#"yourImg.png"];
[self.view bottomImgView];
UIView* topTransparentView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
topTransparentView.backgroundColor = [UIColor clearColor];
[bottomImgView addSubview:topTransparentView];
UIView* subView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
subView.backgroundColor = [UIColor blueColor];
[topTransparentView addSubview:subView];

Related

Parse Background image in loginView, not fitting to fit all iPhone device screen sizes

I am trying to get my background image to fit all screen sizes within Parse's logInView. Unfortunately this code isn't doing the trick I expect it to.
[self.logInView setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"Backgroundwithlogo.png"]]];
I have subclassed the PFLoginViewController to what I just called LoginViewController. I have tried resizing the image that i imported, but it either adjusts itself to be too big, or too small. The colorWithPatternImage will tile my image across the view if it's too small, and my background image seems to be stretched horizontally right now.
What I have tried:
I have tried implementing:
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"Backgroundwithlogo.png"]];
[self.logInView addSubview:imgView];
[self.logInView sendSubviewToBack:imgView];
imgView.contentMode = UIViewContentModeScaleAspectFit;`
with no avail. I have read the Parse Guidelines Here. But they don't cover this issue with sizing problems inside the UI. Any help would be greatly appreciated.
UIImageView *imgView = [[UIImageView alloc] initWithFrame:[UIScreen mainScreen].bounds];
imgView.image = [UIImage imageNamed:#"Backgroundwithlogo.png"];
[self.logInView addSubview:imgView];
[self.logInView sendSubviewToBack:imgView];
Also, you may need a specific contentMode.

Custom navbar sizing from iphone 5 to iphone 6

I have a custom tab bar that was optimized for the iphone 5.
UINavigationBar *myBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
[self.view addSubview:myBar];
When it on the iphone 6, part of it is cut off of course because it only goes to 320 pixels.
How do i fix this? Is there a way to check which iphone its being ran on, and then run the pixel specified code? I plan on putting a background image on this navbar later so it must be centered.
In general it is a bad idea to hard code dimensions like this. This will break if you rotate, or if viewed on a screen with a different size than the original iPhone screen.
Many of these controls have a default size that you can use to your advantage. Instead of handing it a frame, consider just modifying the frame it gives you:
UINavigationBar *myBar = [[UINavigationBar alloc] init];
CGRect navBarFrame = myBar.frame;
navBarFrame.size.height // returns the right size for the current OS
navBarFrame.size.width = self.view.frame.size.width;
myBar.frame = navBarFrame;
This type of defensive coding is helpful in keeping your app laid out properly under many conditions, including when you embed this control into a parent view controller, or viewed on tomorrows larger-screened iOS devices.
All this said, are you sure you don't want a UIToolbar? Typically you don't ever create your own UINavigationBar, as that class is just used in UINavigationController for you.
UINavigationBar *myBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 50)];
[self.view addSubview:myBar];
may be this help you.

Strange blur artefacts with UIVisualEffectView

I have a UIVisualEffectView which is causing some strange artefacts right when it appears. The UIVisualEffectView is added in code after the view loads because it's not available in iOS 7.
Look at the blurred text background over the street view image: http://s.swic.name/Z3UL
The blur takes a good 0.1 seconds to appear, and before that it's just a lower resolution background shining through like the blur hasn't been calculated yet.
Any idea what is going on? I'm adding the blur in awakeFromNib using this code
- (void)addBlurWithColor:(UIColor *)color andStyle:(UIBlurEffectStyle)style andVibrancy:(BOOL)vibrancy
{
if (UIDevice.supportsVisualEffects && NSClassFromString(#"UIVisualEffectView") && !UIAccessibilityIsReduceTransparencyEnabled()) {
self.backgroundColor = color;
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:style];
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
visualEffectView.frame = self.bounds;
visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
NSArray *subviews = self.subviews;
[self addSubview:visualEffectView];
[self sendSubviewToBack:visualEffectView];
if (vibrancy) {
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.bounds];
vibrancyEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
for (UIView *subview in subviews) {
[vibrancyEffectView.contentView addSubview:subview];
}
[[visualEffectView contentView] addSubview:vibrancyEffectView];
}
}
}
Edit: The video just has slow animations enabled, the transition is a regular push segue.
Edit2: I get the same strange behaviour if i just drag drop a "UIVisualEffectView with Blur" in Interface Builder, so the code above shouldn't be to blame.
Found the problem, when the view appears I'm reloading the tableview inside [UIView transitionWithView:...] which alters the alpha which apparently is a big no-no when it comes to UIVisualEffectViews!
According to UIVisualEffectView Documentation;
When using the UIVisualEffectView class, avoid alpha values that are
less than 1. Creating views that are partially transparent causes the
system to combine the view and all the associated subviews during an
offscreen render pass. UIVisualEffectView objects need to be combined
as part of the content they are layered on top of in order to look
correct. Setting the alpha to less than 1 on the visual effect view or
any of its superviews causes many effects to look incorrect or not
show up at all.
https://developer.apple.com/library/ios/documentation/uikit/reference/UIVisualEffectView/index.html

How do I make the area on the top of a UISearchBar (when on a UITableView) in iOS 7 transparent?

Here is a picture describing the problem. Notice that the area above the UISearchBar does not have the background as below it. I don't want the gray color, I want the dark maroon background when pulling down on the UITableView.
Everything I know of is set to [UIColor clearColor], including backgrounds of views, etc. It works fine in iOS 6 but not iOS 7!
I've also attached a sample project so someone can take a look and see what I am doing wrong here?
Click here to download my sample project
Maybe I am just missing something stupid?
Thanks!
Two things you could do: 1) add an explicit clear background view to the UITableView. Or, 2) set your UIImageView to be the background view of the UITableView.
Either of these work. Here's the code that makes your sample work:
- (void)viewDidLoad
{
[super viewDidLoad];
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
backgroundImageView.image = [UIImage imageNamed:#"Film_bg.png"];
[self.view addSubview:backgroundImageView];
[self.view sendSubviewToBack:backgroundImageView];
// solution 1
// self.tableView.backgroundView = [UIView new];
// self.tableView.backgroundView.backgroundColor = [UIColor clearColor];
// solution 2
self.tableView.backgroundView = backgroundImageView;
}

Custom MPVolumeView Thumb Image not vertically centered since iOS 5.1

I'm building an application that needs an MPVolumeView to control the volume. It worked perfectly before iOS 5.1 but since the 5.1 update the thumb image is no longer vertically centered. I tried a few things like changing imagine dimensions, resizing my views (and slider) but nothing seems to work, the thumb is just not vertically centered anymore. The only way i get a centered thumb is if i use the default iOS one.
I tried adding a UISlider to another view with the exact min, max and thumb image and that one is centered fine.
Here is the code for the MPVolumeView:
MPVolumeView *volumeView;
volumeView = [[[MPVolumeView alloc] initWithFrame:volumeViewHolder.bounds] autorelease];
[volumeViewHolder addSubview:volumeView];
UIView *volumeViewSlider;
for (UIView *view in [volumeView subviews])
{
if ([[[view class] description] isEqualToString:#"MPVolumeSlider"])
{
volumeViewSlider = view;
}
}
[(UISlider *)volumeViewSlider setThumbImage:sliderHandleIcon forState:UIControlStateNormal];
[(UISlider *)volumeViewSlider setMinimumTrackImage:leftTrackImage forState:UIControlStateNormal];
[(UISlider *)volumeViewSlider setMaximumTrackImage:rightTrackImage forState:UIControlStateNormal];
volumeViewHolder is just a UIView thats 153x33. I put the thumb in green in the screenshot.
Maybe a better solution:
User a bigger image with a transparent border on the bottom. Should be around 10px for Retina Displays.
the same problem i resolved in one project. Must be set color of left part and right part with alpha = 0 -it means transparent all slider without thumb (without moovable part of it). After we must create custom view for line of slider, without thumb. In this view any colored part may be shifted as you want, upper or below, left or right. It obtained using the defined y for your ocassion:
UIView *v = [[UIView alloc] initWithFrame:CGRectMake(x,y,width, height)];
And add the slider to this line as subview. Resulted view will be slider. For example:
UISlider *ourSlider = ...;
//initialise UISlider
ourSlider.minimumTrackTintColor = [UIColor colorWithRed:0 green:122.0f/255.0f blue:1 alpha:0];
ourSlider.minimumTrackTintColor = [UIColor colorWithRed:0 green:122.0f/255.0f blue:1 alpha:0];
UIView *lineOfSliderWithoutThumb = ... ;
// creation it
[lineOfSliderWithoutThumb addSubview:ourSlider];
//after this lineOfSliderWithoutThumb is the our custom uislider.
Note: colors there are used as default slider colors of left and right sides of UISlider.

Resources