macOS   SwiftUIプログラミング   スライダー

ホーム

この章では、スライダーについて説明します。

このコーナーでは、任意のテキストエディタでコードを記述し、 ターミナルを使ってビルドする方法で作業を進めています。Xcode で作業する場合は、Xcodeで作業する場合 をご一読ください。

なお、ターミナルを使う場合も、Swift コンパイラや SwiftUI フレームワークなどをMac にインストールするために Xcode をインストールして、一度起動させなければなりません。インストールが終われば Xcode は終了しても大丈夫です。

また、作成したアプリケーションを App Storeに提出するためのファイルにするには、Xcode を使わなければならなかったかもしれません。どこかで Xcode を使わずに作る方法を見たような気もするのですが...

私の開発環境は次のとおりです。

  • MacBook Air 2018年モデル、メモリ8G
  • macOS Monterey 12.4
  • Xcode 13.4.1
  • Swift 5.6.1

更新履歴
2022/07/11 コード説明をつけました。

Slider

次のコードを任意のテキストエディタで記述してください。Xcode で作業している場合は、ContentView(ContentView.swift)に次のコードを記述してください。

View.swift


import SwiftUI

struct ContentView: View {
    @State var r = 0.0
    @State var g = 0.0
    @State var b = 0.0

    var body: some View {
        VStack {
            Slider(value: $r, in:0...1){
                Text("Red")
                .frame(width: 40, height: 10, alignment: .leading)}
            Slider(value: $g, in:0...1){
                Text("Green")
                .frame(width: 40, height: 10, alignment: .leading)}
            Slider(value: $b, in:0...1){
                Text("Blue")
                .frame(width: 40, height: 10, alignment: .leading)}
            Text("")
                .frame(maxWidth:.infinity,maxHeight: .infinity)
                .background(Color(red: r, green: g, blue: b))
        }
        .padding(10)
        .frame(minWidth: 300, maxWidth: .infinity, minHeight: 200, maxHeight: .infinity)
    }
}
	

コード説明

  1. @State var r = 0.0
    スライダーの値を保持する Double 値のプロパティを宣言しています。このプロパティには 0.0 から 1.0 の値が代入されることになります。
  2. Slider(value: $r, in:0...1){
  3. スライダーには2つの引数が必要です。value には、値が保存先を指定します。in にはスライダーの値の範囲を指定します。ここでは 0 から 1 を設定しています。
  4. .background(Color(red: r, green: g, blue: b))
    Text の背景色に色を設定しています。r、g、b を 0 から 1 までの連続した値で設定することにより、すべての色を設定できます。SwiftUI では各 RGB の値を 0 から 1 までの少数点数で表します。0 が 000000 で、1 が FFFFFF になります。


次のファイルは、以前は Main.swift というファイル名でした。これからは App.swift というファイル名に統一したいと思います。Xcode で作業している場合は、プロダクト名App(プロダクト名App.swift)に次のコードを記述してください。今回このファイルの内容に変更はありませんが、一応掲載しておきます。

App.swift


import SwiftUI

@main
struct FooApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {

    func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool {
        return true
   }
}
	


アプリケーションの名前を変えるために、Info.plist の CFBundleName を書き換えます。ここでは「Slider」という名前にしました。 Xcode で作業している場合は、ここは無視してください。 機会があれば、 また説明します。

Info.plist


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN"
"https://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CFBundleExecutable</key>
	<string>foo</string>
	<key>CFBundleIconFile</key>
	<string>icon-macbook.icns</string>
	<key>CFBundleName</key>
	<string>Slider</string>
</dict>
</plist>
    


ビルド


swiftc App.swift View.swift -o foo
mv foo Foo.app/Contents/MacOS
    

実行




1145 visits
Posted: Jun. 27, 2022
Update: Jun. 27, 2022

ホーム   目次