【Swift P4.6.2】ボタンタップアクション

Button()はタップすると明暗変化？している。
ボタン画像をタップした時に拡大縮小してアピールを大きくしたい。
新しい iOS に制限されるけど、androidOSより簡単にアニメーションです。

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

【ContentView.swift】
struct ContentView: View {
    var body: some View {
        ButtonView()
    }
}

・ボタンパーツ
　ボタンに使う画像をPNGファイルで用意して背景を透明設定しておくと良い。

【ButtonView.swift】
struct ButtonView: View {
    @State var scale: CGFloat = 2.0 // 大きさ調整
    var body: some View {
        Image(systemName:"arrowshape.forward.circle.fill")
            .gesture(
                TapGesture()
                    .onEnded{_ in
                        ZoomAnimation()
                        /* 処理本体を書く */
                    }
            )
            .scaleEffect(scale)
    }
    
    func ZoomAnimation() { // ボタン代わりの画像を拡大縮小させる
        withAnimation(Animation.linear(duration: 0.1)){ // 変化する時間も設定
            scale = 3.0
        } completion: { // ios17以降？
            withAnimation(Animation.linear(duration: 0.1)){ 
                scale = 2.0
            }
        }
    }
}

【Swift P4.6.2】 SlideMenu 改修版

なんちゃってスライドメニュー ２

.offset()を使ってメニューを出し入れするもので条件により不具合が起こるみたい。
原因ははっきりしないけれど、おそらくViewサイズの取得タイミングとかで正確な値が取れないのかもしれない。

なので
.position()を使ってメニューを出し入れします。

位置固定なら.offset()で問題ないんでしょうが変更する事があるのなら.position()を使う方が良さそうです。

【MyApp.swift】

@main
struct MyApp: App {
    @StateObject var dataModel = DataModel()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(dataModel)
        }
    }
}

・Viewサイズは削除してCGPointを返す関数に変更しました。

【DataModel.swift】

class DataModel: ObservableObject {
    @Published var menuWidth: CGFloat = 200.0
    @Published var menuHeight: CGFloat = 300.0
    @Published var showMenu: Bool = true
    @Published var originalImage: UIImage? = UIImage(named: "Test1")

    func MenuPosition() -> CGPoint {
        let x :Double = showMenu ? menuWidth/2.0: -(menuWidth/2.0)
        return CGPoint(x: x, y: menuHeight/2.0+20)
    }
}

・シンプルにしました。

【ContentView.swift】

struct ContentView: View {
    @EnvironmentObject var dataModel: DataModel
    var body: some View {
        ZStack {
            ImageView()
            MenuView()
        }
    }
}

・ここに .position()を付けてメニュー関係をまとめました。

【MenuView.swift】

struct MenuView: View {
    @EnvironmentObject var dataModel: DataModel
    var body: some View {
        HStack(alignment: .top) { 
            ZStack {
                RoundedRectangle(cornerRadius: 15.0)
                    .fill(Color.white)
                    .frame(width: dataModel.menuWidth, height: dataModel.menuHeight )
                    .shadow(color: .black,radius: 10, x: 5, y: 5)
                VStack(alignment:.center, content: {
                    Button("Test1") {
                        withAnimation { 
                            dataModel.originalImage = UIImage(named: "Test1")
                        }
                    }
                    Button("Test2") {
                        withAnimation { 
                            dataModel.originalImage = UIImage(named: "Test2")
                        }
                    }
                })
            }
            Image(systemName: dataModel.showMenu ?  "arrowshape.left.fill":"arrowshape.right.fill")
                .background(Color.white)
                .offset(x:dataModel.showMenu ? -40: 10,y:20)
                .gesture(
                    TapGesture()
                        .onEnded{_ in
                            withAnimation { 
                                dataModel.showMenu.toggle()
                            }
                        }
                )
        }
        .position(dataModel.MenuPosition())
    }
}

・変更無し。

【ImageView.swift】

struct ImageView: View {
    @EnvironmentObject var dataModel: DataModel
    
    var body: some View {
        if let image = dataModel.originalImage {
            Image(uiImage: image)
                .resizable()
                .scaledToFill()
        }
        else {
            Image(systemName: "doc")
            Text("No data")
        }
    }    
}

 

【Swift P4.6.2】SlideMenu

なんちゃってスライドメニュー

スイッチボタンをタップするとメニューがスクリーン外へ出て行ったり外から入ってきたりする。

