マガジンのカバー画像

SwiftUIでいこう!

229
SwiftUIで簡単、プログラミング! 少しずつ理解していきます。
運営しているクリエイター

#programing

Customize views - SwiftUI でプログラミング - 2

Customize views - SwiftUI でプログラミング - 2

Use Int to display temperatures

Text("Mon")以外に最高気温と最低気温の表示をするためにText()が使われているところが2箇所あるので追加します。

数値が入るのでそのままでは表示することはできないので、文字に変換して表示できるようにします。

まずはプロパティ(変数)を追加します。

型が"Int"(整数)であることに注目します。このままText()に

もっとみる
SwiftUIを初めてみよう!

SwiftUIを初めてみよう!

初めの一歩はやはりアップルの公式サイトが良いかも。

Developperのサイトです。さらにSwiftUIについては

"Develop"のタブにはいります。そしてSwiftUIのタブへ

SwiftUIの概要がのページとなります。

したにスクロールしていくと

左端にチュートリアルのリンクがあるのでそれをクリックすると

最近Xcode15対応となり少し手を加えてあるようです。ここで全体、i

もっとみる
SwiftUIでいこう! - macOS App (2)

SwiftUIでいこう! - macOS App (2)

Macアプリの作成なのでiPhoneなどにはないメニューバーの作り方を参考サイトを見ながら実際に動かしてみます(Mac版Swift Playgrounds: Playgrounds:.appで実行します)。

デフォルトでできている以下コードにモディファイアをつけてメニューを操作します。

struct MyApp: App { var body: some Scene { W

もっとみる
SwiftUIでいこう! - macOS App (1)

SwiftUIでいこう! - macOS App (1)

Swift Playgrounds 4.1( MacではPlaygrounds.app )となって Xcodeを使わずMac アプリも作れるようになったので試しに参考サイトを見ながら作ってみます。

まずは基本形

struct ContentView: View { var body: some View { NavigationView{

もっとみる
Macで簡単Swift!

Macで簡単Swift!

Swift Playgroundsです。最近Mac版がアップデートされますます使い勝手がよくなりました。Xcode使わなくてもアプリがストアに出せるようにもなりました。(バージョンが4.1 にあがってMac版でもSwiftUIでのアプリ開発ができるようになりました!)iPhone、Macアプリが作成できます。Xcodeにも移行できるのでさらに他のものにも転用できそうです。

アプリとしては

iP

もっとみる
SwiftUIをはじめてみよう! - レイアウト(2)

SwiftUIをはじめてみよう! - レイアウト(2)

ざっくりとしたレイアウトはVStackなどを使ってできますが、もう少し細かい設定で好きな場所に配置したい場合があります。

frame(width:height:alignment:)表示のサイズを指定することができます。

指定できるのは

実際の表示ですが

struct ContentView: View { var body: some View { VStack {

もっとみる
SwiftUIをはじめてみよう! - レイアウト(1)

SwiftUIをはじめてみよう! - レイアウト(1)

SwiftUIでは複数のView を組み合わせて表示させるためにいくつか仕組みが用意されています。

VStack

縦方向に表示できるようにできます。

公式サイトの例示です。縦方向に文字が連続して表示されます。

VStack( alignment: .leading,spacing: 10 ) { ForEach( 1...10, id: \.

もっとみる
SWiftUIでいこう! - Timer.publish処理 スタート、ストップ

SWiftUIでいこう! - Timer.publish処理 スタート、ストップ

How to use a timer with SwiftUIとCustom Timer With Background Fetch Using SwiftUI - StopWatch Using SwiftUI - SwiftUI Tutorialsを参考に

単純なタイマーを作ります。XcodeのPlaygroundで実行できるようにします。基本的な形は以下でSwiftUIで組んでいきます。表

もっとみる
SWiftUIでいこう! - Timer.publish処理

SWiftUIでいこう! - Timer.publish処理

参考サイトを見ながらコードを書いて行きます。簡単にするためで見た目の部分は省いています。

大事なタイマーの部分です。

let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()

このペアになるのが、

.onReceive()

となります。そして、今現在の年月日、時刻を取得します。

@Stat

もっとみる
SwiftUIでいこう! - Timer処理まとめ。

SwiftUIでいこう! - Timer処理まとめ。

タイマーを作るときの作り方をまとめ。簡単にXcodeのplaygroundで実行してみます。

import Foundationvar count = 0Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in count += 1 print(count)}

これで、コンソールに1,2,3,・・・とカウ

もっとみる
SwiftUIでいこう! - アニメーション

SwiftUIでいこう! - アニメーション

画面中で動きのあるアニメーションを作ってみます。参考サイトです。

【初心者向けSwiftUI】アニメーションの基本を学ぶ!!この動画で基本は十分

カピ通信さんの解説

参考サイトの動画では円の上を車が走るという設定でアニメーションを作ってあります。始点と終点を決めることが重要ということです。ざっくりとした構造ですが、

構造体を重ねて使える"ZStack"を使いCircle()を2つ作ります。

もっとみる
SwiftUIでいこう! - Wheel Picker(水平方向)

SwiftUIでいこう! - Wheel Picker(水平方向)

以下の動画を見ながら作ってみます。

SwiftUI 2.0 Complex UI - Custom Horizontal Wheel Picker - Custom Animations - SwiftUI Tutorials

基本的なレイアウトから作っていきます。動画ではVStackでイメージ、Spaceer()を入れてテキスト2つを表示するようになっています。今回は画像は使わずテキストのみ

もっとみる
SwiftUIでいこう! - ミニアプリ。メモ(文字カウント付き)

SwiftUIでいこう! - ミニアプリ。メモ(文字カウント付き)

簡単に文字がかけて、編集できるようにします。1行の文字を入力するのであれば以下

struct TextField<Label> where Label : View

TextField()を使えます。

複数行について文字を書いて編集できるようにするには

struct TextEditor

TextEditor()を使うと複数行に文字を打ち編集できるようになります。

単純なものから

s

もっとみる
SwiftUIでいこう! - 写真を読み出し、保存 2

SwiftUIでいこう! - 写真を読み出し、保存 2

SenderView()を実装していきます。基本的な画面として写真を選ぶ画面(imagePicker)を開くボタンとその写真表示、
写真の名前、コメント、登録ボタンの4つの部分からなります。

新しいファイルとして作リます。必要なプロパティラッパーを書きます。

@Environment(\.managedObjectContext) private var viewContext @Stat

もっとみる