Widget作成メモ(5)ーMediumビューの編集

著者：川上洋

公開日：2020/11/12

最終更新日：2020/11/12

カテゴリー：技術情報雑記

タグ：Swift、SwiftUI、Widget

こんにちは。川上です。

Widgetは、
・　systemSmall
・　systemMedium
・　systemLarge
の表示窓になります。

My的のホーム画面にくっつける多くのWidget窓に使っているサイズは、systemSmall、systemMediumです。
ので、systemMediumで表示処理で始めました。

まだ、systemMediumの表示面の壁造りだけで、な〜んもしてないですが・・。

// MARK: +++ Widget窓の作成
struct MinyCLock_WidgetEntryView : View {
    @Environment(\.widgetFamily) var family: WidgetFamily// Widget familyをサポートする
    var entry: Provider.Entry

    var body: some View {

        // サイズごとにViewを指定する実装
       switch family {
       case .systemSmall:
       　　// ・　・　省略

       case .systemMedium:
        ZStack {
            Color.black.edgesIgnoringSafeArea(.all)
            Image(uiImage:UIImage(named: "miny_small_1.png")!)
                .offset( x: 100)
            
            // mm/dd(ww)
            Text(entry.myDayString)
                .offset( x:-100,y: -60)
                .font(.title)
                .foregroundColor(.white)

            Text(" ココに、表示の予定だよ　✌️")
                .frame(width: 200, height: 100,
                       alignment: .leading)
                
                // 枠線を描画
                .border(Color.white,width: 2)
                
                .offset(x:-65, y: 20)
                .font(.system(size: 15))
                .foregroundColor(.yellow)
                .lineLimit(5)

            Text(" 今日明日の予定")
                .background(Color.black)
                .frame(width: 150, height: 30,
                       alignment: .leading)
                
                .offset(x:-65, y: -30)
                .font(.system(size: 15))
                .foregroundColor(.white)
                .lineLimit(5)

        }

       case .systemLarge:
              // ・　・　省略

       @unknown default: fatalError()
       }
        
    }
} // NonWidgetEntryView_1

// MARK: +++ Widget窓の作成

struct MinyCLock_WidgetEntryView : View {

@Environment(\.widgetFamily) var family: WidgetFamily// Widget familyをサポートする

var entry: Provider.Entry

var body: some View {

// サイズごとにViewを指定する実装

switch family {

case .systemSmall:

　　// ・　・　省略

case .systemMedium:

ZStack {

Color.black.edgesIgnoringSafeArea(.all)

Image(uiImage:UIImage(named: "miny_small_1.png")!)

.offset( x: 100)

// mm/dd(ww)

Text(entry.myDayString)

.offset( x:-100,y: -60)

.font(.title)

.foregroundColor(.white)

Text(" ココに、表示の予定だよ　✌️")

.frame(width: 200, height: 100,

alignment: .leading)

// 枠線を描画

.border(Color.white,width: 2)

.offset(x:-65, y: 20)

.font(.system(size: 15))

.foregroundColor(.yellow)

.lineLimit(5)

Text(" 今日明日の予定")

.background(Color.black)

.frame(width: 150, height: 30,

alignment: .leading)

.offset(x:-65, y: -30)

.font(.system(size: 15))

.foregroundColor(.white)

.lineLimit(5)

}

case .systemLarge:

// ・　・　省略

@unknown default: fatalError()

}

} // NonWidgetEntryView_1

で、
Text(” ココに、表示の予定だよ　✌️”)　
に、カレンダー予約イベントの表示処理を、書いていくのでした。。。

〜・ー・ー・

ー　SwiftUIレイアウトーコツツボハマくり( ..)φメモメモー
●Stack View
VStack　・・・　縦に配置する
HStack　・・・　横に配置する
ZStack　・・・　重ねて配置する
●ビューの外観や振る舞いを指定するモディファイアの順序
.frame
.offset
.background
.foregroundColor
・・・・・
使い順序で表示面が、結構、変わりますｗ

ではでは。。。