作業用のViewとメニュー用のViewを用意して、ContentViewに配置する。
メニューのViewのオフセットを変更するとメニューがスライドする感じで。
x: を変更すると左右にスライド。
y: を変更すると上下にスライド。

 

【MyApp.swift】

@main
struct MyApp: App {
    @StateObject var dataModel = DataModel()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(dataModel)
        }
    }
}

・分かりやすいようにデータをまとめておく。

【DataModel.swift】

class DataModel: ObservableObject {
    @Published var viewWidth: CGFloat = CGFloat.zero
    @Published var viewHeight: CGFloat = CGFloat.zero
    @Published var menuWidth: CGFloat = 200.0
    @Published var menuHeight: CGFloat = 300.0
    @Published var showMenu: Bool = true
    @Published var originalImage: UIImage? = UIImage(named: "Test1") // フォルダに画像ファイルを用意
    
    func MenuWidthOffset() -> CGFloat {
        let value: CGFloat = (menuWidth - viewWidth)/2.0
        return showMenu ? (value) : (value - menuWidth)
    }
    func MenuHeightOffset() -> CGFloat {
        return (menuHeight - viewHeight)/2.0
    }
}

・ContentViewが表示された時に　.onAppearで幅と縦を保存しておく。

【ContentView.swift】

struct ContentView: View {
    @EnvironmentObject var dataModel: DataModel
    var body: some View {
        GeometryReader{ geometry in
            ZStack {
                ImageView()
                MenuView()
                    .offset(x:dataModel.MenuWidthOffset(),y:dataModel.MenuHeightOffset())
            }
            .onAppear{
                dataModel.viewWidth = geometry.size.width
                dataModel.viewHeight = geometry.size.height
            }
        }
    }
}

・基本という事でシンプル構成で。

【MenuView.swift】

struct MenuView: View {
    @EnvironmentObject var dataModel: DataModel
    var body: some View {
        HStack(alignment: .top) { 
            ZStack {
                RoundedRectangle(cornerRadius: 15.0) // メニューの下地
                    .fill(Color.white)
                    .frame(width: dataModel.menuWidth, height: dataModel.menuHeight )
                    .shadow(color: .black,radius: 10 , x: 5, y: 5)
                VStack(alignment: .center, content: {
                    Button("Test1") {
                        withAnimation { // Test1、2、画像ファイルをフォルダに用意した
                            dataModel.originalImage = UIImage(named: "Test1")
                        }
                    }
                    Button("Test2") {
                        withAnimation { 
                            dataModel.originalImage = UIImage(named: "Test2")
                        }
                    }
                })
            }
            // メニューの開閉ボタン。矢印を左向き右向きに切り替え
            Image(systemName: dataModel.showMenu ?  "arrowshape.left.fill":"arrowshape.right.fill")
                .background(Color.white)
                .offset(x:dataModel.showMenu ? -40: 10,y:20) // 微調整(笑)
                .gesture(
                    TapGesture()
                        .onEnded{_ in
                            withAnimation { 
                                dataModel.showMenu.toggle()
                            }
                        }
                )
        }
    }
}

・作業用Viewの代わり。

【ImageView.swift】

struct ImageView: View {
    @EnvironmentObject var dataModel: DataModel
    
    var body: some View {
        if let image = dataModel.originalImage { // 画像ファイル読み込みで問題有無の分岐
            Image(uiImage: image)
                .resizable()
                .scaledToFill()
        }
        else {
            Image(systemName: "doc")
            Text("No data")
        }
    }    
}

 

作成アプリを初回起動した時にメニュー位置がバグります。
終了して起動し直すと正常な位置にメニューが表示されます。
作成ツールのバグか、お行儀がよろしくないか、後で調査する。

 

【Swift P4.5.1】SideBar

サイドバーと広域変数の組み合わせの基本動作を確認する。

サイドバーにはListを利用するのだが今回はボタンで手抜き。
普通はパスをやり取りするが今後の画像編集を考えて画像データを利用している。

【MyApp.swift】

@main
struct MyApp: App {
    @StateObject var dataModel = DataModel()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(dataModel)
        }
    }
}

【ContentView.swift】

struct ContentView: View {
    @EnvironmentObject var dataModel: DataModel
    @State private var visibility: NavigationSplitViewVisibility = .all  // 分割メニュー設定
    
