Skip to content

Commit

Permalink
NewTweetButtonをタブ時にアニメーションをかける
Browse files Browse the repository at this point in the history
  • Loading branch information
boardguy1024 committed Oct 14, 2023
1 parent b4704b2 commit 7433844
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 32 deletions.
4 changes: 4 additions & 0 deletions TwitterSwiftUI.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
2DC291482ADA3D49006E9E23 /* Message.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DC291472ADA3D49006E9E23 /* Message.swift */; };
2DC2914A2ADA3FC9006E9E23 /* ConversationsViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DC291492ADA3FC9006E9E23 /* ConversationsViewModel.swift */; };
2DC2914C2ADA504C006E9E23 /* ConversationRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DC2914B2ADA504C006E9E23 /* ConversationRowView.swift */; };
2DE08BE72ADAEBF900DAA3C4 /* NewTweetButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2DE08BE62ADAEBF900DAA3C4 /* NewTweetButton.swift */; };
FF170EE32AD29E7800B90E2D /* PreviewProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FF170EE22AD29E7800B90E2D /* PreviewProvider.swift */; };
FF170EE52AD2A09E00B90E2D /* RegistrationViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = FF170EE42AD2A09E00B90E2D /* RegistrationViewModel.swift */; };
FF170EE82AD2A27D00B90E2D /* LoginViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = FF170EE72AD2A27D00B90E2D /* LoginViewModel.swift */; };
Expand Down Expand Up @@ -106,6 +107,7 @@
2DC291472ADA3D49006E9E23 /* Message.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Message.swift; sourceTree = "<group>"; };
2DC291492ADA3FC9006E9E23 /* ConversationsViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ConversationsViewModel.swift; sourceTree = "<group>"; };
2DC2914B2ADA504C006E9E23 /* ConversationRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ConversationRowView.swift; sourceTree = "<group>"; };
2DE08BE62ADAEBF900DAA3C4 /* NewTweetButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewTweetButton.swift; sourceTree = "<group>"; };
FF170EE22AD29E7800B90E2D /* PreviewProvider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PreviewProvider.swift; sourceTree = "<group>"; };
FF170EE42AD2A09E00B90E2D /* RegistrationViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RegistrationViewModel.swift; sourceTree = "<group>"; };
FF170EE72AD2A27D00B90E2D /* LoginViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoginViewModel.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -479,6 +481,7 @@
isa = PBXGroup;
children = (
FF44B93C2ABC8A97005B87F4 /* MainTabView.swift */,
2DE08BE62ADAEBF900DAA3C4 /* NewTweetButton.swift */,
FF4C5D7A2AD289E4003F3E90 /* MainTabBarViewModel.swift */,
);
path = MainTab;
Expand Down Expand Up @@ -672,6 +675,7 @@
FF44B94B2ABC8D6A005B87F4 /* ProfileView.swift in Sources */,
FFACF2BC2AC1A82C00A2C911 /* Tweet.swift in Sources */,
FF63590E2AD7EA6700A7B114 /* TweetListViewModel.swift in Sources */,
2DE08BE72ADAEBF900DAA3C4 /* NewTweetButton.swift in Sources */,
2D89D9DC2AD9844200F20E91 /* FeedTabListView.swift in Sources */,
FF2EE4FB2ABF1C2F000522CF /* TextAreaView.swift in Sources */,
FFFB5D582AC0210600817497 /* ImagePicker.swift in Sources */,
Expand Down
Binary file not shown.
18 changes: 18 additions & 0 deletions TwitterSwiftUI/Core/TabBar/MainTab/MainTabBarViewModel.swift
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,24 @@

import Foundation

enum MainTabBarFilter: Int, CaseIterable, Identifiable {
case home
case explore
case notifications
case messages

var image: String {
switch self {
case .home: "Home"
case .explore: "Search"
case .notifications: "Notifications"
case .messages: "Message"
}
}

var id: Int { self.rawValue }
}

