SwiftUI入門-勉強メモ011-【Button】

Viewの上にこれらのコントロール(UI部品)を配置してアプリを作成していきます. 今回は基本部品の一つButtonです.

環境は,

  • macOS Catalina 10.15.7
  • Xcode 12.0.1
  • Swift 5.3
  • iOS 14.0

です.

目次

Buttonとは

ボタンは,

トリガーされたときにアクションを実行するコントロール

です. これ以上のわかりにくい説明はないですね.

SwiftUI
ボタンがたくさん!

のようなもので, ボタンを押すことでアクションを起こすことができます.

Buttonの基本的なinitializer
init(action: @escaping () -> Void, label: () -> Label)
  • action: ボタンを押したときの処理を記述します
  • label:ボタンに表示するテキスト等を記述します

Buttonでは最初に押されたときのactionを記述し, 次にボタンに表示されるテキストを記述します.

ボタンを押したときのアニメーションや基本的なスタイルは初めから実装されており, 一行で使えるボタンを生成することができます.

Buttonの具体例

出力させる

デバックエリアに「ボタンが押されました!」と出力する簡単なものです.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Button(action: {
            print("ボタンが押されました!")
        }) {
            Text("Button")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

画像を変える

ボタンを押すと, カメの画像がウサギになります.

import SwiftUI

struct ContentView: View {
    
    @State var on: Bool = false
    
    var body: some View {
        Button(action: { self.on.toggle() }) {
            if on {
                Image(systemName: "hare")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 100, height: 100)
            } else {
                Image(systemName: "tortoise")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 100, height: 100)
            }
        }
    }
}
SwiftUI
SwiftUI

乱数を生成

ボタンを押すと1から100の間で乱数を生成させます.

import SwiftUI

struct ContentView: View {
    
    @State private var number = 0
    
    var body: some View {
        VStack(spacing: 30) {
            Button(action: {
                self.number = Int.random(in: 1...100)
            }) {
                Text("乱数を生成")
            }
            Text("\(number)")
        }
        .font(.title)
    }
}
SwiftUI

さまざまなボタンの見本

ボタンの見本を作ってみました.

import SwiftUI

struct ContentView: View {
    
    let gradient = LinearGradient(
        gradient: Gradient(colors: [Color.blue, Color.purple]),
        startPoint: .leading,
        endPoint: .trailing)
    
    var body: some View {
        VStack(spacing:20) {
            Button(action: {}) {
                Text("Button001")
            }
            Button(action: {}) {
                Text("Button002")
                    .padding(5)
                    .border(Color.black)
            }
            Button(action: {}) {
                Text("Button003")
                    .padding(.all, 5.0)
                    .foregroundColor(.white)
                    .background(Color.red)
            }
            Button(action: {}) {
                Text("Button005")
                    .padding(5)
                    .foregroundColor(.white)
                    .background(Color.orange)
                    .cornerRadius(5)
            }
            Button(action: {}) {
                Text("Button005")
                    .padding(5)
                    .foregroundColor(.white)
                    .background(Color.yellow)
                    .cornerRadius(5)
                    .overlay(RoundedRectangle(cornerRadius: 5)
                                .stroke(Color.pink, lineWidth: 3)
                    )
            }
            Button(action: {}) {
                Text("Button006")
                    .frame(width: 200)
                    .padding(5)
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(5)
            }
            Button(action: {}) {
                Text("Button007")
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .padding(5)
                    .foregroundColor(.white)
                    .background(Color.green)
                    .cornerRadius(5)
                    .padding(.horizontal, 10)
            }
            Button(action: {}) {
                Text("Button008")
                    .frame(minWidth: 0, maxWidth: .infinity,
                           minHeight: 0, maxHeight: .infinity)
                    .padding(5)
                    .foregroundColor(.white)
                    .background(gradient)
                    .cornerRadius(5)
                    .padding(.horizontal, 10)
            }
        }
        .font(.title2)
    }
}
SwiftUI

Buttonにアニメーションを取り入れる

簡単なアクションボタンを作成しました. コードは,

を参考にしています.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        Button(action: {}) {
            Text("Button")
        }
        .buttonStyle(CustomButtonStyle())
    }
}

struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Self.Configuration) -> some View {
        return configuration.label
            .padding(10)
            .foregroundColor(.blue)
            .background(Color.yellow)
            .cornerRadius(5)
            .opacity(configuration.isPressed ? 0.8 : 1)
            .scaleEffect(configuration.isPressed ? 0.8 : 1)
            .animation(.easeOut(duration: 0.2))
            .font(.title)
    }
}

ButtonStyleを適用すると, makeBodyの定義が求められます.

押すたびに背景の色と数字が変わるボタン

Buttonを別で定義し, ContentViewに読み込みます. 少し動きをつけてみました.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        CustomButton()
    }
}

struct CustomButton: View {
    
    @State private var randomNumber = 0
    @State private var redRatio = 0.0
    @State private var greenRatio = 1.0
    @State private var blueRatio = 1.0
    @State private var opacity = 1.0
    
    var body: some View {
        Button(action: {
            randomNumber = Int.random(in: 1..<100)
            redRatio = Double.random(in: 0...1)
            greenRatio = Double.random(in: 0...1)
            blueRatio = Double.random(in: 0...1)
        }) {
            Text("\(randomNumber)")
        }
        .frame(width: 150)
        .foregroundColor(.white)
        .background(Color(red: redRatio, green: greenRatio, blue: blueRatio, opacity: opacity))
        .cornerRadius(5)
        .overlay(RoundedRectangle(cornerRadius: 5)
                    .stroke(Color.black, lineWidth: 1))
        .font(.largeTitle)
    }
}
SwiftUI
よかったらシェアしてね!

コメント

コメントする

目次
閉じる