This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

One, the introduction

Today’s actual combat, copy the iPhone’s own weather APP.

On the left is the real weather App and on the right is a fake one.

Second, the first task – layout

The first thing to consider when writing this APP is the overall layout. For example, this APP can be slid to the bottom, that is to say, the contents cannot be expanded to display all in one page, and the rest of the contents need to be displayed by sliding. Based on this, a duo using ScrollView and LazyVStack is a must. ScrollView can make the page content unlimited height; LazyVStack can optimize lazy loading for large amounts of content rendering, improving performance.

ScrollView{
    LazyVStack{
        // The contents are as follows}}Copy the code

Next, the background Image is accompanied by the ScrollView, first by superimposing the ScrollView and Image on the ZStack, and then adjusting the Image to stretch to the full.

ZStack{
    Image("weather").resizable() // Resize the view to extend all by default.
    ScrollView{
        LazyVStack{}}}Copy the code

3. Subject area

This part, too, is simple: four Text components, assign content, adjust font size and color.

VStack{
    Text("Changping District").font(.title)
    Text("Partly cloudy")
    Text("26").font(.system(size: 75))
    Text("29 up, 22 down.").bold()
}.padding(.top, 50)
Copy the code

Fourth, the AQI

This section can be divided into four parts, three Text, plus a quality index distribution map.

Here’s how to draw the distribution map:

  • The first is an asymptotically colored rectangle with rounded corners, which you don’t need to use hereRectangle, can be used directlyLinearGradientTo implement.
  • Second, there is a small circle inside that identifies where the current exponential distribution is. useRoundedRectangleAfter that,frameSpecifies that the width and height are equal, which is a circle.
  • Finally, useZStackAdd them together.

The code is as follows:

ZStack{
    LinearGradient(gradient: Gradient(colors: [Color.green, Color.yellow, Color.white]), startPoint: .leading, endPoint: .trailing).frame(height: 10).cornerRadius(25)
    RoundedRectangle(cornerRadius: 50).stroke(lineWidth: 1.75).fill().frame(width: 10, height: 10).foregroundColor(.black).shadow(color: .white, radius: 1, x: 0.0, y: 0.0)}Copy the code

V. Landscape scroll view

This is a landscape view, and you need to hide the scroll bar (which is displayed by default).

 ScrollView(.horizontal, showsIndicators: false) {HStack(spacing: 20) {}}Copy the code

The important thing to note here is that by default, horizontal is essentially a horizontal scrolling view. But if you do not add a HStack in the internal package content, horizontal does not take effect, Google Baidu StackOverflow did not find the reason, DO not know whether the bug of SwiftUI, so in this special reminder.

Six, encapsulation

Again, for this part, let’s think about the layout, the red vertical layoutVStack, green horizontal layoutHStack.

 VStack{
                        
    ForEach(weeks, id: \.self){week in
        
        HStack{
            
            Text(week).padding(.trailing).padding(.leading)
            Spacer()
            weathers[Int.random(in: 0..<3)]
            Spacer(a)Text("\(Int.random(in: 28..<32))")
            Spacer(a)Text("\(Int.random(in: 22..<38))").foregroundColor(Color(red: 175/255, green: 180/255, blue: 185/255)).padding(.trailing)
            
        }.padding(.bottom, 1.5)}}Copy the code

It is recommended to have a layer of encapsulation for horizontal layout content to improve the readability of the code.

Create a weekrowView. swift file with the following code:

struct WeekRowView: View {
    
    var week: String
    
    var weather: Image
    
    var maxTemperature: Int
    
    var minTemperature: Int
    
    var body: some View {
        HStack{
            
            Text(week).padding(.trailing).padding(.leading)
            Spacer()
            weather
            Spacer(a)Text("\(maxTemperature)")
            Spacer(a)Text("\(minTemperature)").foregroundColor(Color(red: 175/255, green: 180/255, blue: 185/255)).padding(.trailing)
            
        }.padding(.bottom, 1.5)}}Copy the code

Then modify the above code as follows:

VStack{
                        
    ForEach(weeks, id: \.self){week in   
        WeekRowView(week: week, weather: weathers[Int.random(in: 0..<3)], maxTemperature: Int.random(in: 28..<32), minTemperature: Int.random(in: 22..<38))}}Copy the code

This part is the same as above, I won’t describe it in detail.

Seven,Linklink

HStack{
    Text("The weather in Changping District,").foregroundColor(.white)
    
    Link(destination: URL(string: "http://maps.apple.com")!, label: {
        Text("Open in" Map "").underline()
    })
}

Copy the code
  • useLinkComponents,destinationA link to an address, either a website orapp. The site will jump to the default browser to open.
  • Underline use.underlineProperties.

At this point, the entire weather APP UI copy is completed.

The appendix

The code address