class MainTabBarViewModel: ObservableObject {
@Published var showSideMenu: Bool = false
}
48 changes: 16 additions & 32 deletions TwitterSwiftUI/Core/TabBar/MainTab/MainTabView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ import SwiftUI
struct MainTabView: View {

@State private var showSideMenu: Bool = false
@State private var selectedIndex: Int = 0
@State private var selectedTab: MainTabBarFilter = .home

private let sideBarWidth = UIScreen.main.bounds.width - 90

@State private var offset: CGFloat = 0
@State private var lastStoredOffset: CGFloat = 0
@GestureState private var gestureOffset: CGFloat = 0


init() {
// カスタムTabBarを使うため、default tabBarを隠す
UITabBar.appearance().isHidden = true
Expand All @@ -33,19 +34,19 @@ struct MainTabView: View {
ZStack(alignment: .bottomTrailing) {

VStack(spacing: 0) {
TabView(selection: $selectedIndex) {
TabView(selection: $selectedTab) {

FeedView(showSideMenu: $showSideMenu)
.tag(0)
.tag(MainTabBarFilter.home)

ExploreView()
.tag(1)
.tag(MainTabBarFilter.explore)

NotificationsView()
.tag(2)
.tag(MainTabBarFilter.notifications)

ConversationsView()
.tag(3)
.tag(MainTabBarFilter.messages)
}

VStack(spacing: 0) {
Expand All @@ -54,17 +55,13 @@ struct MainTabView: View {

// CustomTabBar
HStack(spacing: 0) {
TabButton(image: "Home", tag: 0)

TabButton(image: "Search", tag: 1)

TabButton(image: "Notifications", tag: 2)

TabButton(image: "Message", tag: 3)
ForEach(MainTabBarFilter.allCases) { tab in
TabButton(tab: tab)
}
}
.padding(.top, 15)
.padding(.bottom, 10)
.background(Color.clear.opacity(0.03)) // 確認のため背景をかける
.background(Color.clear.opacity(0.03))
}
}
.overlay(
Expand All @@ -76,20 +73,7 @@ struct MainTabView: View {
}
)

Button {
// showNewTweetView.toggle()
} label: {
Image(systemName: "square.and.pencil")
.font(.title2)
.foregroundColor(.white)
}
.background(
Circle()
.fill(Color(.systemBlue))
.frame(width: 54, height: 54)
)
.padding(.trailing, 36)
.padding(.bottom, 70)
NewTweetButton(selectedTab: $selectedTab)
}

}
Expand Down Expand Up @@ -198,18 +182,18 @@ struct MainTabView: View {
}

@ViewBuilder
func TabButton(image: String, tag: Int) -> some View {
func TabButton(tab: MainTabBarFilter) -> some View {
Button {
withAnimation {
selectedIndex = tag
selectedTab = tab
}
} label: {
Image(image)
Image(tab.image)
.resizable()
.renderingMode(.template)
.aspectRatio(contentMode: .fit)
.frame(width: 23, height: 23)
.foregroundColor(selectedIndex == tag ? .primary : .gray)
.foregroundColor(selectedTab == tab ? .primary : .gray)
.frame(maxWidth: .infinity)
}
}
Expand Down
78 changes: 78 additions & 0 deletions TwitterSwiftUI/Core/TabBar/MainTab/NewTweetButton.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
//
// NewTweetButton.swift
// TwitterSwiftUI
//
// Created by paku on 2023/10/15.
//

import SwiftUI

struct NewTweetButton: View {

@Binding var selectedTab: MainTabBarFilter
@State private var beforeSelectedTab: MainTabBarFilter = .home

@State private var isRotated: Bool = false
@State private var scaleEffect: CGFloat = 1.0

init(selectedTab: Binding<MainTabBarFilter>) {
_selectedTab = selectedTab
}

var body: some View {
Button {

// showNewTweetView.toggle()
} label: {
if selectedTab == .messages {
Image("Message")
.resizable()
.renderingMode(.template)
.foregroundColor(.white)
.scaledToFit()
.frame(width: 20, height: 20)
.rotationEffect(Angle(degrees: -180))
.rotationEffect(Angle(degrees: isRotated ? 180 : 0))
.scaleEffect(scaleEffect)
} else {
Image(systemName: "plus")
.font(.title2)
.foregroundColor(.white)
.rotationEffect(Angle(degrees: isRotated ? 180 : 0))
.scaleEffect(scaleEffect)
}
}
.onChange(of: selectedTab) { tab in
// 他のタブ -> メッセージタブ時、アニメーション
// メッセージタブ -> 他のタブ時、アニメーション
if selectedTab == .messages
|| selectedTab != .messages && beforeSelectedTab == .messages {
withAnimation {
isRotated.toggle()
scaleEffect = 1.3
}
}

DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
withAnimation(.spring(response: 0.5)) {
scaleEffect = 1.0
}
}

self.beforeSelectedTab = selectedTab

}
.background(
Circle()
.fill(Color(.systemBlue))
.frame(width: 54, height: 54)
.scaleEffect(scaleEffect)
)
.padding(.trailing, 36)
.padding(.bottom, 70)
}
}

#Preview {
NewTweetButton(selectedTab: .constant(.home))
}

0 comments on commit 7433844

Please sign in to comment.