cocoapodsの導入

swiftUIでUIライブラリを使用する際にcocoapodsを経由する事が多い為導入の手順をメモする。
1. cocoapodsをローカルにインストール

Terminal

$ sudo gem install cocoapods

2. cocoapodをセットアップ

Terminal

$ pod setup

3. プロジェクトフォルダ内でProfileを作成

Terminal(プロジェクトディレクトリ）

$ pod init

4. Podfileを編集

Podfile

target 'プロジェクト名' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for SwiftUIExample
  pod '導入したいライブラリ名', :git => 'ライブラリが置いてあるgithubのURL'

end

5. ライブラリをインストール

Terminal(プロジェクトディレクトリ）

$ pod install

2回目以降は

Terminal(プロジェクトディレクトリ）

$ pod update

6. 以降は.xcworkspaceファイルで開発を進める

contentView.swift

import SwiftUI
import hogehogeLibrary

Taquu

ScrollView内に大量のコンテンツを内包する場合

通常のVStackの場合、例えば表示するコンテンツの量が多くある時に全てをロードする必要があるが、LazyVStackを使用することで見えている部分だけ順次ロードしてくれる様になる。

FeedView.swift

struct FeedView: View {
    var body: some View {
        ScrollView {
            LazyVStack(spacing:24) {
                ForEach(0 ..< 1000) {  _ in
                    FeedCell()
                }
            }.padding(.top)
        }
    }
}

Taquu

TextFieldの実装

検索ボックス等のテキスト入力フィールドの実装方法メモ

実装するTextFieldのイメージ

基本的な使用例

ContentView.swift

TextField("プレースホルダー", text: $string）

実践的な使用例

まずは元になるSearchViewを作成し、その中にSearchBarを入れ込んでいく。

SearchView.swift

import SwiftUI

struct SearchView: View {
    @State var searchText = ""
    var body: some View {
        
        ScrollView{
            
            // search Bar
            SearchBar(text: $searchText)
                .padding()
        }
    }
}

struct SearchView_Previews: PreviewProvider {
    static var previews: some View {
        SearchView()
    }
}

SearchBar.swift

import SwiftUI

struct SearchBar: View {
    @Binding var text: String
    
    var body: some View {
        HStack {
            TextField("Search...", text: $text)
                .padding(8)
                .padding(.horizontal, 24)
                .background(Color(.systemGray6))
                .cornerRadius(8)
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                            .padding(.leading, 8)
                    }
                )
        }
    }
}

struct SearchBar_Previews: PreviewProvider {
    static var previews: some View {
        SearchBar(text: .constant("Text"))
    }
}