Add blur to the left and right of the scroll area using gradation.

MilanistaDev · Dec 13, 2021 · 753286e · 753286e
1 parent e8bcc23
commit 753286e
Showing 1 changed file with 45 additions and 34 deletions.
diff --git a/SwipePageChanger/Top/ToolBarViewModifier.swift b/SwipePageChanger/Top/ToolBarViewModifier.swift
@@ -29,46 +29,57 @@ struct ToolBarViewModifier: ViewModifier {
                 }
                 ToolbarItem(placement: .principal) {
                     GeometryReader { geometryProxy in
-                        ScrollViewReader { scrollProxy in
-                            ScrollView(.horizontal, showsIndicators: false) {
-                                HStack(spacing: .zero) {
-                                    Spacer()
-                                        .frame(width: spacerWidth(geometryProxy.frame(in: .global).origin.x))
-                                    ForEach(items.reversed().indices, id: \.self) { index in
-                                        Button {
-                                            selection = index
-                                            withAnimation {
-                                                scrollProxy.scrollTo(selection, anchor: .center)
-                                            }
-                                        } label: {
-                                            if index == items.count - 1 {
-                                                Image("02_Marunouchi")
-                                                    .resizable()
-                                                    .scaledToFit()
-                                                    .frame(width: 30.0, height: 30.0)
-                                            } else {
-                                                Text(items.reversed()[index])
-                                                    .font(.subheadline)
-                                                    .fontWeight(selection == index ? .semibold: .regular)
-                                                    .foregroundColor(selection == index ? .primary: .gray)
-                                                    .id(index)
+                        ZStack {
+                            ScrollViewReader { scrollProxy in
+                                ScrollView(.horizontal, showsIndicators: false) {
+                                    HStack(spacing: .zero) {
+                                        Spacer()
+                                            .frame(width: spacerWidth(geometryProxy.frame(in: .global).origin.x))
+                                        ForEach(items.reversed().indices, id: \.self) { index in
+                                            Button {
+                                                selection = index
+                                                withAnimation {
+                                                    scrollProxy.scrollTo(selection, anchor: .center)
+                                                }
+                                            } label: {
+                                                if index == items.count - 1 {
+                                                    Image("02_Marunouchi")
+                                                        .resizable()
+                                                        .scaledToFit()
+                                                        .frame(width: 30.0, height: 30.0)
+                                                } else {
+                                                    Text(items.reversed()[index])
+                                                        .font(.subheadline)
+                                                        .fontWeight(selection == index ? .semibold: .regular)
+                                                        .foregroundColor(selection == index ? .primary: .gray)
+                                                        .id(index)
+                                                }
                                             }
+                                            .frame(width: 100.0, height: 44.0)
                                         }
-                                        .frame(width: 100.0, height: 44.0)
+                                        Spacer()
+                                            .frame(width: spacerWidth(geometryProxy.frame(in: .global).origin.x))
                                     }
-                                    Spacer()
-                                        .frame(width: spacerWidth(geometryProxy.frame(in: .global).origin.x))
-                                }
-                                .onAppear {
-                                    self.proxy = scrollProxy
-                                }
-                                .onChange(of: selection) { _ in
-                                    withAnimation {
-                                        self.proxy?.scrollTo(selection, anchor: .center)
+                                    .onAppear {
+                                        self.proxy = scrollProxy
+                                    }
+                                    .onChange(of: selection) { _ in
+                                        withAnimation {
+                                            self.proxy?.scrollTo(selection, anchor: .center)
+                                        }
                                     }
                                 }
-                            }
 
+                            }
+                            HStack {
+                                LinearGradient(gradient: Gradient(colors: [.white, .white.opacity(0.1)]),
+                                               startPoint: .leading, endPoint: .trailing)
+                                    .frame(width: 8.0, height: 44.0)
+                                Spacer()
+                                LinearGradient(gradient: Gradient(colors: [.white.opacity(0.1), .white]),
+                                               startPoint: .leading, endPoint: .trailing)
+                                    .frame(width: 8.0, height: 44.0)
+                            }
                         }
                     }
                 }