Backpack/Overlay

Solid

Day	Night

Top

Day	Night

Bottom

Day	Night

Left

Day	Night

Right

Day	Night

Vignette

Day	Night

Usage

BPKOverlay provides an easy way to place content either in-front or behind a tint layer. It ensures that, when placing text on a graphic, the text will be legible and accessible.

Swift

                                                
                                                import Backpack
                                                
                                                // This is the content that will receive the 'overlay'
                                                let content = UIImageView(image: UIImage(named: "overlay_example"))
                                                
                                                // Foreground content that will display on top of the overlay
                                                let foregroundContent = BPKLabel(fontStyle: .textHero5)
                                                foregroundContent.text = "Barcelona"
                                                foregroundContent.textColor = BPKColor.white
                                                foregroundContent.translatesAutoresizingMaskIntoConstraints = false
                                                
                                                // Overlay view, this receives your content you want to be overlaid, the type of overlay and the content on top
                                                // of the overlay
                                                let overlay = BPKOverlay(content: content, overlayType: .bottomMedium, foregroundContent: foregroundContent)
                                                overlay.translatesAutoresizingMaskIntoConstraints = false
                                                
                                                // Optionally, give the view a corner radius
                                                overlay.clipsToBounds = true
                                                overlay.layer.cornerRadius = BPKCornerRadiusLg
                                                
                                                view.addSubview(overlay)
                                                
                                                NSLayoutConstraint.activate([
                                                    // Position the overlay yourself.
                                                    // The 'content' inside the overlay will match the overlay constraints.
                                                    overlay.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: BPKSpacingBase),
                                                    overlay.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: BPKSpacingBase),
                                                    view.trailingAnchor.constraint(equalTo: overlay.trailingAnchor, constant: BPKSpacingBase),
                                                    view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: overlay.bottomAnchor, constant: BPKSpacingBase),
                                                
                                                    // Position the foreground content yourself.
                                                    foregroundContent.leadingAnchor.constraint(equalTo: overlay.leadingAnchor, constant: BPKSpacingLg),
                                                    overlay.bottomAnchor.constraint(equalTo: foregroundContent.bottomAnchor, constant: BPKSpacingLg)
                                                ])