#3 さまざまな UI コンポーネントの研究

この度はChatGPTを利用して、内容を整理しました。

Segmented Control

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/e37509c4-8b9c-9e1e-32eb-9676a7e73996.gif)

![1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/c2c8a7b8-fef5-5a50-4765-2ad69dd3badb.png)


Swift における Segmented Control は、ユーザーがいくつかの事前定義されたオプション間で選択を行うことができる UI コンポーネントです。以下は一般的なフィールドです。

Segments（セグメント）：

    Segmented Control は複数のセグメントを含み、各セグメントが一つの選択肢を表します。
    セグメントは動的に追加または削除することが可能です。

Segment（個別のセグメント）：

    各 Segment は一つのオプションです。
    ユーザーは異なる Segment をクリックして選択を切り替えることができます。

Title（タイトル）：

    各 Segment にはタイトルがあり、通常はテキストで、その選択肢を説明します。

Image（画像）：

    Segments は、タイトルの代わりに、またはタイトルに加えて画像を含むことができます。
    画像は視覚的なヒントや装飾に利用できます。

Selected（選択されたセグメント）：

    任意の時点で、一つの Segment のみが選択されます。

Slider

![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/352ab836-bf83-6cf5-d8b4-15f7ccde7913.gif)

![2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/5edaeefd-2d76-a5ed-f70c-3d5c625059b2.png)


Slider は、ユーザーがスライド操作によって値を選択できるようにするコンポーネントです。音量や明るさなどの数値を設定するのによく使用されます。一般的なフィールドは以下の通りです。

Value（値）：

    Slider の現在値で、ユーザーはスライドすることでこの値を変更できます。
    浮動小数点数で、通常は最小値と最大値の間の値です。

Minimum（最小値）：

    Slider で選択可能な最小値です。
    Slider の最左端が表す値を決定します。

Maximum（最大値）：

    Slider で選択可能な最大値です。
    Slider の最右端が表す値を決定します。

Min Image（最小値画像）：

    Slider の最小値側にカスタム画像を設置できます。
    通常は視覚的な指示（例：ミュートアイコン）に使用されます。

Max Image（最大値画像）：

    Slider の最大値側にカスタム画像を設置できます。
    同様に視覚的な指示に利用されます。

Min Track（最小トラック）：

    Slider の最小値から現在のスライダー位置までのトラック部分を表します。
    色や外観をカスタマイズできます。

Max Track（最大トラック）：

    Slider のスライダー位置から最大値までのトラック部分を表します。
    色や外観を同様にカスタマイズできます。

Thumb Tint（サムの色）：

    Slider 上で動かせるサム（つまみ）の色です。
    アプリケーションのスタイルに合わせてカスタマイズ可能です。

Switch

![3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/9c069b74-09b5-32c3-9a75-e244628bdf06.gif)

![3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/e2886a70-0a0e-e0ba-0b36-f0970558ba2a.png)


Switch は、ユーザーが二つの状態、例えばある設定のオン／オフを切り替えることを可能にするコンポーネントです。一般的なフィールドは以下の通りです。

State（状態）：

    Switch には on と off の二つの状態があり、それぞれがオンとオフを表します。

On Tint（オン時の色）：

    Switch がオン状態の時のトラックの色です。

Thumb Tint（サムの色）：

    Switch のサムの色です。

Activity Indicator View

![4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/1b574426-0b77-fda6-258a-6c5113cfba56.gif)

![4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/3761f967-688c-aa0b-8a57-4cab4e5aeb72.png)


Activity Indicator View は、データ読み込みなど、あるタスクが進行中でまだ完了していないことを示す視覚的な指標です。一般的なフィールドは以下の通りです。

Style（スタイル）：

    style はアクティビティインジケータの外観とサイズを決定します。

Color（色）：

    color はインジケータの色をカスタマイズできます。

Animating（アニメーション中）：

    アクティビティインジケータが回転しているかどうかを示します。

Progress View

![5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/d21c403b-3b4f-b45d-6cd4-40bcb9bdad0f.gif)

![5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/328b347d-47a1-3c1b-0dca-bc958e3627a5.png)


このコンポーネントは、長時間実行されるタスクの進行状況を示すために使用されます。一般的なフィールドは以下の通りです。

Style（スタイル）：

    style はプログレスバーの基本的な外観を定義します。
    一般的なスタイルには .default（または .automatic、iOSバージョンによる）や .bar があります。
    .bar スタイルは、ナビゲーションバーなどの狭い空間でよく使用されます。

Progress（進捗）：

    progress はプログレスバーの現在の進捗を示し、その値は 0.0（進捗なし）から 1.0（完了）の間です。
    この値は通常、タスクの完了度に応じて動的に更新されます。

