【Swift P4.5.1】ScrollViewとZoom

前回の引用からスクロールとズームの両立は複雑だと分かる。
あえて、単純にスクロールとズームを組み合わせたらどうなるか確認をしておく。

で、下にスクロールビューにイメージズームを入れてみた。

結果、スクロールが優先的に作動してしまう。（１ポイント操作）
上手くすればピンチによるズーム。（２ポイント操作）

何かしらの工夫が必要である。

状況は、ズーム後のスクロールは動作する。
しかし、スクロール範囲はズーム後の画像全体ではない。
最初の画像サイズ領域に限られる。何らかの修正をする必要がある。

 

import SwiftUI

struct ContentView: View {
    @State private var currentScale: CGFloat = 1.0
    @State private var lastMagnificationValue: CGFloat = 1.0
    var body: some View {
        ScrollView([.horizontal,.vertical],showsIndicators: false)
        {
            Image(uiImage: UIImage(named: "Test")! ) 
                .resizable()
                .scaledToFill()
                .scaleEffect(currentScale)
                .gesture(
                    MagnifyGesture()
                        .onChanged { value in
                            let changeRate = value.magnification / lastMagnificationValue
                            currentScale *= changeRate
                            currentScale = max(1.0, currentScale )
                            lastMagnificationValue = value.magnification
                        }
                        .onEnded { value in
                            lastMagnificationValue = 1.0
                        }
                )
        }
        .scrollTargetLayout()
        .padding()
    }
}

スクロールとズームの混在は意図した通りの反応でないとストレスが溜まる。
モード切り替えを入れるなどワンクッションが入るとストレス軽減になるのかな？

【追記】
ズーム後にImageの.frame()でズーム後サイズを算出し設定してみたがスクロール範囲の変化なし。

 

【Swift P4.5.1】拡大縮小。ピンチジェスチャー

ピンチジェスチャーでのズーム倍率は必ず（1.0）から始まるらしい。
参考書通りに書くとピンチ始まりで必ず原画サイズに戻ってからの拡大になる。
倍率を保存して、そこから再開すれば指を離しても継続できる。とは分かるけど上手くいかない…。

検索に少々掛ったけど何とか見つけた。

note.comさんの
【SwiftUIでImageをピンチイン・ピンチアウト・ダブルタップでズームさせる】

コピペで検索してください。
記事ではズームとスクロールを両立していました。

ここではズームの継続のみ切り出しています。

import SwiftUI

struct ContentView: View {
    @State private var currentScale: CGFloat = 1.0
    @State private var lastMagnificationValue: CGFloat = 1.0
    var body: some View {
                
        Image(uiImage: UIImage(named: "Test")! ) 
            .resizable()
            .scaledToFill()
            .scaleEffect(currentScale)
            .gesture(
                MagnifyGesture()
                    .onChanged { value in
                        let changeRate = value.magnification / lastMagnificationValue
                        currentScale *= changeRate
                        currentScale = max(1.0, currentScale )
                        lastMagnificationValue = value.magnification
                    }
                    .onEnded { value in
                        lastMagnificationValue = 1.0
                    }
             )
    }
}

数値の計算と設定方法で自分の工夫以上に簡単な記述となった^^。

このコードだと倍率1.0以下になるとエラーになるので
currentScale = max(1.0, currentScale )
倍率1.0以上をセットしている。

frameをきちんと設定すれば良いのかもしれない。

 

【Swift P4.5.1】Scrollview

画像と言ったらスクロール！
androidのスクロールはメンドクサ！と思えるくらいあっさりスッキリ。

実際は、グリッドにサムネイル画像を並べてリンク張ってタップされたらスクロールビューを開く感じ。
チュートリアルを見ても簡単でした。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack () {
            ScrollView([.horizontal,.vertical], showsIndicators: false) {
                Image(uiImage: UIImage(named: "Test")! ) // アセットにTestファイルを用意
                    .resizable()
                    .scrollTargetLayout()
            }
            .scrollTargetBehavior(.viewAligned)
            .padding()
        }
    }
}

ただ、Test画像は、2300x1600ドットくらい。（uiimage.size調べ）
なのにスクロール範囲が4000x3000（倍のサイズ）くらいで表示されてる。
よく分からない^^;

 

 

