Skip to content

Commit ea19395

Browse files
committed
fix(ios): propery styling of address label
- Add background view for address label, so the address label can have paddings when a background is set - Add semi-transparent background with round corners - Add margins to the address background Generated-By: GPT-5, XCode 26
1 parent b83a9b7 commit ea19395

File tree

2 files changed

+47
-18
lines changed

2 files changed

+47
-18
lines changed

src/ios/CDVWKInAppBrowser.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ typedef NSDictionary CDVSettingsDictionary;
6767
@property (nonatomic, strong) IBOutlet WKWebView *webView;
6868
@property (nonatomic, strong) IBOutlet WKWebViewConfiguration *configuration;
6969
@property (nonatomic, strong) IBOutlet UIBarButtonItem *closeButton;
70+
@property (nonatomic, strong) IBOutlet UIView *addressBackgroundView;
7071
@property (nonatomic, strong) IBOutlet UILabel *addressLabel;
7172
@property (nonatomic, strong) IBOutlet UIBarButtonItem *backButton;
7273
@property (nonatomic, strong) IBOutlet UIBarButtonItem *forwardButton;

src/ios/CDVWKInAppBrowser.m

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -749,12 +749,23 @@ - (void)createViews
749749
// We add our own constraints, they should not be determined from the frame.
750750
self.toolbar.translatesAutoresizingMaskIntoConstraints = NO;
751751

752+
// Background view for address label
753+
self.addressBackgroundView = [[UIView alloc] init];
754+
self.addressBackgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.2];
755+
self.addressBackgroundView.layer.cornerRadius = 15.0;
756+
// Don't draw any content that would be outside the view’s rectangular bounds
757+
self.addressBackgroundView.clipsToBounds = YES;
758+
[self.view addSubview:self.addressBackgroundView];
759+
// We add our own constraints, they should not be determined from the frame.
760+
self.addressBackgroundView.translatesAutoresizingMaskIntoConstraints = NO;
761+
752762
self.addressLabel = [[UILabel alloc] init];
753763
self.addressLabel.adjustsFontSizeToFitWidth = NO;
754764
self.addressLabel.alpha = 1.000;
755765
self.addressLabel.backgroundColor = [UIColor clearColor];
756766
self.addressLabel.baselineAdjustment = UIBaselineAdjustmentAlignCenters;
757767
self.addressLabel.clearsContextBeforeDrawing = YES;
768+
// Don't draw any content that would be outside the view’s rectangular bounds
758769
self.addressLabel.clipsToBounds = YES;
759770
self.addressLabel.contentMode = UIViewContentModeScaleToFill;
760771
self.addressLabel.enabled = YES;
@@ -775,7 +786,7 @@ - (void)createViews
775786
self.addressLabel.textAlignment = NSTextAlignmentLeft;
776787
self.addressLabel.textColor = [UIColor colorWithWhite:1.000 alpha:1.000];
777788
self.addressLabel.userInteractionEnabled = NO;
778-
[self.view addSubview:self.addressLabel];
789+
[self.addressBackgroundView addSubview:self.addressLabel];
779790
// We add our own constraints, they should not be determined from the frame.
780791
self.addressLabel.translatesAutoresizingMaskIntoConstraints = NO;
781792

@@ -875,20 +886,31 @@ - (void)createViews
875886
[self.toolbar.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor]
876887
]];
877888

878-
// Address label horizontal constraints
889+
// Address background horizontal constraints with margin
879890
[NSLayoutConstraint activateConstraints:@[
880891
// Left to safe area for proper layout on landscape
881-
[self.addressLabel.leadingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.leadingAnchor constant:5.0],
892+
[self.addressBackgroundView.leadingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.leadingAnchor
893+
constant:15.0],
882894
// Right to safe area for proper layout on landscape
883-
[self.addressLabel.trailingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.trailingAnchor constant:-5.0]
895+
[self.addressBackgroundView.trailingAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.trailingAnchor
896+
constant:-15.0]
897+
]];
898+
899+
// Constrain Address label inside Address background view with padding
900+
[NSLayoutConstraint activateConstraints:@[
901+
[self.addressLabel.topAnchor constraintEqualToAnchor:self.addressBackgroundView.topAnchor constant:10.0],
902+
[self.addressLabel.bottomAnchor constraintEqualToAnchor:self.addressBackgroundView.bottomAnchor constant:-10.0],
903+
[self.addressLabel.leadingAnchor constraintEqualToAnchor:self.addressBackgroundView.leadingAnchor constant:10.0],
904+
[self.addressLabel.trailingAnchor constraintEqualToAnchor:self.addressBackgroundView.trailingAnchor constant:-10.0]
884905
]];
885906

