blurred bottom area of navigationbar

[s1u]

Hi, this sample is great! I'd like to leverage it in terms of the blur effect at navigation bar bottom when scrolling up. I studied your sample, but no idea about that. Is there any easy way to implement it ?

Thank you!

[BTLibrary]

Hi iosdev,

Thanks for checking out my github! It uses the masking layer. I am on the road right now and will be back on Wednesday, if you can wait I will write up a gist for you. There is also a stackoverflow question is you search for "BTLibrary" that might help explain how that is done. Let me know if you need more help!

Thanks,
Byte

On Aug 2, 2014, at 4:16 AM, "i0sdev [Masked]" FWD_Tb3gIq23@opayq.com wrote:

Hi, this sample is great! I'd like to leverage it in terms of the blur effect at navigation bar bottom. I studied your sample, but no idea about that. Is there any easy way to implement it ?

Thank you!

—
Reply to this email directly or view it on GitHub.

[s1u]

Sure, no problem, looking forward to your gist!
Thanks!

[BTLibrary]

Hello!

As promised - https://gist.github.com/BTLibrary/5fe8756f6ba36c6d261d#file-navigation-mask

It should be clear enough. Basically, 3 layers of views.

• The View (with background Image)
  • The Container View (with mask)
    • The ScrollView (inside the container view)

Let me know if it works for you!
-Byte

[s1u]

Hi, thanks!

Tried to replace original codes by this gist and run on simulator, like this, not find blurred area at navigation bar bottom. Or is something wrong with mine?

[BTLibrary]

Not sure, I would need to see your code to diagnose the problem. It works fine when I tried it. What did you change?

[s1u]

Replaced original 'viewControll.m' frim downloaded zip file by your gist of
this new 'viewController', which was what I did.

On Thursday, August 7, 2014, Byte notifications@github.com wrote:

Not sure, I would need to see your code to diagnose the problem. It works
fine when I tried it. What did you change?
[image: image]
https://cloud.githubusercontent.com/assets/4854561/3842186/1f9d58c0-1e35-11e4-86e0-deafd2dc35fd.png

—
Reply to this email directly or view it on GitHub
#9 (comment)
.

[BTLibrary]

It shouldn't work because I didn't use the original view controller. Just do this. Make a new project with just appdelegate and a view controller. Assign that view controller as the root of the navigation stack. Assign that navigation controller to be the root of your window. I made it so it's without any baggage from the previous implementation.

Let me know how it goes.

On Aug 7, 2014, at 9:44 AM, "i0sdev [Masked]" FWD_Tb3gIq23@opayq.com wrote:

github.com> wrote:

Not sure, I would need to see your code to diagnose the problem. It works
fine when I tried it. What did you change?
[image: image]
https://cloud.githubusercontent.com/assets/4854561/3842186/1f9d58c0-1e35-11e4-86e0-deafd2dc35fd.png

—
Reply to this email directly or view it on GitHub
#9 (comment)
.

—
Reply to this email directly or view it on GitHub.

[s1u]

Oh, I see. Got it. Now it works! Thank you!

But I want to do it in a UITableViewController, and tried to some modifications like this, but looks not correct,

#import <UIKit/UIKit.h>

@interface SSBlurNavTableViewController : UITableViewController

@end

#import "SSBlurNavTableViewController.h"

#define DEFAULT_TOP_FADING_HEIGHT_HALF 10

@interface SSBlurNavTableViewController ()

@property (strong, nonatomic) NSArray * Data;

@end

@implementation SSBlurNavTableViewController

-(void)viewWillAppear:(BOOL)animated
{
    self.tableView.layer.mask = [self createTopMaskWithSize:CGSizeMake(self.view.frame.size.width, self.view.frame.size.height) startFadeAt:self.tableView.contentInset.top - DEFAULT_TOP_FADING_HEIGHT_HALF endAt:self.tableView.contentInset.top + DEFAULT_TOP_FADING_HEIGHT_HALF topColor:[UIColor colorWithWhite:1.0 alpha:0.0] botColor:[UIColor colorWithWhite:1.0 alpha:1.0]];

}

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.title = @"Blur Navbar";

//    self.tableView.backgroundColor = [UIColor colorWithRed:0.470 green:0.739 blue:0.527 alpha:1.000];
    self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg"]];
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];

    self.Data = @[@"AA", @"BB", @"CC", @"DD", @"EE", @"FF"];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.Data count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CellIdentifier";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    // Configure the cell...

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] ;

        cell.textLabel.text = [self.Data objectAtIndex:indexPath.row];
        cell.backgroundColor = [UIColor clearColor];
    }

    return cell;
}

