Oz-Tech-Blog

 今回は、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：可変サイズ（最小・最大指定）をして 　a

・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のGeometryReaderについて取りあげます。GeometoryReaderは、Viewのサイズや座標位置を取得するときに利用します。以下実際の取得例を見ていきましょう。 ・例１:画面のサイズを取得 この例では、下記のスクリーンショットのサイズを取得してます。safeAreaは含まれていません。 ・スクリーンショット ・コード struct ContentView: View { var body: some View { GeometryReader { geometry in Text(String("\(geometry.size)")) .font(.largeTitle) .fontWeight(.bold) }.background(Color.purple) } } ・例2:配置したUI部品のサイズを取得 この例では、Spacerの間に挟まれたTextのサイズを取得しております。スクリーンショットの赤色の部分です。 ・スクリーンショット ・コード VStack{ Spacer().frame(height: 50) GeometryReader { geometry in Text(String("\(geometry.size)")) .fontWeight(.bold) .background(Color.orange) .font(.largeTitle) }.background(Color.red) Spacer().frame(height: 50) }.background(Color.purple) ・例3:配置したUI部品の座標とサイズを取得 ・例3-1:左上の座標位置 この例では、座標とサイズの例です。座標の原

 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) })

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

SwiftUIのUIパーツについても取り上げいきます。今回はそのButton編。 Buttonについてのまとめてみました。 目次 1).基本の形 2).タップ範囲 3).配置 4).角丸、シャドウ 1.基本の形 Buttonの基本の形は下記です。 てボタンの上にテキストだけ表示させた例です。 ・コード Button(action: { // タップされた時の処理を記述 }) { // ボタンを表すView並びを記述 Text("button1") } ・ スクリーンショット 2.タップの範囲 タップの範囲エリアをframe(width:xxx,height:xxx)で指定してますが、下記の例１では、タップ範囲が狭いです。タップ範囲は、Button内の表示内容に指定した方がタップ範囲が広くなります。例2のようにTextにframe指定を付けた方が広くなります。 ・コード //例1: スクリーンショット画面上部のButton表示 Button(action: { // タップ時の処理を実装 }) { Text("button2") .background(Color.green) .foregroundColor(Color.red) }.frame(width: 100, height: 100) //例2: スクリーンショット画面下部のButton表示 Button(action: { // タップ時の処理を実装 }) { Text("button2") .frame(width: 100, height: 100) .background(Color.green) .foregroundColor(Color.red) } ・ スクリーンショット

The following book is also a 3D model posted on 3D Bibi's site. I made it with Blender. 以下の本も 3dBibiさんのサイトに掲載が あった3Dモデルです。Blenderで試してみました。こんな感じに完成しました。 ・ Finished product - 完成品 - ・ Creation Point  I think modeling the spine is the most important point to create. 背表紙が今回の作成でのポイントだと思います。 > Back cover (modeling)  ・Make a rectangular parallelepiped from the cubes that are initially placed. 初期のキューブから直方体を作る。 ・Loop cut and subdivide. ループカット と細分化を使用する。 ・ The curve on the spine was created in a circular area as shown in the figure below using proportional editing. 背表紙のカーブは、 プロポーショナル編集 を利用して、下図のような円状の範囲で作成する。 ・Make an inset to create the inside and created the boundary between the spine and the paper . インセット をして面を内側に作り出し、背表紙と紙面部分の境界を作りました。 FYI ご参考までに。

ios14からswiftUIでVideoPlayerが使えるようになったので使ってみました。swiftUIのコードのみの表示とUIViewControllerRepresentableを継承したコードが必要になるところを記載しました。 記事の内容は、 Qiitaにも投稿した記事です。 https://qiita.com/ozawa0711/items/a33ee808c7f710033d60 今回は、その記事からの発展で、 ログイン画面を作ってみました。 import SwiftUI import AVKit struct ContentView: View { private let player = AVPlayer(url: Bundle.main.url(forResource: "kawa", withExtension: "mp4")!) var body: some View { ZStack{ PlayerViewController(player: player) .onAppear(){ self.player.play() }.edgesIgnoringSafeArea(.all) Login2View() } } } 出来上がりの動画です。 この投稿をInstagramで見る smart_tech_ozawa711(@smart_tech_ozawa711)がシェアした投稿

今回も yonaoshi3Dさんのサイト に掲載があったものです。 Blenderで試してみました。  こんな感じに完成。 カラーと粗さとの 調整でここまでいけます。   この時のshaderの設定 下記になります。 ここから粗さをツルツルにすると下のようになります。 更に、質感をメタリックにすると下記のようなスライムになる （背景と一緒の色なので、緑の土台を入れてます。） シェーディングノードはこのようになります。 yonaoshiさんの工夫点は、目は反射はせず、 ボディのみ、艶っぽく金属感を出してます。 U-NEXT（ユーネクスト）-31日間無料トライアルプロモーション DMM英会話-あなたも業界No1のレッスンを受けてみませんか？

今回も 3D Bibiさん のサイトに掲載があったものです。 Blenderで試してみました。 こんな感じに完成。色違いも表示してみました。 ポイントはshading画面ですね。 下記の図のように、shaderというものを組み合わせられます。 それぞれのセルのタイトルは、下記を表現するそうです Emissionは、放射を表現、 GlassBSDFはグラス表現、 VoronoiTextureは反射を表現、 Blenderは質感をリアルにするために、 組み合わせて表現するようです。 結婚相談所が運営する真剣な婚活【ベルロード縁結びサポート】