NRIネットコム Blog

NRIネットコム社員が様々な視点で、日々の気づきやナレッジを発信するメディアです

Technology - SwiftUI

【SwiftUI】Imageのサイズを変更する方法

概要 環境 前提 resizableでframeサイズを反映させる スケールやアスペクト比を調整する 元のアスペクト比を保ちつつ、frame内に収める まとめ 概要 SwiftUIでImageのサイズを変更する際にframeでwidth及びheightを指定するだけでは変更できません。resizabl…

アドベントカレンダー風UIを作ってわかる!SwiftUI

本記事は NRIネットコム Advent Calendar 2022 1日目の記事です。 本記事 ▶▶ 2日目 概要 環境 作成するUI アドベントカレンダーとは アドベントカレンダーアプリ アイコンの準備 UIを実装していく Stackを使用してアイコンを任意の位置に配置する overlay…

【UIKit】UIHostingControllerを使ってUIViewControllerの中でSwiftUIのViewを表示する

概要 環境 実装 値を渡す まとめ 概要 SwiftUIのViewでUIViewControllerやUIViewを呼び出す方法はUIViewControllerRepresentableやUIViewRepresentableを使用することで可能です。 逆にUIViewControllerの中でSwiftUIのViewを表示するにはUIHostingControlle…

【SwiftUI】NavigationView及びNavigationStackのタイトルや背景色を変更する方法

概要 環境 実装方法 まとめ 概要 NavigationViewやNavigationStackのタイトルや背景色を変更する方法をご紹介します。 環境 この記事は以下のバージョン環境のもと作成されたものです。 【Xcode】14.1 【iOS】16.1 【macOS】Monterey バージョン 12.6 実装方…

【SwiftUI】UIKitで作成したUIViewControllerやUIViewをSwiftUI側で表示する方法

概要 環境 UIViewControllerRepresentableとUIViewRepresentable UIKit側の実装 SwiftUI側の実装 UIViewControllerRepresentableを使用して呼び出す まとめ 概要 UIKitで作成したUIViewControllerやUIViewをUIViewControllerRepresentableやUIViewRepresenta…

【UIKit】Storyboardを使わずにコードでAuto Layoutを設定し、SwiftUIのプレビューでViewを確認する方法

概要 環境 translatesAutoresizingMaskIntoConstraintsをfalseにする SwiftUIのプレビューを使用する まとめ 概要 Auto Layoutとはビューに設定された制約に基づいて、ビュー階層内のすべてのビューのサイズと位置を動的に計算するレイアウトでその制約など…

【SwiftUI】iOS16でTextEditorやListなどの背景色を変更する

概要 環境 iOS16未満での実装 iOS16からの実装 OS毎に表示制御を行う Listの場合 まとめ 概要 iOS16未満ではUITextView.appearance().backgroundColorを使用することでTextEditorやListなどの背景色を変更する事ができました。 しかしiOS16では上記の実装で…

【SwiftUI】TextFieldやTextEditorで入力した文字数の制限やカウントを表示する方法

概要 環境 Combineでの実装 onChangeでの実装 まとめ 概要 テキストの文字数をリアルタイムでカウントして表示したり、入力文字数の制限をする方法についてCombineフレームワークとonChangeを使用した手法をそれぞれ紹介したいと思います。 環境 この記事は…

【SwiftUI】TabViewを使ってOnboardingを作成する

概要 環境 TabViewの基本的な使い方 Tabの背景色やアイコンに色を付ける方法 Onboardingを作成 まとめ 概要 TabViewを使って以下の様なアプリ起動時に表示するOnboardingを作成してみたいと思います! 環境 この記事は以下のバージョン環境のもと作成された…

【SwiftUI】ESP32使用してスマートキーを自作する【CoreBluetooth】

概要 環境 BLEを使用するために押さえておきたい知識 ペリフェラル セントラル アドバタイズ 接続までの流れを整理 実装 ペリフェラルの実装 NimBLEDeviceをESP32で使用する ペリフェラルのサンプルコード セントラル側の実装 CoreBluetoothを使用したサンプ…

【SwiftUI】Pixel Artアプリを作ってみる-その2

概要 環境 きっかけ 追加、修正機能 Pixelのコンポーネント作成 タップ動作でPixelを選択する 任意の色を着色できる おまけ まとめ 概要 【SwiftUI】ForEachでPixel Artアプリを作ってみるの続きとなります。 今回はColorPickerを使用して任意の色を選択して…

【SwiftUI】ForEachでPixel Artアプリを作ってみる

概要 SwiftUIではForEachを使用することでViewを繰り返し処理で生成することができます。 そんなForEachの使い方をご紹介しつつ今回は以下のようにドット絵が描けるPixel Artアプリを作ってみたいと思います。 環境 この記事は以下のバージョン環境のもと作…

【SwiftUI】Chartsフレームワークを使用してグラフを作成する方法

概要 はじめに Chart MarkとProperty foregroundStyle annotation Markの種類 AreaMark RuleMark LineMark PointMark RectangleMark BarMark 最後に 参考記事 概要 iOS16から使用できるようになったChartsフレームワークについて使用方法と大まかな概要を説…

【SwiftUI】GeometryRederでViewのサイズや座標(位置)を取得する

概要 サイズの取得方法 座標の取得方法 global local min、mid、max 使用事例 最後に 概要 GeometryReaderはSwiftUIで使用できるContainer Viewで、Viewのサイズや座標を取得することができます。 Viewのサイズや座標を取得できるようになると以下のような動…

EventKitでカレンダーへイベントを追加する方法【Swift】

記事の概要 EventKitとは 実装の流れ info.plistで設定する カレンダーへアクセスすることの許可を要求する カレンダーへ予定を追加する サンプル全体 最後に 記事の概要 今回はEventKitを使用してiPhoneの標準カレンダーへ予定やTODOを追加してみたいと思い…

【WWDC2022】What's new in SwiftUIのまとめ!

入社して2ヶ月が経ちFlutterやKotlinと色んなモバイルの技術に触れさせていただいています岡です! いよいよ今週の月曜日からWWDC2022が始まり様々な情報が公開されています! この時期だけは睡眠時間削ってでもキャッチアップしたくなります^^ 個人的にSwif…

【SwiftUI】renderingModeでImageに色をつける

SwiftUIではforegroundColorを使用する事で色を変更する事ができますが、Assetsに用意したImageはrenderingModeでtemplateを指定しないとforegroundColorで指定した色を反映させる事ができません。 今回はrenderingModeのtemplateで色んなファイル形式の違う…