    var body: some View {
        NavigationSplitView(columnVisibility: $visibility) {
            VStack{
                Button("Test") {
                    dataModel.imageManager.originalImage = UIImage(named: "Test")
                }
                Button("Test2") {
                    dataModel.imageManager.originalImage = UIImage(named: "Test2")
                }
            } 
     // } content: { これを追加すると３列になる
        } detail: {
            ImageView()
                .environmentObject(dataModel)
        }
    }
}

【ImageView.swift】

struct ImageView: View {
    @EnvironmentObject var dataModel: DataModel
    
    var body: some View {
        if let image = dataModel.imageManager.originalImage {
            Image(uiImage: image)
                .resizable()
                .scaledToFit()
        }
        else {
            Image(systemName: "doc")
            Text("No data")
        }
    }
}

【DataModel.swift】広域変数

class DataModel: ObservableObject {
    @Published var imageManager: ImageManager = ImageManager()
}

【ImageManager.swift】機能別に管理する予定

struct ImageManager {
    var originalImage: UIImage? = nil
}

 

【Swift P4.5.1】広域変数について

@StateObject
ObservableObject
@EnvironmentObject

これらを利用することでほぼ全てでアクセス可能な変数が作れる。
ただ、変数が更新されると関連付けられているViewも自動更新されるのでルールが有り制限も受ける。
勘違いによるデータの書き換え等の抑制のためにルールが存在する。

制限を受けたくない場合はグローバル変数を使う。
個人が全てを管理してチェックを厳しく行わないとバグが発生する。

共有変数を body{ } 内で利用しないと、エラーもしくはクラッシュを引き起こす。
共有変数は関連項目に自動更新を施すためにその枠外の変数に写し利用されると問題が起こりやすくなる。

body { } 内で共有変数の値を利用して、手順をもって共有変数に代入する事。
bodyプロパティに @ViewBuilderアトリビュートが付いているそうで 宣言式以外ではViewが戻らないとエラーとなる。

let image = 共有変数 // OK
共有変数 = 値　　　 // NG

Button { // コード部分
　共有変数 = 値 // OK
} label: { }

UI のコード部分での代入はUIがViewを戻すので問題ないみたい。

@StateObjectにするか、グローバル変数にするか練習が終わってからかな。

 

【ChildView.swift】

struct ChildView: View {
    @EnvironmentObject var dataModel : DataModel

    /******** 【NG】 エラーは出ないがクラッシュする

    @State private var image: UIImage?
    @State private var imageSize: CGSize = CGSize.zero
    init() {
        image = dataModel.secoundImage
        imageSize =  image!.size
    }
    var body: some View {
        Image(uiImage: image!)
            .resizable()
            .scaledToFit()
            .frame(width: imageSize.width )
    }

    **********/

    @State private var isChange: Bool = true
    var body: some View {
        let image = dataModel.secoundImage
        if  image != nil {
            Image(uiImage: image!)
                .resizable()
                .scaledToFit()
                .frame( width: image!.size.width )

        } else {
            Text("no data")
            // 共有変数に代入の式ではViewを返さないのでエラー。UIの実行部分に記述すればOK。
            // dataModel.secoundImage = UIImage(named: "Test2")　代入には場所を選ぶ。if文内はダメ。
        }
        Button { // ButtonはViewを返しているのでエラーにならない
            dataModel.secoundImage = UIImage(named: isChange ? "Test2": "Test")
            isChange.toggle()
        } label: {
            Text("Change")
        }
    }
}

【ContentView.swift】

struct ContentView: View {
   @EnvironmentObject var dataModel: DataModel

    var body: some View {
        VStack {
            if let image = dataModel.originalImage
            {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            }
        }
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Text("Child ").bold()
            }
            ToolbarItem(placement: .navigationBarLeading) {
                NavigationLink {
                    ChildView()
                        .environmentObject(dataModel) // 必須
                } label: {
                    Image(systemName: "crop")
                }
            }
        }
    }
}

【Main.swift】

@main
struct MyApp: App {
    @StateObject var dataModel = DataModel()
    var body: some Scene {
        WindowGroup {
            NavigationStack {
                ContentView()
                    .environmentObject(dataModel) // 必須
            }
            .navigationViewStyle(.stack)
        }
    }
}

【DataModel.swift】

class DataModel: ObservableObject {
    @Published var originalImage: UIImage? = nil
    @Published var secoundImage: UIImage? = nil

    init() {
        originalImage = UIImage(named: "Test3")
        secoundImage = UIImage(named: "Test")
    }
}