Project: Dynamic Navigation Bar with SwiftUI
The core aim of this project is to design a flexible, aesthetically pleasing navigation bar that seamlessly integrates into a larger app view.
ContentViewNB
import SwiftUI
struct ContentViewNB: View {
var body: some View {
ZStack {
Color.BackgroundColor.ignoresSafeArea()
VStack(spacing: 0) {
// MARK: - Navigation Bar
NavigationBarView(
LeftIcon: "pencil",
RightIcon: "eraser"
)
.padding(.horizontal, 15)
.padding(.bottom)
.shadow(color: Color.SecondaryColor.opacity(0.05), radius: 5, x: 0, y: 5)
Spacer()
Text("Footer")
}
} // End of VStack
}
}
struct ContentViewNB_Previews: PreviewProvider {
static var previews: some View {
ContentViewNB()
}
}
Description:
This is the primary content view, acting as the primary interface of our application.
- ZStack: Provides depth by layering views on top of each other. Our background color stretches across the entire safe area to ensure visual consistency.
- VStack: Vertically stacks elements, giving our view a top-to-bottom flow. It houses the navigation bar at the top and a footer text at the bottom.
- NavigationBarView: The custom navigation bar we designed. It accepts two icons (Left and Right) as parameters, making it dynamic and adaptable.
NavigationBarView
import SwiftUI
struct NavigationBarView: View {
// MARK: - Properties
var LeftIcon: String
var RightIcon: String
@State private var isAnimated: Bool = false
// MARK: - Body
var body: some View {
HStack {
// MARK: - Search Button
Button(action: {}, label: {
Image(systemName: LeftIcon)
.font(.title)
.foregroundColor(.teal)
}) // End of Button
Spacer()
// MARK: - Logo
LogoView(textLeft: "Navigation", textRight: "Bar", logo: "note.text")
.opacity(isAnimated ? 1 : 0)
.offset(x: 0, y: isAnimated ? 0 : -25)
.onAppear(perform: {
withAnimation(.easeOut(duration: 0.5)) {
isAnimated.toggle()
}
})
Spacer()
// MARK: - Cart Button
Button(action: {}, label: {
Image(systemName: RightIcon)
.font(.title)
.foregroundColor(.teal)
}) // End of Button
} // End of HStack
}
}
// MARK: - Preview
struct NavigationBarView_Previews: PreviewProvider {
static var previews: some View {
NavigationBarView(LeftIcon: "pencil", RightIcon: "eraser")
.previewLayout(.sizeThatFits)
.padding()
}
}
Description:
A custom navigation bar designed for adaptability and elegance.
- Properties:
— `LeftIcon` & `RightIcon`: String properties that accept SF Symbols icon names. This allows the developer to customize the navigation bar actions with ease.
— `isAnimated`: A state property to handle the logo animation.
- Functionality:
— Search & Cart Buttons: On the left and right of the navigation bar. These are customizable action buttons that can be mapped to various features within the app.
— LogoView: Sits in the center of our navigation bar. It elegantly displays the app or brand logo, combined with text. The `onAppear` function adds a smooth fading animation, creating an engaging visual effect.
LogoView
import SwiftUI
struct LogoView: View {
var textLeft: String
var textRight: String
var logo: String
var body: some View {
HStack(spacing: 8) {
// MARK: - Left Text
Text(textLeft.uppercased())
.font(.title3)
.fontWeight(.black)
.foregroundColor(.TextColor) // Use the defined textColor
// MARK: - Logo Image
Image(systemName: logo)
.resizable()
.scaledToFit()
.foregroundColor(.teal) // Use the defined teal color
.frame(width: 30, height: 30, alignment: .center)
// MARK: - Right Text
Text(textRight.uppercased())
.font(.title3)
.fontWeight(.black)
.foregroundColor(.TextColor) // Use the defined textColor
}
}
}
struct LogoView_Previews: PreviewProvider {
static var previews: some View {
LogoView(textLeft: "Navigation", textRight: "Bar", logo: "globe")
.previewLayout(.sizeThatFits)
.padding()
}
}
Description:
This view is crafted to showcase the brand identity with a blend of text and logo.
- Properties:
— `textLeft` & `textRight`: These are dynamic text fields framing the logo, enabling flexibility in naming or branding.
— `logo`: The central visual element can be an SF Symbols icon or a custom brand icon.
- Design:
— The text fields (`textLeft` & `textRight`) use an uppercase font, projecting emphasis and dominance. The color `.TextColor` ensures it adapts to different themes, ensuring visual consistency.
— The logo is designed to scale seamlessly, retaining its proportions. Its teal color is modern and adaptable, striking a perfect balance with the surrounding text.
Conclusion:
With SwiftUI at our disposal, the project successfully combines aesthetics and function. The customizable nature of each component ensures that this navigation bar can be adapted to a myriad of applications, each offering a fresh, intuitive user experience.
Thank you for your invaluable contribution and unwavering support. Your efforts made all the difference!
https://github.com/users/abilgin88/projects/11?pane=issue&itemId=38122056
