gpesquero/organicmaps
1
Fork 0
forked from organicmaps/organicmaps
Code Pull requests Activity

ios: make fullscreen images viewer with zoom

Browse source
This commit is contained in:
Emin 2024-10-02 11:45:33 +05:00
parent 1077efd56c
commit fff086dcf4
6 changed files with 195 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
iphone/Maps/Maps.xcodeproj/project.pbxproj
View file

@ -584,6 +584,7 @@
CDCA278622451F5000167D87 /* RouteInfo.swift in Sources */ = {isa = PBXBuildFile; fileRef = CDCA278522451F5000167D87 /* RouteInfo.swift */; };
CDCA278E2248F34C00167D87 /* MWMRoutingManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = CDCA278B2248F34C00167D87 /* MWMRoutingManager.mm */; };
CE2D27F82CA2C49F00094565 /* BackButtonWithText.m in Sources */ = {isa = PBXBuildFile; fileRef = CE2D27F72CA2C49F00094565 /* BackButtonWithText.m */; };
CE60A8C52CAD15C20055F49C /* FullscreenImageViewer.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE60A8C42CAD15C20055F49C /* FullscreenImageViewer.swift */; };
CE64501B2C93F5840075A59B /* PlacePersistenceControllerTesterBro.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE64501A2C93F5840075A59B /* PlacePersistenceControllerTesterBro.swift */; };
CE64501D2C93F8350075A59B /* ReviewsPersistenceController.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE64501C2C93F8350075A59B /* ReviewsPersistenceController.swift */; };
CE6450202C9402EC0075A59B /* ReviewsPersistenceControllerTesterBro.swift in Sources */ = {isa = PBXBuildFile; fileRef = CE64501F2C9402EC0075A59B /* ReviewsPersistenceControllerTesterBro.swift */; };
@ -1638,6 +1639,7 @@
CDE0F3AD225B8D45008BA5C3 /* MWMSpeedCameraManagerMode.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = MWMSpeedCameraManagerMode.h; sourceTree = "<group>"; };
CE2D27F72CA2C49F00094565 /* BackButtonWithText.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = BackButtonWithText.m; sourceTree = "<group>"; };
CE2D27FB2CA2C64700094565 /* BackButtonWithText.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = BackButtonWithText.h; sourceTree = "<group>"; };
CE60A8C42CAD15C20055F49C /* FullscreenImageViewer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FullscreenImageViewer.swift; sourceTree = "<group>"; };
CE64501A2C93F5840075A59B /* PlacePersistenceControllerTesterBro.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PlacePersistenceControllerTesterBro.swift; sourceTree = "<group>"; };
CE64501C2C93F8350075A59B /* ReviewsPersistenceController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReviewsPersistenceController.swift; sourceTree = "<group>"; };
CE64501F2C9402EC0075A59B /* ReviewsPersistenceControllerTesterBro.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReviewsPersistenceControllerTesterBro.swift; sourceTree = "<group>"; };
@ -3365,6 +3367,7 @@
52EF1B612C8989F1003046A4 /* PlaceViewController.swift */,
52EF1B652C8989F9003046A4 /* PlaceViewModel.swift */,
CED0E01A2C8B048C008C61CA /* AllPicsScreen.swift */,
CE60A8C42CAD15C20055F49C /* FullscreenImageViewer.swift */,
);
name = PlaceDetails;
path = Profile/PlaceDetails;
@ -5572,6 +5575,7 @@
47B9065321C7FA400079C85E /* MWMImageCache.m in Sources */,
F6FEA82E1C58F108007223CC /* MWMButton.m in Sources */,
34B924431DC8A29C0008D971 /* MWMMailViewController.m in Sources */,
CE60A8C52CAD15C20055F49C /* FullscreenImageViewer.swift in Sources */,
340475651E081A4600C92850 /* MWMRouter.mm in Sources */,
47E3C72F2111F472008B3B27 /* CoverVerticalModalTransitioning.swift in Sources */,
52522F4C2C6E10FD0015709C /* LoadImg.swift in Sources */,

10
iphone/Maps/Tourism/Presentation/Home/Screens/Profile/PlaceDetails/AllPicsScreen.swift
View file

@ -22,10 +22,12 @@ struct AllPicsScreen: View {
spacing: 16
) {
ForEach(urls, id: \.self) { url in
LoadImageView(url: url)
.frame(maxWidth: minWidth, maxHeight: maxHeight)
.clipShape(RoundedRectangle(cornerRadius: 8))
.scaledToFill()
NavigationLink(destination: FullscreenImageViewer(selectedImageUrl: url, imageUrls: urls)) {
LoadImageView(url: url)
.frame(maxWidth: minWidth, maxHeight: maxHeight)
.clipShape(RoundedRectangle(cornerRadius: 8))
.scaledToFill()
}
}
}
}

140
iphone/Maps/Tourism/Presentation/Home/Screens/Profile/PlaceDetails/FullscreenImageViewer.swift Normal file
View file