【Swift P4.5.1】座標系がややこしいのと難解案件

WindowsやAndroidは、左上が（0,0）。
画面の座標、画像の座標、0,0に合わせれば、見えている画面の左上に画像の左上が重なる。

Swiftは、そんな簡単ではない^^;
画像アスペクト比１：１でスケールを１にしたとき、画面より画像が大きいとセンター合わせにされてしまう。
alignment: .leading　や　alignment: .top　でも。

原点とは別に基準点？が画像中央にあり、補正メソッドを組み込まないと面倒。

 

不思議なのは、GeometryReader {　geometry in  }で括ると画面左上と画像左上が合わさる。なぜ？

【ContentView.swift】

import SwiftUI

struct ContentView: View {   // タイプA　左上合致
    var body: some View {
        GeometryReader {　geometry in // 画面情報取得用
            VStack(alignment: .leading) {
                let uii = UIImage(named: "Test") // "Test"はアセットに大きい画像を用意した
                Image(uiImage: uii!)
                    .resizable()
                    .aspectRatio((uii!.size.width/uii!.size.height), contentMode: .fill)
                
                Text("width: \(uii!.size.width)")  // ”\” は、バックスラッシュ
                Text("height: \(uii!.size.height)")
            }
        }
    }
}

struct ContentView: View {   // タイプB　画像が小さければ左上合致
    var body: some View {
        VStack(alignment: .leading) {
                let uii = UIImage(named: "Test")
                Image(uiImage: uii!)
                    .resizable()
                    .aspectRatio((uii!.size.width/uii!.size.height), contentMode: .fill)
                
                Text("width: \(uii!.size.width)")
                Text("height: \(uii!.size.height)")
        }
    }
}

タイプAは、画面横幅より画像の横幅が大きくてもalignment: .leadingが効く。
タイプBは、画面横幅より画像の横幅が大きいと画面の中央と画像の中央が合わさるようだ。

シミュレーションの状態の話なので実機でどうなっているかは未確認。

 

 

【Swift P4.5.1】画像ファイルをUIImageデータに変換して表示する(2)

PhotosPickerは、標準の写真アプリで表示されてる画像の選択だけで、USBメモリストレージの画像は選択できない。
fileImporterは、標準のファイルアプリで表示されてるファイル（画像含む）の選択だけで写真アプリの画像は選択できない。
USBメモリの画像ファイルは選択できる。

この２つは設定が楽なので、両方読み込みたかったら２つのボタンで対応するのかな。

fileImporterで画像ファイルを読み込んで表示する方法がハッキリしたので記録する。
USBメモリストレージ内の画像ファイルも表示できた。

【MyApp.swift】
import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

【ContentView.swift】
import SwiftUI

struct ContentView: View {
    @State private var showSwitch = false
    @State var selectedImage: UIImage?

    var body: some View {
        VStack {
            Button("fileImporter") {
                showSwitch.toggle()
            }

            if selectedImage != nil {
                Image(uiImage: selectedImage!)
                    .resizable()
                    .scaledToFit()
            }
        }
        .fileImporter(isPresented: $showSwitch,
                      allowedContentTypes: [.jpeg,.png],
                      allowsMultipleSelection: false // 一つだけ選択
        ) { result in
            switch result {
            case .success(let urls):
                guard let fileurl = urls.first else {return}
                // アクセス権取得
                guard fileurl.startAccessingSecurityScopedResource() else { return }
                do {
                    // ファイルの内容を取得する
                    let data = try? Data(contentsOf: fileurl) // ファイルからバイナリデータを読み込む
                    selectedImage = UIImage(data: data!)  // UIImage型に変換
                } catch {
                    print(error.localizedDescription)
                }
                // アクセス権解放
                fileurl.stopAccessingSecurityScopedResource()
            case .failure(let error):
                print(error.localizedDescription)
            }
        }
        onCancellation: {
            print("cancell success")
        }
    }
}

PhotosPicker も fileImporter もバイナリデータで読み込みUIImage型に変換してImage()に渡せば表示できる。
結構シンプルだった。変換と渡し方がハッキリしてなかった。

 

Web記事は、テキストファイル読み書きの説明ばっかりで...。はぁ～^^;