Oz-Tech-Blog

曲線の描画については、UIBezierPathを利用します。 基本的な考え方については、下記のサイトがまとまっております。ご興味のある方はご参考までにご参照ください。 ・Alex Almost Engineerさんのサイト https://medium.com/flawless-app-stories/uibezierpath-lesson-how-to-draw-cuphead-on-layers-d164fd23cf61 ・iCHi.PROさんのサイト https://ichi.pro/ios-13-app-swift-5-no-setsumei-rei-uibezierpath-o-shiyoshite-pata-n-o-byogasuru-224408471526853 上記の考えを利用して、以下のような背景が作れます。 図形1,2では、ヘッダーの部分に曲線を表現をしています。 図形1のオレンジメニュー部分では四角形の1辺だけ曲線にしております。 ・図形背景１ ・図形背景2

 パララックス（parallax）は 英語で「視差」という意味があるそうです。 「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。 スクロールやデバイスを傾けたときに背景がずれるなどして、画面内に奥行きを表現する視差効果です。  SwiftUIで表現をしてみました。 ・スクロールによる表現1 ・スクロールによる表現2 ・スクロールによる表現3 ・角度を変えた表現

 今回は、SwiftUIでPathを取り上げます。pathの基本については、下記のサイトにて、詳しく記載されている方がいらっしゃいますので、そちら掲載します。 ここでは、Pathを使った背景画面の表現をいくつか掲載してみます。 ■サイト ・高橋政明さんのサイト https://note.com/kaigian/n/ndbbcf82ee3e4 ・AnswerTopiaさんのサイト https://www.answertopia.com/swiftui/basic-swiftui-graphics-drawing/ ■Pathを利用した背景 いくつか表示を試してみたので以下に掲載します。 ・画面 ・コード 上記のようなPathを利用したコードを用いてい下記のような表現ができます。 ・表現１ ・表現2 ※引用画像について 以下になります。上記のサンプル表示のため画像を利用させて頂きました。ありがとうございました。 https://www.aflo.com/ja/pages/creative/sport https://pixta.jp/antenna/?p=21234

 今回は、iOS14で追加になったLink表示についてです。 試した画面表示とコードを掲載します。テキストリンクと画像アイコンの２パターンで表示してます。どちらのタップすると Appleのサイトに遷移するようになっております。 ・画面表示 遷移前と遷移後の画面を掲載します。 ・遷移前画面 ・遷移後画面 ・コード

今回はiOS14からのUI部品で利用できるようになったDisclosureGroup、OutlineGroupとについて取り上げます。 1.DisclosureGroupについて ・特徴 コンテンツを折りたためるビューです。 ・コード 画面での表示が見やすいようにSpacer()を入れてます。 ・画面表示 ・全部閉じる ・全部開く ・Sub-itemsだけ開く 2.OutlineGroup ・特徴 階層化データ構造を表示するのに便利です。ForEach、ネストされたビューを表示するために使用されます。 ・コード 区切り線を消したい場合は、「　.listStyle(SidebarListStyle()) 」を指定すると区切り線が消えます。 ・表示 別手法：階層データについての表示方法 OutlineGroupを利用せずにListの階層表現を使う方法がありました。SmallDeskSoftwareさんが紹介されております。以下のコードはSmallDeskSoftwareさんのコードを引用させて頂いております。 ・SmallDeskSoftwareさんのサイト https://software.small-desk.com/development/2020/09/20/swiftui-outline-withusinglist/#_List ・コード ・表示

