[SwiftUI] Create a tab in the Preferences window

I am attempting to reimplement MultiTextConverter in Swift. This time, I am creating the look and feel of the preferences window.

Please see this article for the background.

目次

The window of the MultiTextConverter 3.6

In the MultiTextConverter 3.6, selecting Preferences from the MultiTextConverter menu brings up the preferences window.

The preferences window is tabbed, and includes the following sections.

  • 変換 : Specify the conversion methods
  • 種類別オプション : Options for the HTML, XML and CSS files
  • 拡張子 : The name extension of the target
  • バックアップ : The option for the backup function
  • その他 : Other options
The MultiTextConverter preferences window
The MultiTextConverter preferences window

SwiftUI version

SwiftUI apps don’t have the Preferences in the application menu. Additionally, for convenience, I would keep the preferences window visible at all times by making it part of the main application window.

I plan to keep the content in the tabs the same, except for those that no longer make sense in the current context.

How to create the tab view in SwiftUI

The code would look like this for creating a tab view in SwiftUI.

TabView {
    View() // The view displayed in the tab
        .tabItem {
            // The view displayed in the tab label area
            Text("")
        }
}

Create the tab of the MultiTextConverter

In the case of the MultiTextConverter, there are five tabs, each with different content, so create a SwiftUI view for each tab.

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

The label string is directly written in Japanese. For localization support, it would be better to use English. However, the initial priority is to establish the functionality. A screen capture at this point looks like this.

The tab was created with SwiftUI
The tab was created with SwiftUI

Create the conversion tab

Create the contents of the conversion tab. I would place the controls as follows.

  • The popup button for the “改行コード” (The line break character).
  • The popup button for the “文字コード” (The text encoding).
  • The check box for the “エンディアン” (The endian).
  • The check box for the BOM option.
  • The check box for the “半角カタカナの変換オプション” (The conversion of the half-width katakana characters).
  • The popup button for the mapping option of the Shift-JIS model-dependent characters.

I plan to remove the “creator code” and “file type” options, as these pieces of information are not used today.

Create a popup button for line feed code

To create a popup button in SwiftUI, use Picker. For example, the popup button for the line feed code has 5 menu items.

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

MultiTextConverter 3.6 uses the notation LF (Mac OS X and UNIX), but the official name of the current Mac OS is macOS, not Mac OS X, so I will change this item.

The code looks like this.

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)
            }
        }
    }
}

The binding destination for the selected position is assigned by adding a property for now. Formally, we need to bind to a destination that will store the settings. Still, for now, we are prioritizing the creation of the appearance.

We also created a popup button for character codes in the same way.

Create little-endian checkboxes

To create a checkbox in SwiftUI, use Toggle.

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

Shift JIS model-dependent mapping group box

To create a group box in SwiftUI, use GroupBox; in MultiTextConverter, the code would look like this.

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)
                }
            }
        }
    }
}

Status at this time

If you run it now, you will see something like this.

The preferences window
The preferences window

It may be necessary to make a few layout adjustments. Make the following adjustments.

  • Overall margins are small, so make margins on the left and right.
  • Vertically centered, so move it to the top edge.
  • Checkboxes are centered, so make them left-aligned.

Adjustments will be carried over to the next article.

Summary of how to create tabs in SwiftUI

The following article describes how to create tabs in SwiftUI.

著書紹介

Authored Books

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Akira Hayashi (林 晃)のアバター Akira Hayashi (林 晃) Representative(代表), Software Engineer(ソフトウェアエンジニア)

アールケー開発代表。Appleプラットフォーム向けの開発を専門としているソフトウェアエンジニア。ソフトウェアの受託開発、技術書執筆、技術指導・セミナー講師。note, Medium, LinkedIn
-
Representative of RK Kaihatsu. Software Engineer Specializing in Development for the Apple Platform. Specializing in contract software development, technical writing, and serving as a tech workshop lecturer. note, Medium, LinkedIn

目次