日: 2023年10月22日

[Swift] 46 メモアプリ製作 その13 背景色のグラジエント

[Mac M2 Pro 12CPU, Ventura 13.6, watchOS 10.0.1, Xcode 15.0]

Apple Watchは表示面が小さくメモによっては全体を一度に表示できません。表示されているところがメモ全体のどこに当たるのか分かるようにするため、背景色をグラジエントにしました。

これでメモの下部を表示していても背景色が薄いので上部が隠れていると判断でき、メモの見落としを防ぐことができます。

スクロールバーでも同様の効果がありますが、watchOSでは常時表示にはできないため役に立ちません。

改良前：メモ１を見落とすおそれあり(実際は付番していないため)
改良後：メモ上部が隠れていることが分かる
.background(LinearGradient(gradient: Gradient(colors: 
[Color.blue, Color.blue.opacity(0.0)]), startPoint: .top, endPoint: .bottom))
struct ContentView: View {
    @Environment(\.managedObjectContext)var viewContext

    @FetchRequest(
    entity: Note.entity(),
    sortDescriptors: [NSSortDescriptor(key: "creationDate", ascending: false)])
    private var contents: FetchedResults<Note>

    var body: some View {
        NavigationView{
            List{
                ForEach(contents){content in
                    NavigationLink{
                        if((content.content?.isEmpty) == false){
                            DraftAppleWatch(text:content.content!, note: content)
                        }
                    }label:{
                        if((content.content?.isEmpty) == false){
                            Text(content.content!)
                            .font(.system(size: 20))
                            .background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.blue.opacity(0.0)]), startPoint: .top, endPoint: .bottom))
                        }
                    }
                }
                .onDelete(perform:deleteContent)
            }
            .navigationTitle("メモリスト")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar{
                ToolbarItem(placement:.bottomBar){
                     NavigationLink{
                        DraftAppleWatch()
                    }label:{
                        Text("＋")
                        .font(.system(size: 24))
                    }
                }
            }
        }
        .accentColor(.blue)
    }
＜以下略＞
ScrollView {
       Text(content.content!)
       .font(.system(size: 20))
       .background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.blue.opacity(0.0)]), startPoint: .top, endPoint: .bottom))
}
スクロールしないと
右上のバーは表示されない

[Swift] 45 Apple WatchのComplication改良 コーナー表示で効かない修飾子

[Mac M2 Pro 12CPU, Ventura 13.6, watchOS 10.0.1, Xcode 15.0]

自製カレンダーのコーナーComplicationを改良しました。日付と元号の位置を入れ替えています。日付を本体として配置すると曜日がはみ出るため、ラベルの方に移動させました。

最初は日付と曜日が本体として収まるようフォント指定あるいは自動調整しようとしたものの、関連する修飾子はどれも効きませんでした。

また右上の天気に色を付けたいのですが、類似アプリを探すか自分で作るしかなさそうです。自製するなら天気APIを調査するところから着手でしょうか。

右下コーナー：曜日がはみ出る
曜日はラベルへ移動
struct ComplicationCorner : View {
    var entry: Provider.Entry
    
    var body: some View {
        Text(getFormattedDate())
//        Text(getFormattedDate() + getFormattedWeekday()) // 曜日は収まらないのでラベルへ
        .foregroundColor(.green)
        .minimumScaleFactor(0.5) // 効かない
        .font(.system(size: 60)) // 効かない
        .lineLimit(nil)          // 効かない
        .widgetCurvesContent()
        .widgetLabel {
            Text(getFormattedYear() + " " + getFormattedWeekday())
            .foregroundColor(.yellow)
            .font(.system(size: 20))
        }
        .containerBackground(for: .widget){
            Color.blue
        }
     }
＜以下略＞