今回は、iOS14で追加されたMenuについてとりあげます。 Appleの公式ドキュメントにあった例を試してみました。デザイン変更も試してみましたが、2021年4月時点メニュー内は変更が難しいようです。利用用途として、シンプルなメニューの表示として利用が良さそうです。 ・Apple Document Menu https://developer.apple.com/documentation/swiftui/menu 動画とコードを掲載します。 動画の画面上にプラスマークのアイコンと「Create」テキストで動作するメニューと「Action」というテキストで表示するメニューを２種類表示させてます。「Action」というテキストのメニューは、メニュー内のCopyという項目を押下した場合、更に、メニューが表示されています。 ・今後の課題 メニューの中のデザインを変更しよう試みましたが、うまくいきませんでした。試した内容は、以下の図で、「Create customStyle」というメニューを出すボタンのデザインの変更と、「Create customStyle」を押下後に出てくるメニューです。「Create customStyle」のみ変更されました。メニュー内のデザインの変更方法は、今後の課題としております。試した時のコードも記載します。 ・追加：できたこと 追加の確認でメニュー内のアイコンは表示できました。以下は、コードと画面表示になります。

iOS14で追加になった、ProgressiveViewについてみていきます。ProgressiveViewの種類は、CircularProgressViewStyleとLinearProgressViewStyleの２種類があります。前者はくるくる回るプログレス表現で後者は、バー状に伸びるプログレス表現です。 1. CircularProgressViewStyle いくつかのパターンを画面表示して、その時のコードを以下掲載します。 2. LinearProgressViewStyle バー状に伸びるプログレス表現については、.NETゆる〜りワークさんのサイトが大変参考になります。以下をご参照ください。 https://www.yururiwork.net/%E3%80%90swiftui%E3%80%91progressview%EF%BC%88uiactivityindicator%EF%BC%89%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%80%90xcode12ios14%E3%80%91/

今回はSwiftUIのNavigationView,NavigationLinkを利用した画面遷移 についてとりあげます。 以下の内容について記載します。 画面遷移時のソースコードケースについて NavigationbarのTitleについて 画面上部の余白について 二つ以上前の画面に戻ることについて コードで戻るの挙動 1 画面遷移のソースコートコードケース ケース１. NavigationViewのText ケース2. NavigationViewのButton表現と条件一致した場合の遷移 以下はボタン押下後に、isActiveフラグがtrueになります。NavigationViewのisActiveと一致するので、次の画面に遷移する挙動となります。 ・動画 上記1、２の動画です。挙動としては上記のコードだと変わらないです。 ケース3. NavigationViewのHStackでimageとText表現について ・スクリーンショット ※Twitterアイコンは表示のためのサンプル画像として利用していております。 2.NavigationbarのTitleについて .navigationBarTitleDisplayMode(表示モード)を用いて、タイトルの表示を変更ができます。表示モードについては以下の種類があります。 navigationBarTitleDisplayMode(.inline) 小さなタイトル文字 navigationBarTitleDisplayMode(.large) 大きなタイトルで表示。スクロールすると小さなタイトルになる navigationBarTitleDisplayMode(.auto) 前のナビゲーション項目の表示モードを継承 ・NavigationBarのカスタマイズをする場合 NavigationBarのカスタマイズは下記の@titaniumさんが記載しております。 変更の場合は、ご参照ください。 https://qiita.com/titanium/items/690b15c4471f4cd22516 3.画面上部の余白について ...

今回はダークモードについてです。 ダークモード未対応のアプリをそのままStoreに出した場合には、ユーザの端末の設定によっては、意図しない見た目になってしまう場合があります。ダークモードを対応しない、もしくは、ダークモードを対応する方針をとった方が良いです。 ・[記事抜粋(2021/5時点)]( 引用元 )  Supporting Dark Mode is strongly encouraged. Use the UIUserInterfaceStyle key to opt out only temporarily while you work on improvements to your app's Dark Mode support.  上記のAppleの記載理由のため、 ダークモード対応が可能な場合した方が良いです。このブログでは、ダークモードを対応しない場合と対応する場合を紹介致します。    ■ダークモードに対応しない場合  ライトモード固定にする場合は、下記のIganinのブログさんの記事が参考になります。 ・参考サイト： https://iganin.hatenablog.com/entry/2020/02/07/010757    ■ダークモードに対応する場合  カラーアセットを利用した管理方法をご紹介します。 手順は以下になります。 ・手順1.ダークモードとLightモードの色を管理するAssets Catalogを用意します。 Xcodeのメニューから「File」→「New」→「File」の以下の画面から追加します。今回は「Colors.xcassets」という名前で追加します。 ・手順２.以下の図のようにColorSetを追加して、「backGround」という名前にしました。 ・手順3.ダークモード用とLightモード用で色をセットします。 以下の図の、黄色の枠の「Any Appearance」は、ライトモード用の表示、オレンジの枠は「Dark Appearance」、Darkモード用の表示を設定し...

