SwiftUIでカレンダーを作成する
SwiftUIでカレンダーを作成する方法です。 VStack と HStack を組み合わせて作成しました。
2023年2月24日追記 iOS16からUICalendarViewという便利なものが用意されたのでそれを使った方が良いかもしれません。 こちら の記事です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct CalenderCell<Content: View>: View { | |
let content: Content | |
init(@ViewBuilder content: () -> Content) { | |
self.content = content() | |
} | |
var body: some View { | |
VStack(alignment: .leading, spacing: 2) { | |
content | |
} | |
.frame(width: 46, height: 46, alignment: .top) | |
.border(Color.black, width: 0.5) | |
} | |
} | |
struct CalenderCell_Previews: PreviewProvider { | |
static var previews: some View { | |
CalenderCell { | |
NumberText(number: 12) | |
ScheduleText(text: "歯医者") | |
} | |
.previewLayout(.sizeThatFits) | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct ContentView: View { | |
var body: some View { | |
VStack(spacing: 0) { | |
HStack(spacing: 0) { | |
DayOfWeekText(text: "Sun") | |
DayOfWeekText(text: "Mon") | |
DayOfWeekText(text: "Tue") | |
DayOfWeekText(text: "Wed") | |
DayOfWeekText(text: "Thu") | |
DayOfWeekText(text: "Fri") | |
DayOfWeekText(text: "Sat") | |
} | |
HStack(alignment: .top, spacing: 0) { | |
CalenderCell { | |
NumberText(number: 1) | |
ScheduleText(text: "美容院") | |
ScheduleText(text: "病院") | |
} | |
CalenderCell { | |
NumberText(number: 2) | |
} | |
CalenderCell { | |
NumberText(number: 3) | |
} | |
CalenderCell { | |
NumberText(number: 4) | |
ScheduleText(text: "映画") | |
} | |
CalenderCell { | |
NumberText(number: 5) | |
} | |
CalenderCell { | |
NumberText(number: 6) | |
} | |
CalenderCell { | |
NumberText(number: 7) | |
} | |
} | |
HStack(alignment: .top, spacing: 0) { | |
CalenderCell { | |
NumberText(number: 8) | |
} | |
CalenderCell { | |
NumberText(number: 9) | |
} | |
CalenderCell { | |
NumberText(number: 10) | |
} | |
CalenderCell { | |
NumberText(number: 11) | |
} | |
CalenderCell { | |
NumberText(number: 12) | |
ScheduleText(text: "おやすみ") | |
} | |
CalenderCell { | |
NumberText(number: 13) | |
} | |
CalenderCell { | |
NumberText(number: 14) | |
} | |
} | |
HStack(alignment: .top, spacing: 0) { | |
CalenderCell { | |
NumberText(number: 15) | |
} | |
CalenderCell { | |
NumberText(number: 16) | |
} | |
CalenderCell { | |
NumberText(number: 17) | |
} | |
CalenderCell { | |
NumberText(number: 18) | |
} | |
CalenderCell { | |
NumberText(number: 19) | |
} | |
CalenderCell { | |
NumberText(number: 20) | |
} | |
CalenderCell { | |
NumberText(number: 21) | |
ScheduleText(text: "お昼寝") | |
} | |
} | |
HStack(alignment: .top, spacing: 0) { | |
CalenderCell { | |
NumberText(number: 22) | |
ScheduleText(text: "美容院") | |
} | |
CalenderCell { | |
NumberText(number: 23) | |
} | |
CalenderCell { | |
NumberText(number: 24) | |
} | |
CalenderCell { | |
NumberText(number: 25) | |
ScheduleText(text: "焼肉") | |
} | |
CalenderCell { | |
NumberText(number: 26) | |
} | |
CalenderCell { | |
NumberText(number: 27) | |
} | |
CalenderCell { | |
NumberText(number: 28) | |
} | |
} | |
} | |
.border(Color.black, width: 1) | |
} | |
} | |
struct ContentView_Previews: PreviewProvider { | |
static var previews: some View { | |
ContentView() | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct DayOfWeekText: View { | |
let text: String | |
var body: some View { | |
Text(text) | |
.font(.system(size: 10).bold()) | |
.frame(width: 46, height: 46) | |
.border(Color.black, width: 0.5) | |
} | |
} | |
struct DayOfWeekText_Previews: PreviewProvider { | |
static var previews: some View { | |
DayOfWeekText(text: "Sun") | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct NumberText: View { | |
let number: Int | |
var body: some View { | |
Text(String(number)) | |
.font(.system(size: 12).bold()) | |
.padding(.top, 4) | |
.padding(.leading, 4) | |
.frame(width: 46, alignment: .leading) | |
} | |
} | |
struct NumberText_Previews: PreviewProvider { | |
static var previews: some View { | |
NumberText(number: 1) | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SwiftUI | |
struct ScheduleText: View { | |
let text: String | |
var body: some View { | |
HStack(spacing: 0) { | |
Text(text) | |
.lineLimit(1) | |
.font(.system(size: 8).bold()) | |
.padding(.horizontal, 4) | |
.frame(width: 38) | |
.background(Color(uiColor: .systemGray4)) | |
} | |
.frame(width: 46, alignment: .center) | |
} | |
} | |
struct ScheduleText_Previews: PreviewProvider { | |
static var previews: some View { | |
ScheduleText(text: "美容院") | |
} | |
} |