Custom Popup Bar with transparent background

[degello]

Hi and thanks for this amazing library,
I've ran into a problem of my own though. I'm wondering if it's possible to make the background color of the minimized view clear instead of just tinting it like in the example. I've tried changing the color in several places but it's only ending up with a completely black background. Look at the image provided to see what i'm trying to achieve. Thanks!

Something like the minimized youtube player would also be great to achieve, I haven't had any luck by changing the cornerradius (and also using masktobounds of course)

[LeoNatan]

Hello,

Sounds like you want to subclass LNPopupCustomBarViewController and implement the view of the custom popup yourself.

[degello]

I've already done that, I need to add constraints or some type of insets to present the LNPopupCustomBarViewController in the "middle" like the youtube player or just make the LNPopupCustomBarViewController itself transparent and pin a subview inside it to meet my requirements. Let me know if i'm not clear enough.

[LeoNatan]

So I am not sure what the problem is. Add a view and constrain it to have some padding?

[qsdnino]

I've already done that, I need to add constraints or some type of insets to present the LNPopupCustomBarViewController in the "middle" like the youtube player or just make the LNPopupCustomBarViewController itself transparent and pin a subview inside it to meet my requirements. Let me know if i'm not clear enough.

I also have same scenario. Try almost everything and can't make my LNPopupCustomBarViewController subclass transparent. I present presentPopupBar over UITabBarController which is root view controller for application

[LeoNatan]

If you set the background color of the LNPopupCustomBarViewController view to transparent, what do you see?

[qsdnino]

If you set the background color of the LNPopupCustomBarViewController view to transparent, what do you see?

Yes, sure. I do that in viewDidLoad and set view background to UIColor.clear. Also I set any other subviews views transparent but without any effect.

[LeoNatan]

What does it look like?

[qsdnino]

What does it look like?

It is white

Please follow this link

[LeoNatan]

I don't see how that could be. In my maps example, there is an effect view that blurs the content underneath the popup bar. Your view's background is also white. Could you change it to red just o see if the bar remains white?

[iDevelopper]

@degello , @qsdnino , @LeoNatan

Could you have a look at https://github.com/iDevelopper/LNPopupControllerExample ?

I added a custom container controller.

I also added a custom popup bar the Custom Container Demo and replaced the custom popup bar in the Map Scene Demo by one that looks like Youtube bar.

@LeoNatan , I modified LNPopupBar.m too. You should hide the backgroundView view and the shadow view in case of custom popup bar. Or let access to its properties.

There are still some warnings about constraints at runtime in the console but I have not time to investigate.

Hope it helps!

[qsdnino]

@degello , @qsdnino , @LeoNatan

Could you have a look at https://github.com/iDevelopper/LNPopupControllerExample ?

I added a custom container controller.

I also added a custom popup bar the Custom Container Demo and replaced the custom popup bar in the Map Scene Demo by one that looks like Youtube bar.

@LeoNatan , I modified LNPopupBar.m too. You should hide the backgroundView view and the shadow view in case of custom popup bar. Or let access to its properties.

There are still some warnings about constraints at runtime in the console but I have not time to investigate.

Hope it helps!

Can't build project. ContainerController.swift is missing
It shows red in xcode project structure

[iDevelopper]

I don't understand. ContainerController.swift is in the repo and I just downloaded the zip to make a test without any problem! You have to download the whole repo...

[qsdnino]

I don't understand. ContainerController.swift is in the repo and I just downloaded the zip to make a test without any problem! You have to download the whole repo...

Please check this link
There is explainer screenshot how I open XCode project. Can't run example. Am I doing something wrong?

[iDevelopper]

Strange! Is it in the "Demo - Custom Container" folder? If yes, Menu File -> Add Files to "LNPopupControllerExample" and select it.

[degello]

@iDevelopper thanks a lot! I imported your version of LNPopupController and its now possible to have a transparent background. @LeoNatan you should take a look and merge it into the main branch.

[LeoNatan]

Pull requests are welcome.

[qsdnino]

@iDevelopper I included ContainerController.swift and build project. It works now and the effect is what all of us need 👍 . However this is not real UITabBarController implementation. I would be great if we could use UITabBarController for presenting custom bar.

[iDevelopper]

It works also with a tab bar controller! In MapScene.storyboard, embed the MapViewController in a tab bar controller and test the Map example.

[iDevelopper]

@LeoNatan , what pull request? You have just two lines to add to hide the background view and the shadow view:

- (void)_updateViewsAfterCustomBarViewControllerUpdate
{
	BOOL hide = _customBarViewController != nil;
    // For Custom Popup Bar View
    _backgroundView.hidden = hide;
    _shadowView.hidden = hide;
    //
	_toolbar.hidden = hide;
	_titlesView.hidden = hide;
}

But may be you prefer to use some boolean properties to do that regarding the older projects?

[LeoNatan]

I’ll take a look.

[LeoNatan]

Using

popupBar.isTranslucent = false
popupBar.backgroundColor = .clear

I can already achieve full transparency of the popup bar. There is a small artifact of the hairline, which I am thinking of limiting to translucent bars only.

This is a better solution as it allows custom popup bars to still have the system background, if desired.

[iDevelopper]

Yes, there remains the problem of the shadow view that we do not necessarily want to keep.

[qsdnino]

Using

popupBar.isTranslucent = false
popupBar.backgroundColor = .clear

I can already achieve full transparency of the popup bar. There is a small artifact of the hairline, which I am thinking of limiting to translucent bars only.

This is a better solution as it allows custom popup bars to still have the system background, if desired.

@LeoNatan, @iDevelopper Is possible to hide hairline? I acheive to have transparen custom popup bar, but there is hairline at the top.

[iDevelopper]

@qsdnino ,

@LeoNatan said:

There is a small artifact of the hairline, which I am thinking of limiting to translucent bars only.

Waiting for a commit...

[LeoNatan]

Already committed.

[Kedar-27]

@LeoNatan @iDevelopper....how can we achieve full transparent background of popup content view of custombar controller....because, currently, it is showing blur view on background...is there any solution ..in short wanted to achieve full transparency on custombar controller

[Kedar-27]

@LeoNatan @iDevelopper....how can we achieve full transparent background of popup content view of custombar controller....because, currently, it is showing blur view on background...is there any solution ..in short wanted to achieve full transparency on custombar controller

can somebody please help

[LeoNatan]

@Kedar-27 Please don't spam threads. This is not your personal support forum and nobody owes you basic usage help.

As I said, read the documentation.

popupBar.isTranslucent = false
popupBar.backgroundColor = .clear

[Kedar-27]

popupBar.isTranslucent = false
popupBar.backgroundColor = .clear

I read your documentation.....but my problem is with popupcontentview not with popup bar....want transparency on custombarcontroller not popupbar

[LeoNatan]

I don't think it's possible. If there is transparency in the content controller's view (alpha < 1.0), a blur effect is applied.

[Kedar-27]

I don't think it's possible. If there is transparency in the content controller's view (alpha < 1.0), a blur effect is applied.

can we remove that blur effect

[LeoNatan]

Not at the moment.

[LeoNatan]

Open a new feature request issue. @Kedar-27