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.
It is consists of the tab. There are following tabs.
- 変換 : 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.

SwiftUI version
SwiftUI apps don’t have the Preferences
in the application menu. Also, since it is more convenient to have least one window displayed, I would change the positioning of the preferences window to the main window, so that it is always displayed window.
I will try to keep the content in the tabs the same, except for the ones that don’t make much sense now.
How to create the tab view in SwiftUI
To create a tab view in SwiftUI, the code would look like this.
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 written directly in Japanese. To support localization, it is better to make it in English, but first, priority is given to making it. A screen capture at this point looks like this.

Create the conversion tab
Create the contents of the conversion tab. The controls to be placed are 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.
As for the “creator code” and “file type” options, I would remove them, as this information is not currently used much.
Create a pop-up button for line feed code
To create a popup button in SwiftUI, use Picker
. The line feed code popup button 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 this will be changed.
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 selection position is assigned by adding a property for now. Formally, we need to bind to a destination that will store the settings, but for now we are prioritizing the creation of the appearance.
We also created a pop-up 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 at this point, you will see something like this.

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.
(Now Translating)