SwiftUI home view' list views done

barisozgenn · Dec 24, 2022 · bf729fa · bf729fa
1 parent bd308d1
commit bf729fa
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 11 deletions.
diff --git a/YoutubeMusicCloneUIKit/YoutubeMusicCloneSwiftUI/Core/Music/Views/MusicView.swift b/YoutubeMusicCloneUIKit/YoutubeMusicCloneSwiftUI/Core/Music/Views/MusicView.swift
@@ -9,6 +9,17 @@ import SwiftUI
 
 struct MusicView: View {
     @StateObject var viewModel = MusicViewModel()
+    let data = (1...100).map { "Item \($0)" }
+    let rows = [
+        GridItem(.fixed(65)),
+        GridItem(.fixed(65)),
+        GridItem(.fixed(65)),
+        GridItem(.fixed(65))
+    ]
+    let rowsRect = [
+        GridItem(.fixed(143)),
+        GridItem(.fixed(143))
+    ]
 
     var body: some View {
         ZStack{
@@ -17,8 +28,11 @@ struct MusicView: View {
 
             VStack{
                 categoryView
-                quickPickView
-                Spacer()
+                ScrollView{
+                    quickPickView
+                    listenAgainView
+                    Spacer()
+                } 
             }
 
             VStack{
@@ -77,18 +91,71 @@ extension MusicView {
             HStack{
                 Text("start radio from a song".uppercased())
                     .foregroundColor(.gray)
-                    .font(.caption)
+                    .font(.headline)
                 Spacer()
             }
+            .padding(.horizontal)
+            .padding(.top)
             HStack{
                 Text("Quick picks")
                     .foregroundColor(.white)
-                    .font(.title2)
+                    .font(.title)
+                    .fontWeight(.heavy)
+                Spacer()
+            }
+            .padding(.horizontal)
+
+            quickPickListView
+        }
+        .frame(height: 300)
+    }
+    private var quickPickListView: some View {
+        GeometryReader { prox in
+            ScrollView(.horizontal,showsIndicators: false){
+                LazyHGrid(rows: rows, spacing: 0) {
+                    ForEach(data, id: \.self) { item in
+                        WideMusicCellView()
+                            .frame(width: prox.size.width - 58)
+                            .padding(.leading, 14)
+                    }
+                }
+            }
+            .frame(maxHeight: 300)
+        }
+    }
+    private var listenAgainView: some View{
+        VStack{
+            HStack{
+                Text("Listen Again")
+                    .foregroundColor(.white)
+                    .font(.title)
                     .fontWeight(.heavy)
                 Spacer()
+                Text("More")
+                    .foregroundColor(.white)
+                    .font(.headline)
+                    .fontWeight(.heavy)
+            }
+            .padding(.horizontal)
+            .padding(.top,80)
+            listenAgainListView
+        }
+        .frame(maxHeight: 500)
+    }
+    private var listenAgainListView: some View {
+        GeometryReader { prox in
+            ScrollView(.horizontal,showsIndicators: false){
+                LazyHGrid(rows: rowsRect, spacing: 0) {
+                    ForEach(data, id: \.self) { item in
+                        RectMusicCellView()
+                            .frame(width: 140)
+                            .padding(.leading, -7)
+                    }
+                }
             }
+            .padding(.leading, 7)
+            .frame(maxHeight: 400)
         }
-        .padding()
     }
 }
 struct MusicView_Previews: PreviewProvider {

diff --git a/YoutubeMusicCloneUIKit/YoutubeMusicCloneSwiftUI/Core/Music/Views/RectMusicCellView.swift b/YoutubeMusicCloneUIKit/YoutubeMusicCloneSwiftUI/Core/Music/Views/RectMusicCellView.swift
@@ -18,17 +18,19 @@ extension RectMusicCellView{
             Image("profile-photo")
                 .resizable()
                 .scaledToFit()
-                .frame(width: 172)
+                .frame(width: 120, height: 120)
                 .cornerRadius(7)
                 .onTapGesture {
                     withAnimation(.spring()){
 
                     }
                 }
             Text("SwiftUI")
-                .font(.system(size: 24))
+                .font(.system(size: 20))
                 .fontWeight(.semibold)
                 .foregroundColor(.white)
+                .frame(width: 120, height: 20,alignment: .leading)
+                .lineLimit(1)
         }
     }
 }

diff --git a/YoutubeMusicCloneUIKit/YoutubeMusicCloneSwiftUI/Core/Music/Views/WideMusicCellView.swift b/YoutubeMusicCloneUIKit/YoutubeMusicCloneSwiftUI/Core/Music/Views/WideMusicCellView.swift
@@ -18,7 +18,7 @@ extension WideMusicCellView{
             Image("profile-photo")
                 .resizable()
                 .scaledToFit()
-                .frame(width: 72)
+                .frame(width: 64, height: 64)
                 .cornerRadius(7)
                 .onTapGesture {
                     withAnimation(.spring()){
@@ -29,11 +29,11 @@ extension WideMusicCellView{
             HStack{
                 VStack(alignment: .leading,spacing:7){
                     Text("SwiftUI")
-                        .font(.system(size: 24))
+                        .font(.system(size: 20))
                         .fontWeight(.semibold)
                         .foregroundColor(.white)
                     Text("Baris Ozgen")
-                        .font(.system(size: 22))
+                        .font(.system(size: 18))
                         .fontWeight(.regular)
                         .foregroundColor(Color(.lightGray))
                 }
@@ -49,7 +49,7 @@ extension WideMusicCellView{
                         .resizable()
                         .scaledToFit()
                 }
-                .frame(width: 7)
+                .frame(width: 5)
                 .foregroundColor(.white)
             }
             .padding(.leading)