今回は、アプリの背景は以下の設定が可能です。 背景色(単色)の指定 背景色(グラデーション)の指定 画像の指定 動画の指定 それぞれ、表示例を以下に記載します。 1. 背景色の指定 ・1色指定 safeエリアも指定する方法については、「edgesIgnoringSafeArea」 がありましたが、deprecatedになっています。代わりに「ignoresSafeArea」を指定するようです。 参照)Apple Document https://developer.apple.com/documentation/swiftui/view/edgesignoringsafearea(_:) [コード] struct ContentView: View { var body: some View { ZStack { //ignoresSafeArea(.all)でsafeエリアにも設定 Color.yellow.ignoresSafeArea(.all) Text("背景サンプル").font(.largeTitle) } } } 2グラデーション グラデーションは、線形で指定した場合と色の割合を変更した場合を挙げます。 ・線形 ２色を指定した場合を下記に表示します。 [スクリーンショット] [コード] var body: some View { ZStack { // 青から白の線形グラデーション //グラデーションの方向は画面上から下への報告 LinearGradient(gradient: Gradient(colors: [.green, .white]), startPoint: .top, endPoint: .bottom) .frame(maxWidth: .infinity, maxHeight: .infinity) .ign...

 今回は、LazyVGridの表示で、ヘッダーの固定有無の場合において表示について記載します。 1. 固定した場合と固定しない場合を比較 挙動は以下の通りになります。動画の画面上部は、ヘッダーを固定しておりません。動画の画面下部は固定しての表示になります。 ・動画 ・コード ２.固定した場合の挙動の注意について 上にスクロールすると下のリストが突き抜けますので、上からViewを被せるか何か対応が必要そうです。 ・動画 ・コード

前回LazyVGridを取り上げましたが、今回は画像の一覧を、 appcodaさんのサイト のコードを引用して表示してみます。 １.列表示 1) スクリーンショット 2) コード 2.列表示 1) スクリーンショット 2) コード 2.列表示　- pinterest風なレイアウト 2021年4月時点で探してみましたが、下記のようなピンタレスト風のレイアウトは組む場合は、SwiftUIのみでは難しいようです。UIViewRepresentableを利用するか、外部ライブラリを利用する方法しかなさそうです。 @temokiさんがQiita でも記載されてます。今後、何か情報をキャッチアップしたら更新予定です。

1.LazyVGrid, LazyHGridについて 今回は、SwiftUIのLazyVGridについて取り上げます。  iOS14からLazyVGridとLazyHGridが利用できるようになりました。UICollectionViewを使って表現していたグリッドデザインをSwiftUIではLazyVGrid,LazyHGridを利用して表現します。以下の表示例をみていきましょう。 2.表示例：４列の固定幅のViewを持つLazyVGridの表示 1) スクリーンショット 2) コード 3.上記コードについて 1) LazyVGridのインスタンスについて LazyVGrid(colomns: [GridItem], alignment: VerticalAlignment, spacing: CGFloat?, pinnedViews: PinnedScrollableViews, content: () -> _) ※LazyHGridの場合は、colomnsのラベル名がrowsに変わります 引数の各要素は以下のようになってます ・rows： 　→ GridItem の配列を指定。 ・alignment： 　→ 行の配置を .center .top .bottom のいずれかを指定 ・spacing： 　→ 行と行の間隔を指定 　→ ・LazyVGridの場合、行間のスペースを変更します。 ・pinnedViews： 　→ ヘッダーとフッターを固定するかどうかを指定する。ヘッダーの場合は .sectionHeaders を、フッターの場合は .sectionFooters を指定します。 cf）Apple Documentaion: LazyGridView.init 2) 要素のGridItemについて GridItemは要素のサイズ、要素数を定義します GridItem(GridItem.Size, spacing: CGFloat?, alignment: Alignment?) ・GridItem.Sizeについて → 以下の種類があるようです。 　fixed：固定サイズを指定 　flexible：可変サイズ（最小・最大指定）をして 　...

