Create a Weather iOS APP UI with Sunrise And Sunset View in SwiftUI

In this iOS Swift article, we will learn  the captivating world of Swiftui animations by delving into the mesmerizing Sunrise and sunset animation. We will break down each component of the animation and provide full source code to help you recreate this visually stunning effect.

Also in the iOS Tutorial i includes  weather list UI for last 7 days. Show a SwiftUI list with card view. In the list item i add Days Weather , icons and min and max weather.

So Let’s  Start to create a new interesting example with swiftUI. Start your Xcode and create a new swiftUI file and follow bellow steps.

Sunrise And Sunset View in SwiftUI

First lets create sunrise and sunset Ui with animation in swiftUi. To Achieve the UI i use Zstack and then Vstack, Progress animation with cercel

ZStack {

LinearGradient(gradient: Gradient(colors: [Color.black, .white]),
 startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea(.all)

   VStack{
       Text("Sunrise - Sunset")
       .font(.largeTitle)
       .fontWeight(.heavy)
       .foregroundColor(.white)

 ZStack{

    Text("5:43 AM")
    .fontWeight(.bold)
    .foregroundColor(.white)
    .offset(x: -150, y: 45)

  Text("08:43 PM")
  .fontWeight(.bold)
  .foregroundColor(.white)
  .offset(x: 150, y: 45)

 Circle()
  .trim(from: 1/2, to: 1)
  .stroke(style: StrokeStyle(lineWidth: 3, dash: [10,10]))
  .foregroundColor(.yellow)
  .frame(width: 300, height: 300)

  // Start Dot
Circle()
.frame(width: 10, height: 10)
.foregroundColor(.yellow)
.offset(x: -150, y: 10)

// End Dot
Circle()
.frame(width: 10, height: 10)
.foregroundColor(.yellow)
.offset(x: 150, y: 10)

 // Sun Image

Image(systemName: "sun.max.fill")
.font(.title)
.foregroundColor(.yellow)
.offset(x: -150)
.rotationEffect(.degrees(animate ? 360 : 0))
.onAppear() {
withAnimation(.easeInOut(duration: 10).delay(2).repeatForever(autoreverses: false)) {
animate.toggle()
}
}
 // Status
Text(animate ? "Good Evening" : "Good Morning")
.font(.headline)
.fontWeight(.bold)
.foregroundColor(.white)
}

 

Create a iOS WeatherApp UI in SwiftUi

Let’s  create a list and show the last 7 days date in weatherList. So follow below code snip. For these i am using a list and make a custom CardView.

List((0..<7)){
      idx in
      WeatherItemCard(image: "", Day: "Today", wather: "Cloudy", max: 34.01,min: 10.4)
           }.padding(.horizontal, -30)
            .padding(.vertical, -70)
            .navigationTitle("Example 1")
            .navigationBarTitleDisplayMode(.inline)
            .frame(maxWidth: .infinity)
}

 

Weather CardView Source Code

import SwiftUI
struct WeatherItemCard: View {

    var image: String
    var Day: String
    var wather: String
    var max: Double
    var min: Double

    var body: some View {

        HStack(alignment: .center) {
            Spacer()
            VStack{
                Text(Day)
                    .font(.system(size: 15, weight: .bold, design: .default))
                    .foregroundColor(.black)
                Text(wather)
                    .font(.system(size: 12, weight: .regular, design: .default))
                    .foregroundColor(.black)
            }
            Spacer()
            Image(systemName: "sun.dust.fill")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 50)
                .padding(.all, 10)

            Spacer()

            VStack{
                Text("Max")
                    .font(.system(size: 15, weight: .regular, design: .default))
                    .foregroundColor(.black)
                Text(String.init(max))
                    .font(.system(size: 18, weight: .bold, design: .default))
                    .foregroundColor(.black)
            }

            Spacer()

            VStack{
                Text("Min")
                    .font(.system(size: 15, weight: .regular, design: .default))
                    .foregroundColor(.black)
                Text(String.init(min))
                    .font(.system(size: 18, weight: .bold, design: .default))
                    .foregroundColor(.black)
            }

            Spacer()

        }
        .frame(maxWidth: .infinity, alignment: .center)
        .background(Color.white)
        .modifier(CardModifier())
    }
}

Weather iOS APP UI with Sunrise And Sunset View in SwiftUI

Now lets make combine all the code and design a full screen with both sunrise and sunset with weather list.

import Foundation
import SwiftUI

struct WeatherForecastView: View {

    @State private var animate: Bool = false
    @State private var progress: Double = 0.5

    var body: some View{

        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.black, .white]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea(.all)

            VStack{

                //Title

                Text("Sunrise - Sunset")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(.white)

                ZStack{
                    // Start Time
                    Text("5:43 AM")
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .offset(x: -150, y: 45)

                    // End Time

                    Text("08:43 PM")
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .offset(x: 150, y: 45)

                    // Dash Line

                    Circle()
                        .trim(from: 1/2, to: 1)
                        .stroke(style: StrokeStyle(lineWidth: 3, dash: [10,10]))
                        .foregroundColor(.yellow)
                        .frame(width: 300, height: 300)

                    // Start Dot

                    Circle()
                        .frame(width: 10, height: 10)
                        .foregroundColor(.yellow)
                        .offset(x: -150, y: 10)

                    // End Dot

                    Circle()
                        .frame(width: 10, height: 10)
                        .foregroundColor(.yellow)
                        .offset(x: 150, y: 10)

                    // Sun Image

                    Image(systemName: "sun.max.fill")
                        .font(.title)
                        .foregroundColor(.yellow)
                        .offset(x: -150)
                        .rotationEffect(.degrees(animate ? 360 : 0))
                        .onAppear() {
                            withAnimation(.easeInOut(duration: 10).delay(2).repeatForever(autoreverses: false)) {
                                animate.toggle()
                            }
                        }

                    // Status

                    Text(animate ? "Good Evening" : "Good Morning")
                        .font(.headline)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                }

                
                List((0..<7)){
                    idx in
                    WeatherItemCard(image: "", Day: "Today", wather: "Cloudy", max: 34.01,min: 10.4)
                }.padding(.horizontal, -30)
                    .padding(.vertical, -70)
                    .navigationTitle("Example 1")
                    .navigationBarTitleDisplayMode(.inline)
                    .frame(width: .infinity)
            }
        }
    }
}

struct Weather_Previews: PreviewProvider {
    static var previews: some View {
        WeatherForecastView()
    }
}

 

Read More Tutorial 

You may also like...