Progress Tint（進捗の色）：

    progressTintColor でプログレスバーの色を設定できます。
    この色は、プログレスバーの開始から現在の progress 値までの部分を塗りつぶします。

Track Tint（トラックの色）：

    trackTintColor でプログレスバーの残りの部分の色を設定します。
    この部分は、まだ完了していない進捗を示します。

Progress Image（進捗画像）：

    progressImage でプログレスバーの完了部分にカスタム画像を設定できます。

Track Image（トラック画像）：

    trackImage でプログレスバーの未完了部分にカスタム画像を設定できます。
    progressImage と同様に、プログレスバーの外観をさらにカスタマイズする機会を提供します。

Visual Effect View with Blur

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/6e41c6ac-313d-8b02-8ad0-1a1281b5fd56.png)

![7-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/43b95ebc-fa22-b070-5c5b-081556cb18a0.png)


ブラー効果。

Blur Style（ブラースタイル）：

    ブラースタイルはブラー効果の外観を決定します。iOS では、
    それぞれ独特の視覚効果を持つ複数のブラースタイルを提供しています。
    一般的なブラースタイルには、.light、.extraLight、.dark、.regular、.prominent などがあります。
    どのブラースタイルを選択するかは、デザインの要件とアプリケーションのスタイルによって異なります。
    例えば、明るい背景には .dark スタイルが適しているかもしれませんが、
    暗い背景には .light や .extraLight がより良い選択になるでしょう。

Page Control

![8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/028d6c74-4f3e-1569-6773-5c0eed6f4532.gif)

![8-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/3be61c01-7705-dddb-56cb-f9eb7e717a5b.png)


Page Control は、現在視覚的に分かれているページを示すために使用されるコンポーネントで、通常、小さな丸いドットの集まりとして表示されます。それぞれのドットは一つのページを表します。一般的なフィールドは以下の通りです。

Number of Pages（ページ数）：

    Page Control 内のドットの総数を設定し、各ドットが一つのページを表します。

Current Page（現在のページ）：

    currentPage を使用して、現在のページ指示を設定または取得します。現在のページのドットは通常、
    他のページとは異なる方法（例えば、サイズや色）で表示されます。

Hides for Single Page（単一ページで非表示）：

    チェックすると、Page Control が一つのページのみの場合、自動的に非表示になります。

Tint Color（ティントカラー）：

    非現在ページの色を設定します。

Current Page Indicator Tint（現在のページ指示色）：

    現在のページ指示の色を設定します。通常、他のページ指示の色とは異なります。

Date Picker

![9.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/4eef8970-0d76-8b62-f1ce-6cd67186356c.gif)

![9-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/04deea61-ca1e-5cb0-ffd1-8d63e3f2897b.png)


Date Picker は、日付と時間を直感的に選択するためのものです。

Preferred Style（優先スタイル）：

    iOS 14 以降のバージョンで導入された preferredStyle は、
    日付ピッカーの外観を設定することを可能にします。これには、ホイール（.wheels）、
    コンパクト（.compact）、インライン（.inline）スタイルが含まれます。

Mode（モード）：

    Mode 属性は、ピッカーのタイプを決定します。一般的なモードには、.date（日付のみ）、
    .time（時間のみ）、.dateAndTime（日付と時間の両方）があります。

Locale（ロケール）：

    locale 属性によって、日付ピッカーのロケールを設定し、表示される日付と時間の形式に影響を与えます。
    例えば、アメリカでは月/日/年の形式が使用されますが、多くのヨーロッパの国々では日/月/年の形式が使用されます。

Interval（間隔）：

    DatePicker が時間選択モードに設定されている場合、Interval 属性によって、ユーザーが選択できる分の間隔を設定できます。例えば、5 に設定すると、ユーザーは 5 分、10 分、15 分等を選択できます。

Date（日付）：

    date は、ユーザーが選択した現在の日付と時間を表します。

Minimum Date（最小日付）と Maximum Date（最大日付）：

    これらの属性によって、ユーザーが選択できる最早および最遅の日付が設定されます。

Color Well

![01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3703986/8f9d9709-6a44-5361-f5e1-047534850718.gif)


Color Well は、ユーザーがシステムのカラーピッカーから色を選択できるようにするコンポーネントです。

これらのコンポーネントは、アプリケーションのユーザーインターフェイスを豊かで使いやすくするために設計されています。各コンポーネントが提供する機能とカスタマイズの可能性を理解し、それらを適切に利用することで、ユーザーエクスペリエンスを向上させることができます。