・ListとScrollViewの違い  Listの場合は、画面がスクロールして表示される際に表示範囲分だけインスタンスが生成されますが、 ScrollViewの場合は、表示するまで待機はせず、すぐにインスタンスを生成されます。 ScrollViewを利用する場合は、、ios14からLasyVStack、もしくはLazyHStackと併用すると 画面に表示される分だけ順次ロードしてくれるようです。 コード例を下記に記載します。   ・コード例  ・List   ・LazyVStackとScrollView 上記2つのコードでのスクリーンショット

今回は、SwiftUIのListとForEarchについて記載していきます。 ・ListとForeach基本的な使い方 ListとForeach基本的な使い方については 下記のカビ通信サイトの方の記事が詳しいのでご参照ください。 ・【SwiftUI】Listの使い方 https://capibara1969.com/2266/ ・【SwiftUI】ForEachの使い方（１/2） https://capibara1969.com/1634/ ・【SwiftUI】ForEachの使い方（2/2） https://capibara1969.com/1650/ 記事を拝見して、利用方法としては以下のコードが利用しやすいと 思いました。 ・コード ・スクリーンショット ・ListでHashableを利用する場合 Hashableについては下記になります。表示する対象がhashなので、ID指定をしなくても良いですね。予め一意のデータしかない場合は、こちらの実装方法でも良いですね〜。 ・コード ・スクリーンショット スクリーンショットは、表示は、ひとつ前のIdentifiableを利用時と同じです。 ・ListでEnumで表現する場合 enumを利用した例は下記になり...

 SwiftUIのUIパーツについても取り上げいきます。 今回はそのTextField編。 基本的な使い方についてことは、既存でまとまっている「カピ通信」さんのサイトがあるので そちらのリンクを掲載します。本記事では、その内容からの＋した内容を記載します。 ・「カピ通信」さんのサイト 基本的な使い方、イベント取得、TextFieldで使えるModifierについて、以下に記載があります。 https://programming-sansho.com/swift/swiftui-text ・プラス内容について：PlaceHolderの色を変えたい場合 スクリーンショットとコードを掲載します。 ・スクリーンショット ・コード

SwiftUIのUIパーツについても取り上げいきます。今回はそのText、Font編。 こちらは、既存でまとまっているサイト「programming jornal SANSHO」さんのサイトがあるので 以下にリンクを掲載します。 ・基本利用 https://programming-sansho.com/swift/swiftui-text ・Fontの基本的な使い方 Fontについては、カビ通信さんのサイトがわかりやすいのでそちらをご参照ください。 ・カビ通信さんのサイト https://capibara1969.com/1981/ ・カスタムフォント カスタムフォントについては、programming-sanshoさんのサイトがわかりやすいのでそちらをご参照ください。 ・programming-sanshoさんのサイト https://programming-sansho.com/swift/use-custom-font-with-swiftui/

Buttonの有効・無効を制御する時について記載します。 下記のようにボタンを画面に表示してみました。コードも下記になります。 ・スクリーンショット ・コード

前回の応用編に引き続き、Buttonにつけるpaddingで見え方が変わるので、書き留めておきます。 下記のコードで「.padding(0)」の値を0,5,10,20と変更した結果のスクリーンショットを添付します。 ・スクリーンショット ・コード Button(action: { //Action }, label: { Text("Button") .font(.title) .foregroundColor(.white) .padding(0) //←この引数のみ変更 .background(Color.purple) })

前回の基礎編に引き続き、応用編として色々なボタンを試してみます。 下記のようにボタンを画面に表示してみました。コードも下記になります。 ・スクリーンショット ・コード