@ -0,0 +1,140 @@
import SwiftUI
import Combine
struct FullscreenImageViewer: View {
let imageUrls: [String]
@State private var currentPage: Int
@State private var scale: CGFloat = 1.0
@State private var lastScale: CGFloat = 1.0
@State private var offset: CGSize = .zero
@State private var lastOffset: CGSize = .zero
@GestureState private var magnifyBy = 1.0
@Environment(\.presentationMode) var presentationMode
init(selectedImageUrl: String, imageUrls: [String]) {
self.imageUrls = imageUrls
let initialIndex = imageUrls.firstIndex(of: selectedImageUrl) ?? 0
_currentPage = State(initialValue: initialIndex)
}
var body: some View {
GeometryReader { geometry in
ZStack {
// images
SwiftUI.TabView(selection: $currentPage) {
ForEach(imageUrls.indices, id: \.self) { index in
ZoomableImageView(
imageUrl: imageUrls[index],
scale: $scale,
offset: $offset
)
.tag(index)
}
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.gesture(
MagnificationGesture()
.updating($magnifyBy) { currentState, gestureState, _ in
gestureState = currentState
}
.onEnded { value in
scale = min(max(1, scale * value), 3)
}
)
.simultaneousGesture(
DragGesture()
.onChanged { value in
if scale > 1 {
offset = CGSize(
width: lastOffset.width + value.translation.width,
height: lastOffset.height + value.translation.height
)
}
}
.onEnded { _ in
if scale > 1 {
lastOffset = offset
} else {
offset = .zero
lastOffset = .zero
}
}
)
// back button
VStack {
HStack {
BackButtonWithText {
presentationMode.wrappedValue.dismiss()
}.padding(.leading, 16)
Spacer()
}
Spacer()
}
//page indicator
VStack {
Spacer()
HStack(spacing: 8) {
ForEach(imageUrls.indices, id: \.self) { index in
Circle()
.fill(currentPage == index ? Color.primary : Color.primary.opacity(0.25))
.frame(width: 8, height: 8)
}
}
}
.padding(.bottom, 16)
}
}
}
}
struct ZoomableImageView: View {
let imageUrl: String
@Binding var scale: CGFloat
@Binding var offset: CGSize
@StateObject private var imageLoader = ImageLoader()
var body: some View {
Group {
if let image = imageLoader.image {
Image(uiImage: image)
.resizable()
.aspectRatio(contentMode: .fit)
.scaleEffect(scale)
.offset(offset)
} else if imageLoader.isLoading {
ProgressView()
} else {
Text(L("error"))
}
}
.onAppear {
imageLoader.load(fromURLString: imageUrl)
}
}
}
class ImageLoader: ObservableObject {
@Published var image: UIImage?
@Published var isLoading = false
private var cancellable: AnyCancellable?
func load(fromURLString urlString: String) {
guard let url = URL(string: urlString) else { return }
cancellable?.cancel()
self.image = nil
self.isLoading = true
cancellable = URLSession.shared.dataTaskPublisher(for: url)
.map { UIImage(data: $0.data) }
.replaceError(with: nil)
.receive(on: DispatchQueue.main)
.sink { [weak self] in
self?.image = $0
self?.isLoading = false
}
}
}

61
iphone/Maps/Tourism/Presentation/Home/Screens/Profile/PlaceDetails/Gallery/GalleryScreen.swift
View file

@ -3,47 +3,54 @@ import SwiftUI
struct GalleryScreen: View {
let urls: [String]?
let secondRowHeight = 100.0
let secondRowHeight = 130.0
let shape = RoundedRectangle(cornerRadius: 8)
@State var goToAllGalleryScreen = false
var body: some View {
if let urls = urls, !urls.isEmpty {
VStack {
LoadImageView(url: urls.first)
.frame(maxWidth: UIScreen.main.bounds.width - 32, minHeight: 200, maxHeight: 200)
.clipShape(shape)
NavigationLink(destination: FullscreenImageViewer(selectedImageUrl: urls[0], imageUrls: urls)) {
LoadImageView(url: urls.first)
.frame(maxWidth: UIScreen.main.bounds.width - 32, minHeight: 200, maxHeight: 200)
.clipShape(shape)
}
VerticalSpace(height: 16)
HStack(spacing: 16) {
if urls.count > 1 {
LoadImageView(url: urls[1])
.frame(height: secondRowHeight)
.clipShape(shape)
.aspectRatio(1, contentMode: .fit)
if urls.count > 2 {
NavigationLink(destination: AllPicsScreen(urls: urls)) {
ZStack {
LoadImageView(url: urls[2])
.frame(height: secondRowHeight)
if urls.count > 3 {
SwiftUI.Color.black.opacity(0.5)
.frame(height: secondRowHeight)
.clipShape(shape)
GeometryReader { geometry in
let secondColumnWidth = geometry.size.width / 2 - 8
HStack(spacing: 16) {
if urls.count > 1 {
NavigationLink(destination: FullscreenImageViewer(selectedImageUrl: urls[1], imageUrls: urls)) {
LoadImageView(url: urls[1])
.frame(width: secondColumnWidth, height: secondRowHeight)
.clipShape(shape)
}
if (urls.count == 2) { Spacer() }
if urls.count > 2 {
NavigationLink(destination: AllPicsScreen(urls: urls)) {
ZStack {
LoadImageView(url: urls[2])
Text("+\(urls.count - 3)")
.font(.headline)
.foregroundColor(.white)
if urls.count > 3 {
SwiftUI.Color.black.opacity(0.5)
.frame(height: secondRowHeight)
.clipShape(shape)
Text("+\(urls.count - 3)")
.font(.headline)
.foregroundColor(.white)
}
}
.frame(width: secondColumnWidth, height: secondRowHeight)
.clipShape(shape)
}
.clipShape(shape)
.aspectRatio(1, contentMode: .fit)
}
}
}
}.frame(width: geometry.size.width)
}
Spacer()
}.padding(.horizontal, 16)

4
iphone/Maps/Tourism/Presentation/Home/Screens/Profile/PlaceDetails/Reviews/Components/ReviewView.swift
View file

@ -36,7 +36,9 @@ struct ReviewView: View {
ShowMoreView(url: url, remaining: review.picsUrls.count - 3)
}
} else {
ReviewPicView(url: url)
NavigationLink(destination: FullscreenImageViewer(selectedImageUrl: url, imageUrls: review.picsUrls)) {
ReviewPicView(url: url)
}
}
}
}

16
iphone/Maps/UI/Storyboard/Main.storyboard
View file

@ -240,22 +240,22 @@
</constraints>
<variation key="default">
<mask key="constraints">
<exclude reference="K9r-P1-yFI"/>
<exclude reference="SAj-bF-qrr"/>
<exclude reference="SDX-4J-Jz5"/>
<exclude reference="TZk-MH-pMV"/>
<exclude reference="veF-Rn-BEm"/>
<exclude reference="u9s-KY-yCt"/>
<exclude reference="K9r-P1-yFI"/>
<exclude reference="SAj-bF-qrr"/>
<exclude reference="W0l-NG-7lt"/>
</mask>
</variation>
<variation key="heightClass=compact">
<mask key="constraints">
<include reference="K9r-P1-yFI"/>
<exclude reference="85b-Do-jO7"/>
<exclude reference="Rsb-fB-8bn"/>
<include reference="TZk-MH-pMV"/>
<include reference="veF-Rn-BEm"/>
<include reference="K9r-P1-yFI"/>
</mask>
</variation>
<variation key="heightClass=regular">
@ -270,22 +270,22 @@
</variation>
<variation key="heightClass=compact-widthClass=compact">
<mask key="constraints">
<exclude reference="t9l-Ud-h6j"/>
<exclude reference="9M9-8P-Hzb"/>
<exclude reference="t9l-Ud-h6j"/>
</mask>
</variation>
<variation key="heightClass=compact-widthClass=regular">
<mask key="constraints">
<exclude reference="t9l-Ud-h6j"/>
<exclude reference="9M9-8P-Hzb"/>
<exclude reference="t9l-Ud-h6j"/>
</mask>
</variation>
<variation key="heightClass=regular-widthClass=regular">
<mask key="constraints">
<exclude reference="t9l-Ud-h6j"/>
<include reference="SAj-bF-qrr"/>
<exclude reference="9M9-8P-Hzb"/>
<include reference="u9s-KY-yCt"/>
<exclude reference="t9l-Ud-h6j"/>
<include reference="SAj-bF-qrr"/>
<exclude reference="9rR-QQ-c1P"/>
<include reference="W0l-NG-7lt"/>
<exclude reference="5Sh-l6-Icd"/>
@ -312,7 +312,7 @@
<segue destination="lFr-lA-JTW" kind="show" identifier="PP2BookmarkEditing" id="0A8-4b-0A2"/>
<segue destination="Psz-BY-Fy4" kind="presentation" identifier="PP2BookmarkEditingIPAD" modalPresentationStyle="formSheet" id="k6v-a7-5DO"/>
<segue destination="DdR-kk-MnB" kind="show" identifier="Map2Settings" id="Uyr-xb-oJc"/>
<segue destination="SOp-Vz-BSi" kind="presentation" identifier="Map2TourismMain" animates="NO" modalPresentationStyle="fullScreen" id="ZyV-kc-eXo"/>
<segue destination="SOp-Vz-BSi" kind="presentation" identifier="Map2TourismMain" modalPresentationStyle="fullScreen" id="ZyV-kc-eXo"/>
<segue destination="6OK-aq-fiY" kind="presentation" identifier="Map2Auth" modalPresentationStyle="fullScreen" id="ZTS-EN-BxZ"/>
</connections>
</viewController>