feat(Views): 增加 SideMenu page

增加 SideMenu page

Signed-off-by: Ching <loooching@gmail.com>
This commit is contained in:
Ching 2023-05-02 13:30:54 +08:00
parent bf350882b4
commit 6afccd6445
12 changed files with 349 additions and 49 deletions

View File

@ -19,6 +19,11 @@
24A59ABE2A003108009C9E3E /* MessagesView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59ABD2A003108009C9E3E /* MessagesView.swift */; };
24A59AC22A003249009C9E3E /* ProfileView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59AC12A003249009C9E3E /* ProfileView.swift */; };
24A59AC42A003A52009C9E3E /* TwewtFilterViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59AC32A003A52009C9E3E /* TwewtFilterViewModel.swift */; };
24A59AC92A00BA81009C9E3E /* UserRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59AC82A00BA81009C9E3E /* UserRowView.swift */; };
24A59ACE2A00BDCB009C9E3E /* SideMenuView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59ACD2A00BDCB009C9E3E /* SideMenuView.swift */; };
24A59AD22A00BE14009C9E3E /* SideMenuViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59AD12A00BE14009C9E3E /* SideMenuViewModel.swift */; };
24A59AD42A00C07D009C9E3E /* UserStatsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59AD32A00C07D009C9E3E /* UserStatsView.swift */; };
24A59AD62A00CA82009C9E3E /* SideMenuOptionRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 24A59AD52A00CA82009C9E3E /* SideMenuOptionRowView.swift */; };
/* End PBXBuildFile section */
/* Begin PBXFileReference section */
@ -36,6 +41,11 @@
24A59ABD2A003108009C9E3E /* MessagesView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessagesView.swift; sourceTree = "<group>"; };
24A59AC12A003249009C9E3E /* ProfileView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ProfileView.swift; sourceTree = "<group>"; };
24A59AC32A003A52009C9E3E /* TwewtFilterViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TwewtFilterViewModel.swift; sourceTree = "<group>"; };
24A59AC82A00BA81009C9E3E /* UserRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserRowView.swift; sourceTree = "<group>"; };
24A59ACD2A00BDCB009C9E3E /* SideMenuView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SideMenuView.swift; sourceTree = "<group>"; };
24A59AD12A00BE14009C9E3E /* SideMenuViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SideMenuViewModel.swift; sourceTree = "<group>"; };
24A59AD32A00C07D009C9E3E /* UserStatsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserStatsView.swift; sourceTree = "<group>"; };
24A59AD52A00CA82009C9E3E /* SideMenuOptionRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SideMenuOptionRowView.swift; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -92,6 +102,7 @@
2492CC1B2A00228F0086C525 /* Core */ = {
isa = PBXGroup;
children = (
24A59ACA2A00BDA1009C9E3E /* SideMenu */,
2492CC212A0022C30086C525 /* Components */,
24A59AB82A00308E009C9E3E /* Profile */,
24A59AB72A00305E009C9E3E /* Explore */,
@ -136,6 +147,7 @@
2492CC212A0022C30086C525 /* Components */ = {
isa = PBXGroup;
children = (
24A59AC72A00BA6A009C9E3E /* Users */,
2492CC262A0025A50086C525 /* Tweets */,
);
path = Components;
@ -191,7 +203,8 @@
24A59AB72A00305E009C9E3E /* Explore */ = {
isa = PBXGroup;
children = (
24A59AB92A0030CB009C9E3E /* ExploreView.swift */,
24A59AC62A00BA47009C9E3E /* Views */,
24A59AC52A00BA3A009C9E3E /* ViewModels */,
);
path = Explore;
sourceTree = "<group>";
@ -221,6 +234,56 @@
path = ViewModels;
sourceTree = "<group>";
};
24A59AC52A00BA3A009C9E3E /* ViewModels */ = {
isa = PBXGroup;
children = (
);
path = ViewModels;
sourceTree = "<group>";
};
24A59AC62A00BA47009C9E3E /* Views */ = {
isa = PBXGroup;
children = (
24A59AB92A0030CB009C9E3E /* ExploreView.swift */,
);
path = Views;
sourceTree = "<group>";
};
24A59AC72A00BA6A009C9E3E /* Users */ = {
isa = PBXGroup;
children = (
24A59AC82A00BA81009C9E3E /* UserRowView.swift */,
24A59AD32A00C07D009C9E3E /* UserStatsView.swift */,
);
path = Users;
sourceTree = "<group>";
};
24A59ACA2A00BDA1009C9E3E /* SideMenu */ = {
isa = PBXGroup;
children = (
24A59ACC2A00BDB7009C9E3E /* ViewModels */,
24A59ACB2A00BDAF009C9E3E /* Views */,
);
path = SideMenu;
sourceTree = "<group>";
};
24A59ACB2A00BDAF009C9E3E /* Views */ = {
isa = PBXGroup;
children = (
24A59ACD2A00BDCB009C9E3E /* SideMenuView.swift */,
24A59AD52A00CA82009C9E3E /* SideMenuOptionRowView.swift */,
);
path = Views;
sourceTree = "<group>";
};
24A59ACC2A00BDB7009C9E3E /* ViewModels */ = {
isa = PBXGroup;
children = (
24A59AD12A00BE14009C9E3E /* SideMenuViewModel.swift */,
);
path = ViewModels;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
@ -297,10 +360,15 @@
2492CC282A0025DD0086C525 /* TweetRowView.swift in Sources */,
24A59AC42A003A52009C9E3E /* TwewtFilterViewModel.swift in Sources */,
2492CC252A0023220086C525 /* FeedView.swift in Sources */,
24A59ACE2A00BDCB009C9E3E /* SideMenuView.swift in Sources */,
2492CC0D2A000EB00086C525 /* dudu_tweetApp.swift in Sources */,
24A59ABA2A0030CB009C9E3E /* ExploreView.swift in Sources */,
24A59AD22A00BE14009C9E3E /* SideMenuViewModel.swift in Sources */,
24A59AD62A00CA82009C9E3E /* SideMenuOptionRowView.swift in Sources */,
24A59AC92A00BA81009C9E3E /* UserRowView.swift in Sources */,
24A59AB42A002EB8009C9E3E /* MainTabView.swift in Sources */,
24A59ABC2A0030EC009C9E3E /* NotificationsView.swift in Sources */,
24A59AD42A00C07D009C9E3E /* UserStatsView.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
};

View File

@ -8,14 +8,47 @@
import SwiftUI
struct ContentView: View {
@State private var showMenu = false
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
ZStack(alignment: .topLeading) {
MainTabView()
.navigationBarHidden(showMenu)
if showMenu {
ZStack {
Color(.black)
.opacity(showMenu ? 0.25 : 0.0)
}.onTapGesture {
withAnimation(.easeInOut) {
showMenu = false
}
}
.ignoresSafeArea()
}
SideMenuView()
.frame(width: 300)
.offset(x: showMenu ? 0: -300, y: 0)
.background(showMenu ? Color.white: Color.clear)
}
.navigationTitle("Home")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
withAnimation(.easeInOut) {
showMenu.toggle()
}
} label: {
Circle()
.frame(width: 32, height: 32)
}
}
}
.onAppear {
showMenu = false
}
.padding()
}
}

View File

@ -0,0 +1,34 @@
//
// UserRowView.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import SwiftUI
struct UserRowView: View {
var body: some View {
HStack(spacing: 12) {
Circle()
.frame(width: 48, height: 48)
VStack(alignment: .leading, spacing: 4) {
Text("Lith")
.font(.subheadline).bold()
.foregroundColor(.black)
Text("李四")
.font(.subheadline)
.foregroundColor(.gray)
}
Spacer()
}
.padding(.horizontal)
.padding(.vertical, 4)
}
}
struct UserRowView_Previews: PreviewProvider {
static var previews: some View {
UserRowView()
}
}

View File

@ -0,0 +1,37 @@
//
// UserStatsView.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import SwiftUI
struct UserStatsView: View {
var body: some View {
HStack(spacing: 24) {
HStack(spacing: 4) {
Text("13214")
.bold()
.font(.subheadline)
Text("Following")
.font(.caption)
.foregroundColor(.gray)
}
HStack(spacing: 4) {
Text("995353")
.bold()
.font(.subheadline)
Text("Followers")
.font(.caption)
.foregroundColor(.gray)
}
}
}
}
struct UserStatsView_Previews: PreviewProvider {
static var previews: some View {
UserStatsView()
}
}

View File

@ -1,20 +0,0 @@
//
// ExploreView.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import SwiftUI
struct ExploreView: View {
var body: some View {
Text("Explore view")
}
}
struct ExploreView_Previews: PreviewProvider {
static var previews: some View {
ExploreView()
}
}

View File

@ -0,0 +1,37 @@
//
// ExploreView.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import SwiftUI
struct ExploreView: View {
var body: some View {
NavigationView {
VStack {
ScrollView {
LazyVStack {
ForEach(0...25, id: \.self) { _ in
NavigationLink {
ProfileView()
} label: {
UserRowView()
}
}
}
}
}
.navigationTitle("Explore")
.navigationBarTitleDisplayMode(.inline)
}
}
}
struct ExploreView_Previews: PreviewProvider {
static var previews: some View {
ExploreView()
}
}

View File

@ -9,6 +9,7 @@ import SwiftUI
struct ProfileView: View {
@State private var selectedFilter: TweetFilterViewModel = .tweets
@Environment(\.presentationMode) var mode // explore
@Namespace var animation
var body: some View {
@ -41,13 +42,13 @@ extension ProfileView {
.ignoresSafeArea()
VStack {
Button {
// action here
mode.wrappedValue.dismiss()
} label: {
Image(systemName: "arrow.left")
.resizable()
.frame(width: 20, height: 16)
.foregroundColor(.white)
.offset(x: 16, y: 12)
.offset(x: 16, y: 0)
}
Circle()
@ -107,25 +108,8 @@ extension ProfileView {
.foregroundColor(.gray)
.font(.caption)
HStack(spacing: 24) {
HStack(spacing: 4) {
Text("13214")
.bold()
.font(.subheadline)
Text("Following")
.font(.caption)
.foregroundColor(.gray)
}
HStack(spacing: 4) {
Text("995353")
.bold()
.font(.subheadline)
Text("Followers")
.font(.caption)
.foregroundColor(.gray)
}
}
.padding(.vertical)
UserStatsView()
.padding(.vertical)
}
.padding(.horizontal)
}

View File

@ -0,0 +1,33 @@
//
// SideMenuViewModel.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import Foundation
enum SideMenuViewModel: Int, CaseIterable {
case profile
case lists
case bookmarks
case logout
var title: String {
switch self {
case .profile: return "Profile"
case .lists: return "Lists"
case .bookmarks: return "Bookmarks"
case .logout: return "Logout"
}
}
var imageName: String {
switch self {
case .profile: return "person"
case .lists: return "list.bullet"
case .bookmarks: return "bookmark"
case .logout: return "arrow.left.square"
}
}
}

View File

@ -0,0 +1,34 @@
//
// SideMenuOptionRowView.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import SwiftUI
struct SideMenuOptionRowView: View {
let viewModel: SideMenuViewModel
var body: some View {
HStack(spacing:16) {
Image(systemName: viewModel.imageName)
.font(.headline)
.foregroundColor(.gray)
Text(viewModel.title)
.font(.subheadline)
.foregroundColor(.black)
Spacer()
}
.frame(height: 40)
.padding(.horizontal)
}
}
struct SideMenuOptionRowView_Previews: PreviewProvider {
static var previews: some View {
SideMenuOptionRowView(viewModel: .profile)
}
}

View File

@ -0,0 +1,58 @@
//
// SideMenuView.swift
// dudu-tweet
//
// Created by ching on 2023/5/2.
//
import SwiftUI
struct SideMenuView: View {
var body: some View {
VStack(alignment: .leading, spacing: 32) {
VStack(alignment: .leading) {
Circle()
.frame(width: 48, height: 48)
VStack(alignment: .leading, spacing: 4) {
Text("张三")
.font(.headline)
Text("@zhang3")
.font(.caption)
.foregroundColor(.gray)
}
UserStatsView()
.padding(.vertical)
}
.padding(.leading)
ForEach(SideMenuViewModel.allCases, id: \.rawValue) { viewModel in
if viewModel == .profile {
NavigationLink {
ProfileView()
} label: {
SideMenuOptionRowView(viewModel: viewModel)
}
} else if viewModel == .logout {
Button {
print("handle logout here")
} label: {
SideMenuOptionRowView(viewModel: viewModel)
}
} else {
SideMenuOptionRowView(viewModel: viewModel)
}
}
Spacer()
}
}
}
struct SideMenuView_Previews: PreviewProvider {
static var previews: some View {
SideMenuView()
}
}

View File

@ -11,7 +11,9 @@ import SwiftUI
struct dudu_tweetApp: App {
var body: some Scene {
WindowGroup {
MainTabView()
NavigationView {
ContentView()
}
}
}
}