"How to Center Text in the Middle of a Black Overlay in SwiftUI?"
I'm having trouble positioning text in the center of a black overlay in SwiftUI. I want the white text to be aligned in the middle of the black box where I marked with a red line in the image below. Despite trying different alignments and padding, I can't seem to get the text to appear where I want it.
Here's the image showing where I want the text to be:
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: customSize.width, height: customSize.height)
.clipped()
.overlay(
VStack(alignment: .leading) {
Spacer()
HStack {
VStack(alignment: .leading) {
if let name = channel.tvgName {
Text(formatTitle(name))
.font(.title3.bold()) // Adjust the font size and style
.foregroundColor(.white)
.lineLimit(1)
.shadow(radius: 5) // Add shadow for better contrast
.padding(.all, 0)
} else {
Text(formatTitle(channel.tvgId ?? ""))
.font(.title3.bold()) // Adjust the font size and style
.foregroundColor(.white)
.lineLimit(1)
.shadow(radius: 5) // Add shadow for better contrast
.padding(.all, 0)
}
}
Spacer()
}
.padding([.leading, .bottom, .trailing], 50)
.background(LinearGradient(
gradient: Gradient(colors: [Color.blue, Color.blue.opacity(0.1)]),
startPoint: .bottom,
endPoint: .top
))
}
)
.cornerRadius(10)
.shadow(radius: 5)
Full view code:
import SwiftUI
import CachedAsyncImage
struct ChannelDetailsView: View {
var channel: PlaylistItem
var reader: GeometryProxy
@State var customSize: CGSize = CGSize(width: 256, height: 418) // Updated size
@State private var showByGroup = UserDefaults.standard.bool(forKey: "showByGroup")
var body: some View {
VStack(spacing: 0) {
if let logo = channel.tvgLogo {
CachedAsyncImage(url: URL(string: logo)) { phase in
switch phase {
case .empty:
ProgressView()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray.opacity(0.3))
.cornerRadius(10)
.frame(width: customSize.width,
height: customSize.height)
case .success(let image):
image
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: customSize.width, height: customSize.height)
.clipped()
.overlay(
VStack(alignment: .leading) {
Spacer()
HStack {
VStack(alignment: .leading) {
if let name = channel.tvgName {
Text(formatTitle(name))
.font(.title3.bold()) // Adjust the font size and style
.foregroundColor(.white)
.lineLimit(1)
.shadow(radius: 5) // Add shadow for better contrast
.padding(.all, 0)
} else {
Text(formatTitle(channel.tvgId ?? ""))
.font(.title3.bold()) // Adjust the font size and style
.foregroundColor(.white)
.lineLimit(1)
.shadow(radius: 5) // Add shadow for better contrast
.padding(.all, 0)
}
}
Spacer()
}
.padding([.leading, .bottom, .trailing], 50)
.background(LinearGradient(
gradient: Gradient(colors: [Color.blue, Color.blue.opacity(0.1)]),
startPoint: .bottom,
endPoint: .top
))
}
)
.cornerRadius(10)
.shadow(radius: 5)
case .failure:
Image(systemName: "play.display")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
.padding()
.background(Color.gray.opacity(0.3))
.cornerRadius(10)
.frame(width: customSize.width,
height: customSize.height)
@unknown default:
EmptyView()
}
}
}
}
.onAppear(perform: {
customSize = reader.size
})
.frame(width: customSize.width, height: customSize.height)
.background(Color.black.opacity(0.2))
.cornerRadius(10)
.shadow(radius: 5)
.onAppear {
print("width: \(reader.size.width)")
print("height: \(reader.size.height)")
}
.onChange(of: reader.size) { oldValue, newValue in
customSize = newValue
}
}
// Function to format the title
func formatTitle(_ title: String) -> String {
var formattedTitle = title
// Remove "4K"
formattedTitle = formattedTitle.replacingOccurrences(of: "4K", with: "", options: .caseInsensitive)
// Remove year in parentheses, e.g., "(2021)"
let regex = try! NSRegularExpression(pattern: "\\(\\d{4}\\)", options: [])
formattedTitle = regex.stringByReplacingMatches(in: formattedTitle, options: [], range: NSRange(location: 0, length: formattedTitle.count), withTemplate: "")
// Remove any extra spaces
formattedTitle = formattedTitle.trimmingCharacters(in: .whitespacesAndNewlines)
return formattedTitle
}
}
// Extension to apply corner radius to specific corners
extension View {
func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
clipShape(RoundedCorner(radius: radius, corners: corners))
}
}
struct RoundedCorner: Shape {
var radius: CGFloat = .infinity
var corners: UIRectCorner = .allCorners
func path(in rect: CGRect) -> Path {
let path = UIBezierPath(
roundedRect: rect,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius)
)
return Path(path.cgPath)
}
}
Solution
Instead of using stacks and spacers to align things, you can just pass an alignment to the overlay modifier. The Text will be automatically put on the bottom centre of the image.
Then all you need to do is add some vertical padding on the Text, and do .frame(maxWidth: .infinity) so that it occupies the full width of the image. Finally, you add the gradient background and the text will be centered inside that.
Image("some image")
.resizable()
.scaledToFit()
.overlay(alignment: .bottom) {
Text("The Instigators")
.font(.title3.bold())
.foregroundStyle(.white)
.lineLimit(1)
.shadow(radius: 5)
.padding(.vertical, 20)
.frame(maxWidth: .infinity)
.background(.linearGradient(
colors: [.blue, .blue.opacity(0.1)],
startPoint: .bottom,
endPoint: .top
))
}
.padding()
I see that you are using a lot of deprecated view modifiers. In case you need to support versions below iOS 15, the alignment: argument for overlay is the second argument before iOS 15.
.overlay(
Text("The Instigators")
.font(.title3.bold())
.foregroundColor(.white)
// ...
,
alignment: .bottom
)
Last but not least, consider replacing the if let statement - you can just do:
Text(formatTitle(channel.tvgName ?? channel.tvgId ?? ""))
- SwiftUI Toggle with Material and ClipShape loses toggle background
- Why does my snapshot() in SwiftUI not capture downloaded images from WebImage (SDWebImageSwiftUI)?
- How to avoid sharing state on WindowGroup / multiscreen macOS with SwiftUI?
- Swift Combine Pipeline to compare draft model
- SwiftUI Combine observing updates
- SwiftUI DragGesture only in one direction
- How do I make conjoined buttons in SwiftUI? (MacOS)
- How to detect Swiping UP, DOWN, LEFT and RIGHT with SwiftUI on a View
- Multiple function calls, but single execution of async Task
- Make sheet the exact size of the content inside
- SwiftUI tool bar button does not navigate to another view
- In swiftUI, how does text display evenly once minimumScaleFactor is set
- UICollectionView and SwiftUI?
- is it possible to update live activity view after performing LiveactivityIntent action?
- How to add placeholder text to TextEditor in SwiftUI?
- What are the .primary and .secondary colors in SwiftUI?
- How do I debug SwiftUI AttributeGraph cycle warnings?
- Handling denied camera permissions in an iOS App Clip
- How to open specific View in SwiftUI app using AppIntents
- Dynamically resize SwiftUI UIViewRepresentable with intrinsic content size / sizeThatFits
- Dynamically hiding view in SwiftUI
- Align two SwiftUI text views in HStack with correct alignment
- How to make an entire bottom toolbar clickable in SwiftUI?
- SwiftUI List Rendering More Cells than Necessary When Using a Custom Cell View
- Scrolling more than one item in SwiftUI ScrollView
- Restrict sheet dismissing by swipe down in swiftui
- SwiftUI Section Header Not Pinned
- How to make SF Symbols in SwiftUI have the same width
- .onReceive firing twice | SwiftUI
- How can I update the number of rows in an NSTableView?