Build complication in SwiftUI の要約

Build complication in SwiftUIの要約
WWDC20セッション要約会

Transcript

1. 
   !UTV[VLJ 3ZP
   5TV[VLJIBTIJ #VJME
   DPNQMJDBUJPO
   JO
   4XJGU6*
   ͷཁ໿
   88%$ηογϣϯཁ໿ձ
2. ͓඼ॻ͖ NJO w ࣗݾ঺հ
   w ⚠஫ҙࣄ߲⚠
   w ίϯϓϦέʔγϣϯͱ͸ʁ
   w $PNQMJDBUJPO
   Y
   4XJGU6*
   w $PNQMJDBUJPO
   5FNQMBUF
   w ϓϨϏϡʔ
   w Τϥʔ Ҿ༻IUUQTTVQQPSUBQQMFDPNKBKQHVJEFXBUDIBQEFCXBUDIPT
3. ࣗݾ঺հ w :BIPP
   +"1"/
   w 1BZ1BZϑϦϚ
   J04ΞϓϦ
   w 5XJUUFS !UTV[VLJ
   w ݸਓΞϓϦ։ൃ͕झຯ
   ࠷ۙʮ4LZ$PEFʯͱ͍͏ΞϓϦ͕΍΍όζΓ
   w ޷͖ͳXBUDI
   GBDF͸
   ΠϯϑΥάϥϑϞδϡϥʔ
4. ⚠஫ҙࣄ߲⚠ w ։ൃ؀ڥ
   9DPEF
   
   CFUB
   
   XBUDI04
   
   CFUB
   w γϛϡϨʔλͰಈ࡞֬ೝ
   ࣮ػͩͱίϯϓϦέʔγϣϯ͕ਖ਼͘͠දࣔ͞Εͳ͔ͬͨ
   w ͍ΖΜͳ͕͠ΒΈͰ࣮ࡍʹಈ͔͍ͯ͠ΔεΫγϣ͕ແ͍Ͱ͢
   ޱ಄ͷઆ໌ؤுΓ·͢ʂ
5. ίϯϓϦέʔγϣϯͱ͸ʁ
6. ίϯϓϦέʔγϣϯͱ͸ʁ w ΞϓϦʹؔ͢ΔλΠϜϦʔͰؔ࿈ੑͷߴ͍৘ใΛ΢ΥονϑΣΠεʹදࣔ Ҿ༻IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPODMPDLLJU
7. $PNQMJDBUJPO
   Y
   4XJGU6* w ίϯϓϦέʔγϣϯΛ4XJGU6*Ͱ࡞ΕΔΑ͏ʹͳͬͨ
   w ϓϨϏϡʔͷػೳ͕ڧ͍
   w 4XJGU6*
   
   ͷԸܙΛड͚ΕΔ
8. GraphicCorner ▪CLKComplicationTemplateGraphicCornerCircularView ▪CLKComplicationTemplateGraphicCornerGaugeView ▪CLKComplicationTemplateGraphicCornerTextView GraphicCircular ▪CLKComplicationTemplateGraphicCircularView ▪CLKComplicationTemplateGraphicCircularStackViewT ext ▪CLKComplicationTemplateGraphicCircularClosedGaug eView ▪CLKComplicationTemplateGraphicCircularOpenGauge View GraphicRectangular ▪CLKComplicationTemplateGraphicRectangularFullVie w ▪CLKComplicationTemplateGraphicRectangularLargeVi ew ▪CLKComplicationTemplateGraphicRectangularTextGa ugeView ▪CLKComplicationTemplateGraphicRectangularStandar dBodyView ExtraLargeCircular ▪CLKComplicationTemplateGraphicExtraLargeCircular View ▪CLKComplicationTemplateGraphicExtraLargeCircular StackViewText ▪CLKComplicationTemplateGraphicExtraLargeCircular ClosedGaugeView ▪CLKComplicationTemplateGraphicExtraLargeCircular OpenGaugeView $PNQMJDBUJPO
   5FNQMBUF ߹ܭݸ௥Ճ
9. 1SFWJFX ద౰ͳ7JFXΛ࡞Δ import SwiftUI struct SampleGraphicRectangular: View { @State var gaugeValue: CGFloat = 3 var body: some View { VStack { Text("SwiftѪ޷ձ") Gauge(value: gaugeValue, in: 1...15) { Image(systemName: "drop.fill") .foregroundColor(.green) } currentValueLabel: { Text("\(gaugeValue, specifier: "%.1f")") } .gaugeStyle(LinearGaugeStyle( tint: Gradient(colors: [.orange, .yellow, .green, .blue, .purple]) )) } } }
10. 1SFWJFX ઌ΄ͲͷViewΛwatchOSͷίϯϓϦέʔγϣϯͱͯ͠ϓϨϏϡʔ w $-,$PNQMJDBUJPOςϯϓϨʔτ͸4XJGU6*ͷ7JFXͦͷ΋ͷͰ͸ͳ͍ͷͰɺ୯ ମͰ͸ϓϨϏϡʔ͢Δ͜ͱ͕Ͱ͖ͳ͍ CLKComplicationTemplateͱpreviewContext Ͱղܾʂ
11. 1SFWJFX w $MPDL,JUͱ4XJGU6*ΛJNQPSU
    w $PNQMJDBUJPO
    5FNQMBUF͸ɺͦΕͧΕͷXBUDI
    GBDFͰදࣔ
    
    FY
    $-,$PNQMJDBUJPO5FNQMBUF(SBQIJD$JSDVMBS7JFX
    
    ˠ
    ΠϯϑΥάϥϑϞδϡϥʔ
12. struct SampleGraphicRectangular_Previews: PreviewProvider { static var previews: some View { Group { CLKComplicationTemplateGraphicCornerCircularView(SampleGraphicRectangular()) .previewContext() CLKComplicationTemplateGraphicCircularView(SampleGraphicRectangular()) .previewContext() CLKComplicationTemplateGraphicRectangularFullView(SampleGraphicRectangular()) .previewContext() CLKComplicationTemplateGraphicExtraLargeCircularView(SampleGraphicRectangular ()) .previewContext() } } }
13. ֤1SFWJFXͷදࣔ 1SFWJFX
14. 1SFWJFX GBDF
    DPMPS w XBUDI
    GBDFΛςʔϚΧϥʔΛม͑Δ͜ͱ͕Ͱ͖Δ
    w ϓϨϏϡʔͰ΋؆୯ʹ֬ೝͰ͖·͢
    w QSFWJFX$POUFYU GBDF$PMPS
    HSFFO
15. 1SFWJFX $PNQMJDBUJPO3FOEFSJOH.PEF w XBUDI
    GBDFͷGBDF$PMPSʹΑͬͯίϯϓϦέʔγϣϯͷݟͨ໨Λมߋ͍ͨ͠ ৔߹ʹ͸ҎԼͷΑ͏ʹDPNQMJDBUJPOͷ3FOEFSJOH.PEF͕؀ڥม਺͔ΒऔΕ ·͢ͷͰͦΕΛར༻͢Δ͜ͱͰରԠͰ͖·͢ʂ @Environment(\.complicationRenderingMode) var mode FOVN
    $PNQMJDBUJPO3FOEFSJOH.PEF
    DBTF
    GVMM$PMPS
    DBTF
    UJOUFE
16. Τϥʔ ৽͘͠௥Ճ͞ΕͨศརͳΤϥʔ w $PNQMJDBUJPO$POUSPMMFSͷHFU$VSSFOU5JNFMJOF&OUSZʢʣ
    $PNQMJDBUJPO
    GBNJMZͱҟͳΔλΠϓͷ5FNQMBUF͕બ୒͞Ε͍ͯͨ৔߹ %BUB
    IBOEMFS
    DBMMFE
    XJUI
    JODPNQBUJCMF
    UFNQMBUF
    GPS
    DPNQMJDBUJPO
    GBNJMZ
    &YQFDUFE
    UFNQMBUF
    GPS
    $-,$PNQMJDBUJPO'BNJMZ(SBQIJD$JSDVMBS
    CVU
    SFDFJWFE
    POF
    GPS
    $-,$PNQMJDBUJPO'BNJMZ(SBQIJD$PSOFS