【SwiftUI】SwiftUIでSliderを使って文字のサイズを変更する方法

みんな、こんにちは！今日はSwiftUIでSliderを使って文字のサイズを変更する方法を紹介するよ。これは特に、UIに数値を表示するときに役立つよ。

どうやるの？

まず、Sliderビューを作成し、そのvalueパラメータに文字のサイズを表す変数（この場合はtextSize）をバインドするんだ。そして、Sliderのinパラメータで文字のサイズの範囲を指定するよ。

Slider(value: $textSize, in: 32...200, step: 1)

このコードでは、textSizeの値が32から200の範囲で変更できるようになっているんだ。

次に、Textビューのfont修飾子を使って文字のサイズを変更するんだ。具体的には、font修飾子の引数に「.system(size:)」を指定し、その引数「size」に文字のサイズを表す変数（この場合はtextSize）を指定するよ。

Text("Hello, SwiftUI")
    .font(.system(size: textSize))

このコードでは、textSizeの値に応じて文字のサイズが変更されるよ。

小数点以下を表示しないようにする

Textビューのspecifierパラメータを使って書式を指定するんだ。具体的には、%0.fを指定することで小数点以下を表示しないようにすることができるんだ。

Text("\(textSize, specifier: "%0.f")")
    .foregroundColor(.blue)

このコードでは、textSizeの値を文字列に変換し、その際に小数点以下を表示しないようにしているんだ。

まとめ

以上の方法で、SwiftUIを使用してSliderを使って文字のサイズを変更することができるよ。

投稿日: 2023年12月17日

カテゴリ: 未分類

タグ:

coiai

この記事もおすすめ

Claude Code Fable 5 を /model から選択できない

これは何？ Terminalから操作を行う Claude Code から、をすると Fable 5 が選択肢に出てこない。という問題の対処法についてです。実際にclaude code を起動して /model を打つと Opus, Sonnet, Haiku の３つの選択肢しか出ていないのが確認できます。環境対処法直接モデルの選択を実行してください。 Terminalにこのように Set model to claude-fable-5 and saved as your default for new sessions と表示されていれば成功です。参考

デザインガイドラインをAIでもわかるようにMarkDown 形式で作った

弊社のデザインガイドラインをAIでもわかるようにMarkDown形式で作成しました。今までプロダクトやサービスのUI設計を任されることがあり、その際はデザインガイドラインをFigmaにエンジニアにわかるように設定していたのですが、エージェント型AIが普及するにあたり、ヴィジュアルでわかるよりも文章でわかるものを用意する必要を感じ制作しました。実際に作ってみると、ヴィジュアルを言葉として理解するのは難しいという当たり前のことがわかったのと、LLMと人間の違いをまた見たなと思いました。人間用デザインガイドライン今回作成したガイドラインは人間にもみやすいようにヴィジュアルでも作成しました。なるべく変更がしやすいようにMarkDown形式で作成したものをHTMLに変換し、PDFで書き出すという手順をとっています。マークダウンのデザインガイドライン design-guideline.md

ポッドキャストを取った後Auditionですべきこと

この記事はポッドキャストなどの音声コンテンツを取った後にAuditionで編集する方法について解説しています。環境やること基本的に以下の4つの工程をすると、かなりクオリティアップにつながります！ノイズリダクション無音部分を選択します。開始地点をi, 終わりをo キーを押すと選択できます。選択できたらエフェクト→ノイズリダクション/リストア→ノイズプリントをキャプチャを押します。続いて、全体を選択します。cmd, a で全選択になります。エフェクト→ノイズリダクション/リストア→ノイズリダクションを選択します。以下のようなパネルが表示されうので、ノイズのみをきたりして、削減ちを調整して、良い感じになったら適応ボタンを押します。シングルバンドコンプレッサ左のパネルのエフェクトトラックから▶️ボタンを押し、振幅と圧縮→シングルバンドコンプレッッサを選択します。選択すると下記のようなパネルが開きます。それぞれ、といった意味があります。設定値は下記画像のようにしています。設定がめんどくさい場合はプリセットからラジオレベラーを選択してください。 EQ（声をクリアにする）パラメトリックイコライザーを使用します。エフェクト→フィルターとイコライザ→パラメトリックイコライザーを選択します。私の場合は下記のように設定しています。無音カットエフェクト→診断→無音をカットをすると左パネルに診断が表示されます。効果を無音を削除、プリセットをポッドキャストにするとちょうどよくなると思います。設定したら、スキャンボタンを教えて、全て削除で無音がカットされます。かなりカットされてしまうので、短いCM等に使うのはありかなという感じです。参考 Adobe 無音カット https://helpx.adobe.com/jp/audition/using/strip-silence.html

Oculus Link での開発でパススルーをオンにする

環境 Unity で Quest 対応のアプリを構築している際に Link での確認で、パススルーをオンにするとエラーが出て砂時計のまま開けないというエラーが出ました。コンソールでは以下のエラーが表示されています。やり方 PC で Meta Holizon アプリを開きます。 Settings を開いて Developer タブを開きます。Developer Runtime Features を ON にします。続いて、Passthrough over Meta Horizon Link をオンにします。前提 OVR Manager の Passthrough & Guardian Boundary の中の Enable Passthrough にチェックを入れてださい。参考 https://developers.meta.com/horizon/documentation/unity/unity-passthrough-use-over-link/?locale=ja_JP おわりに株式会社coiaiではOculus向けのアプリも構築しています。受託開発、一次受けも設計から可能ですのでお問い合わせください。

【SwiftUI】SwiftUIでSliderを使って文字のサイズを変更する方法

どうやるの？

小数点以下を表示しないようにする

まとめ

この記事を書いた会社

資料請求・無料相談