- (CALayer *)createTopMaskWithSize:(CGSize)size startFadeAt:(CGFloat)top endAt:(CGFloat)bottom topColor:(UIColor *)topColor botColor:(UIColor *)botColor;
{
    top = top/size.height;
    bottom = bottom/size.height;

    CAGradientLayer *maskLayer = [CAGradientLayer layer];
    maskLayer.anchorPoint = CGPointZero;
    maskLayer.startPoint = CGPointMake(0.5f, 0.0f);
    maskLayer.endPoint = CGPointMake(0.5f, 1.0f);

    //an array of colors that dictatates the gradient(s)
    maskLayer.colors = @[(id)topColor.CGColor, (id)topColor.CGColor, (id)botColor.CGColor, (id)botColor.CGColor];
    maskLayer.locations = @[@0.0, @(top), @(bottom), @1.0f];
    maskLayer.frame = CGRectMake(0, 0, size.width, size.height);

    return maskLayer;
}
@end

below is result screenshots.

[BTLibrary]

Yes Uitableviewcontroller would be a bit different as the view under it is
actually table view. There might be a way to make it work but I do not
recommend it. I would use a table view on top of a uiviewcontroller.

[s1u]

Do you mean do the view controller inheriting to normal UIViewController and then like this?
@interface SSBlurNavViewController : UIViewController <UITableViewDataSource,UITableViewDelegate>

Updates, by this way,

#import "SSBlurNavViewController.h"

//the value of the fading space on the top between the view and navigation bar
#define DEFAULT_TOP_FADING_HEIGHT_HALF 10

@interface SSBlurNavViewController ()

@property(strong, nonatomic) UITableView * tableView;
@property (strong, nonatomic) NSArray * Data;

@end

@implementation SSBlurNavViewController

{
    UIView *_containerView;
//    UIScrollView *_foregroundScrollView;
    UIView * _foregroundScrollView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.title = @"Blur Navbar";
    self.view.backgroundColor = [UIColor clearColor];
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];

    self.tableView = [[UITableView alloc] initWithFrame:self.view.frame style:UITableViewStylePlain];
    self.tableView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg"]];
    self.tableView.backgroundView.backgroundColor = [UIColor clearColor];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;

    [self.view addSubview:self.tableView];

    self.Data = @[@"AA", @"BB", @"CC", @"DD", @"EE", @"FF"];
}

- (void)viewWillAppear:(BOOL)animated
{
    // Adding new mask
    // Note that the mask is added to the container view and the image is added to the self.view
    //
    self.view.layer.mask = [self createTopMaskWithSize:CGSizeMake(self.view.frame.size.width, self.view.frame.size.height) startFadeAt:64 endAt:74 topColor:[UIColor colorWithWhite:1.0 alpha:0.0] botColor:[UIColor colorWithWhite:1.0 alpha:1.0]];
}
- (CALayer *)createTopMaskWithSize:(CGSize)size startFadeAt:(CGFloat)top endAt:(CGFloat)bottom topColor:(UIColor *)topColor botColor:(UIColor *)botColor;
{
    top = top/size.height;
    bottom = bottom/size.height;

    CAGradientLayer *maskLayer = [CAGradientLayer layer];
    maskLayer.anchorPoint = CGPointZero;
    maskLayer.startPoint = CGPointMake(0.5f, 0.0f);
    maskLayer.endPoint = CGPointMake(0.5f, 1.0f);

    //an array of colors that dictatates the gradient(s)
    maskLayer.colors = @[(id)topColor.CGColor, (id)topColor.CGColor, (id)botColor.CGColor, (id)botColor.CGColor];
    maskLayer.locations = @[@0.0, @(top), @(bottom), @1.0f];
    maskLayer.frame = CGRectMake(0, 0, size.width, size.height);

    return maskLayer;
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.Data count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"CellIdentifier";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    // Configure the cell...    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] ;

        cell.textLabel.text = [self.Data objectAtIndex:indexPath.row];
        cell.backgroundColor = [UIColor clearColor];
    }
    return cell;
}
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end

It looks like this... close to expectation, but something wrong with navigation bar color that should be transparent instead of white.

[s1u]

Please see my updates and screenshots

[BTLibrary]

OK, I see it now, I was just using emails. So usually at this point, I would stop helping because it is actually better for you to find out why it is not working. Here is the hint: you are masking your image. Look at where you set your mask and where you set your background. I believe you can fix it ;)

[s1u]

Thanks for your hint! It works!

[BTLibrary]

I knew you could do it!

[s1u]

Not without your kind help! Thank you again!