【SwiftUI】環境設定設定ウインドウのタブを作る

MultiTextConverterをSwiftで再実装してみるという試みを行っています。今回は環境設定ウインドウの見た目の作成です。

経緯はこちらの記事をご覧ください。

関連記事

筆者が以前、開発して、フリーウェアとして公開しているMultiTextConverterというmacOSアプリがあります。主要な機能はテキストファイルのテキストエンコーディングの変換と改行文字の変換です。 アールケー開発のWebサイ[…]

スポンサーリンク

MultiTextConverter 3.6のウインドウ

MultiTextConverter 3.6では、MultiTextConverterメニューからPreferecesを選択すると、環境設定ウインドウが表示されます。

内容はタブ構成で、以下のタブがあります。

  • 変換 : 変換後のファイルの設定
  • 種類別オプション : HTML/XML, CSS向けのオプション
  • 拡張子 : 変換対象ファイルの拡張子設定
  • バックアップ : バックアップ機能の設定
  • その他 : その他の一般項目の設定

SwiftUIの場合

SwiftUIのアプリの場合は、アプリケーションメニューにPreferencesがありません。また、一つはウインドウが表示されている方が都合が良いので、環境設定ウインドウの位置づけをメインウインドウに変更して、常に表示されているウインドウにしようと思います。

タブ内の内容は、現在はあまり意味がないものを除いて、同じにしようと思います。

SwiftUIでタブビューを作るには

SwiftUIでタブビューを作るには、次のようなコードになります。

TabView {
    View() // タブ内に表示するビュー
        .tabItem {
            // タブのラベル部分のビュー
            Text("")
        }
}
スポンサーリンク

MultiTextConverterのタブを作る

MultiTextConverterの場合は、5個のタブがあり、各タブの内容は異なるので、各タブに対応するSwiftUIのビューを作ります。

struct ContentView: View {
    var body: some View {
        TabView {
            ConverterOptionView()
                .tabItem {
                    Text("変換")
                }
            TypeSpecificOptionView()
                .tabItem {
                    Text("種類別オプション")
                }
            FileTypeOptionView()
                .tabItem {
                    Text("拡張子")
                }
            BackupOptionView()
                .tabItem {
                    Text("バックアップ")
                }
            GeneralOptionView()
                .tabItem {
                    Text("その他")
                }
        }
            .padding()
    }
}

ラベルの文字列を日本語で直書きしています。ローカライズ対応するには、英語にしておいた方が良いのですが、まずは、作ることを優先します。この時点でのスクリーンキャプチャは次のようになります。

変換タブを作る

変換タブの内容を作ります。配置するコントロールは以下の通りです。

  • 「改行コード」のポップアップボタン
  • 「文字コード」のポップアップボタン
  • エンディアンのチェックボックス
  • BOMの設定チェックボックス
  • 半角カタカナの変換オプションのチェックボックス
  • Shift JIS機種依存文字のマッピングポップアップボタン

「クリエータコード」「ファイルタイプ」のオプションについては、現在はあまり利用されていない情報なので、削除しようと思います。

改行コードのポップアップボタンを作る

SwiftUIでポップアップボタンを作るには、Pickerを使います。改行コードのポップアップボタンはメニューアイテムが5個あります。

  • 変換しない
  • LF (macOS and UNIX)
  • CR (Mac OS 9)
  • CR+LF (Windows)
  • LS (Unicode)

MultiTextConverter 3.6ではLF (Mac OS X and UNIX)という表記になっているのですが、現在のMacのOSの正式名称はMac OS Xではなく、macOSなので変更します。

コードは次のような感じです。

struct ConverterOptionView: View {
    @State private var lineBreakType: Int = 0
    
    var body: some View {
        VStack {
            Picker("改行コード:", selection: $lineBreakType) {
                Text("変換しない").tag(0)
                Text("LF (macOS and UNIX)").tag(1)
                Text("CR (Mac OS 9)").tag(2)
                Text("CR+LF (Windows)").tag(3)
                Text("LS (Unicode)").tag(4)
            }
        }
    }
}

選択位置のバインディング先はとりあえず、プロパティを追加して割り当てています。正式には、設定内容を記憶する先にバインディングする必要がありますが、現時点では見た目の作成を優先しています。

同じ要領で文字コードのポップアップボタンも作りました。

リトルエンディアンのチェックボックスを作る

SwiftUIでチェックボックスを作るには、Toggleを使います。

struct ConverterOptionView: View {
    @State private var isLittleEndian: Bool = true
    
    var body: some View {
        VStack {
            Toggle("リトルエンディアン", isOn: $isLittleEndian)
        }
    }
}

Shift JIS機種依存のマッピングのグループボックス

SwiftUIでグループボックスを作成するには、GroupBoxを使用します。MultiTextConverterでは次のようなコードになります。

struct ConverterOptionView: View {
    @State private var sjisMappingRead: Int = 0
    @State private var sjisMappingWrite: Int = 0
    
    var body: some View {
        VStack {
            GroupBox("Shift JIS 機種依存文字のマッピング") {
                Picker("読み込み:", selection: $sjisMappingRead) {
                    Text("macOS").tag(0)
                    Text("Windows (Code Page 932)").tag(1)
                }
                
                Picker("保存:", selection: $sjisMappingWrite) {
                    Text("macOS").tag(0)
                    Text("Windows (Code Page 932)").tag(1)
                }
            }
        }
    }
}

現時点での状態

この時点で実行してみると、次のような表示になります。

少しレイアウトの調整をした方が良さそうです。次のような調整をします。

  • 全体的に余白が少ないので、左右に余白を作る
  • 垂直方向に中央揃えになっているので、上端に寄せる
  • チェックボックスが中央揃えになっているので、左揃えにする

調整は次の記事に持ち越します。

SwiftUIでのタブの作り方のまとめ (2022年7月6日追加)

SwiftUIでのタブの作り方を以下の記事にまとめました。

関連記事

SwiftUIでタブを作るにはTabViewを使用します。この記事ではSwiftUIでのタブの作り方を解説します。 基本的な構造 TabViewは次のような構造で使用します。 struct ContentView: Vi[…]

スポンサーリンク
最新情報をチェックしよう!