【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記事は、テキストファイル読み書きの説明ばっかりで...。はぁ～^^;

 

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

チュートリアルのイメージギャラリーは、選択したファイルをアプリ固有のDocumentsフォルダに複製し利用していた。
色々と検索をして理解をしていたところ、PhotoPickerで選択した後にUIImageデータに変換すると画像データを利用できる事が分かった。
単純に画像表示するなら、この方法で問題ないだろう。

【MyApp.swift】
import SwiftUI

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

【ContentView.swift】
import SwiftUI
import PhotosUI

struct ContentView: View {
    @State var selectedItem: PhotosPickerItem?
    @State var selectedImage: UIImage?
    
    var body: some View {
        VStack {
            
            if selectedImage != nil {
                Image(uiImage: selectedImage!)
                    .resizable()
                    .aspectRatio( contentMode: .fill )
            }
            else {
                PhotosPicker(selection: $selectedItem, matching: .images, photoLibrary: .shared()) {
                    Text("Photo Picker を表示します")
                }
            }
        }
        .onChange(of: selectedItem) { item in
            Task {
                guard let data = try? await item?.loadTransferable(type: Data.self) else { return }
                guard let uiImage = UIImage(data: data) else { return }
                selectedImage = uiImage
            }
        }
    }
}

サンドボックス構造のファイルに直接アクセスはできないが、システムのピッカーで選択してデータ変換されたものは利用できる。
外部の記憶領域にアクセスする画像ビュワーを作るのは苦戦しそうだが、画像ファイルを修正するアプリはできそうな気がする。

PhotosPickerは、iPadOS 16以降で利用できるそう。

 

【Swift P4.5.1】画像ファイルを表示する（解読中）

チュートリアルのイメージギャラリーで「このiPad内」の画像をグリッドに追加する機能がある。
内容は、サンドボックスから画像ファイルをアプリ固有のDocumentsに複製をしてリストに登録している。

単純なものではなくコード理解に時間がかかりそう。
なので、ファイルピッカーの今までのまとめ。

ファイルピッカーには色々と有り、ドキュメント、イメージ等、それなりに都合の良い取り出し方となっている。
iPadOS用Swift には、簡単にコード組み込みができる機能が有り、その中に「ファイルエクスポーター」書き込み、「ファイルインポーター」読み込みが用意されている。（URLの取得で読み書きの実体ではない）
Swiftタイトルバー中央のスライダーのようなアイコンをタップして必要な機能をコード配置する。

iPadOS用Swiftで簡単にファイルの読み書きができるように記録するもの。
この機能は、アプリ固有のフォルダの中のファイルにアクセスできる限定使用です。多分。

【ContentView.swift】

import SwiftUI

struct ContentView: View {
    @State private var showImport = false
    @State private var url: URL? // ファイルURLを取得するため
    
    var body: some View {
        VStack {
            Button("Import") {
                showImport.toggle()
            }
            if url != nil {
                Text(url!.absoluteString)
            }

        }
        .fileImporter(isPresented: $showImport,
                      allowedContentTypes: [.image],
                      allowsMultipleSelection: false
                      
        ) { result in
            switch result {
            case .success(let directory):
                directory.forEach { file in
                    // アクセス権取得
                    let gotAccess = file.startAccessingSecurityScopedResource()
                    if !gotAccess { return }
                    
                    // ファイルの内容を取得する
                    do {
                        url = file
                        
                    } catch {
                        print(error.localizedDescription)
                    }
                    
                    // アクセス権解放
                    file.stopAccessingSecurityScopedResource()
                }
            case .failure(let error):
                print(error.localizedDescription)
            }
        }
        onCancellation: {
            print("cancell success")
        }
    }
}

サンドボックスを通ってきたURLなので、そのままでは画像表示できません。
自分がキャンバスに描いたものをファイルエクスポーターで保存したものであれば、
そのまま読み込んで表示できる気がしますが＾＾。

 

下記のサイトのサンプルコードが綺麗で分かりやすかったので拝借致しました。
画像選択設定とファイルURL取得を書き換えています。

原文は下記サイトで確認してください。
（”iOSプログラミング【SwiftUI×XCode】【fileImporter】を実装してみよう”　で検索。または、# → :）

 

【情報源サイト】

iOSプログラミング【SwiftUI×XCode】　https#//swappli.com/fileimporter1/
ファイルの読み込み-インポート機能を実装してみよう【fileImporter】

サンプルプログラムの一部を使用させて頂きました。感謝。