886907
// Define vertical constraints, in order from top to bottom
887908
// The Address label and Toolbar are optional
888909
BOOL toolbarIsAtTop = [_browserOptions.toolbarposition isEqualToString:kInAppBrowserToolbarBarPositionTop];
889910
BOOL toolbarVisible = _browserOptions.toolbar;
890911
BOOL addressLabelVisible = _browserOptions.location;
891-
912+
const CGFloat addressBackgroundTopBottomMargin = 12.0;
913+
892914
// Center spinner in WebView
893915
[self.spinner.centerXAnchor constraintEqualToAnchor:self.webView.centerXAnchor].active = YES;
894916
[self.spinner.centerYAnchor constraintEqualToAnchor:self.webView.centerYAnchor].active = YES;
@@ -929,10 +951,12 @@ - (void)createViews
929951
if (!toolbarVisible && addressLabelVisible) {
930952
// Webview top to safe area top
931953
[self.webView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor].active = YES;
932-
// Address label top to WebView bottom
933-
[self.addressLabel.topAnchor constraintEqualToAnchor:self.webView.bottomAnchor].active = YES;
934-
// Address label bottom to safe area bottom
935-
[self.addressLabel.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor].active = YES;
954+
// Address background top to WebView bottom with margin
955+
[self.addressBackgroundView.topAnchor constraintEqualToAnchor:self.webView.bottomAnchor
956+
constant:addressBackgroundTopBottomMargin].active = YES;
957+
// Address background bottom to safe area bottom with margin, margin must be negativ here
958+
[self.addressBackgroundView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor
959+
constant:addressBackgroundTopBottomMargin *-1].active = YES;
936960
}
937961

938962
// Case 4: Toolbar visible and Address label visible
@@ -943,19 +967,23 @@ - (void)createViews
943967
[self.toolbar.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor].active = YES;
944968
// Webview top to Toolbar bottom
945969
[self.webView.topAnchor constraintEqualToAnchor:self.toolbar.bottomAnchor].active = YES;
946-
// Address label top to WebView bottom
947-
[self.addressLabel.topAnchor constraintEqualToAnchor:self.webView.bottomAnchor].active = YES;
948-
// Address label bottom to safe area bottom
949-
[self.addressLabel.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor].active = YES;
970+
// Address background top to WebView bottom with margin
971+
[self.addressBackgroundView.topAnchor constraintEqualToAnchor:self.webView.bottomAnchor
972+
constant:addressBackgroundTopBottomMargin].active = YES;
973+
// Address background bottom to safe area bottom with margin, margin must be negativ here
974+
[self.addressBackgroundView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor
975+
constant:addressBackgroundTopBottomMargin *-1].active = YES;
950976

951977
// Toolbar is at bottom (default)
952978
} else {
953979
// WebView top to safe area top
954980
[self.webView.topAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.topAnchor].active = YES;
955-
// WebView bottom to Address label top
956-
[self.webView.bottomAnchor constraintEqualToAnchor:self.addressLabel.topAnchor].active = YES;
957-
// Address label bottom to Toolbar top
958-
[self.addressLabel.bottomAnchor constraintEqualToAnchor:self.toolbar.topAnchor].active = YES;
981+
// Address background top to WebView bottom with margin
982+
[self.addressBackgroundView.topAnchor constraintEqualToAnchor:self.webView.bottomAnchor
983+
constant:addressBackgroundTopBottomMargin].active = YES;
984+
// Address background bottom to Toolbar top with margin, margin must be negativ here
985+
[self.addressBackgroundView.bottomAnchor constraintEqualToAnchor:self.toolbar.topAnchor
986+
constant:addressBackgroundTopBottomMargin *-1].active = YES;
959987
// Toolbar bottom to safe area bottom
960988
[self.toolbar.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor].active = YES;
961989
}
@@ -986,7 +1014,7 @@ - (void)setCloseButtonTitle:(NSString *)title withColor:(NSString *)colorString
9861014

9871015
- (void)showLocationBar:(BOOL)show
9881016
{
989-
self.addressLabel.hidden = !show;
1017+
self.addressBackgroundView.hidden = !show;
9901018
[self.view setNeedsLayout];
9911019
[self.view layoutIfNeeded];
9921020
}

0 commit comments

Comments
 (0)