Pro Yearly is on sale from $80 to $50! »

Build complication in SwiftUI の要約

Build complication in SwiftUI の要約

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

D4f04ef104c8fbfc9caa3c80e41692fd?s=128

Ryo Tsuzukihashi

July 09, 2020
Tweet

Transcript

  1. !UTV[VLJ 3ZP5TV[VLJIBTIJ #VJMEDPNQMJDBUJPOJO4XJGU6* ͷཁ໿ 88%$ηογϣϯཁ໿ձ

  2. ͓඼ॻ͖ NJO w ࣗݾ঺հ w ⚠஫ҙࣄ߲⚠ w ίϯϓϦέʔγϣϯͱ͸ʁ w $PNQMJDBUJPOY4XJGU6*

    w $PNQMJDBUJPO5FNQMBUF w ϓϨϏϡʔ w Τϥʔ Ҿ༻IUUQTTVQQPSUBQQMFDPNKBKQHVJEFXBUDIBQEFCXBUDIPT
  3. ࣗݾ঺հ w :BIPP+"1"/ w 1BZ1BZϑϦϚJ04ΞϓϦ w 5XJUUFS !UTV[VLJ  w

    ݸਓΞϓϦ։ൃ͕झຯ ࠷ۙʮ4LZ$PEFʯͱ͍͏ΞϓϦ͕΍΍όζΓ w ޷͖ͳXBUDIGBDF͸ ΠϯϑΥάϥϑϞδϡϥʔ
  4. ⚠஫ҙࣄ߲⚠ w ։ൃ؀ڥ 9DPEFCFUB XBUDI04CFUB w γϛϡϨʔλͰಈ࡞֬ೝ ࣮ػͩͱίϯϓϦέʔγϣϯ͕ਖ਼͘͠දࣔ͞Εͳ͔ͬͨ w ͍ΖΜͳ͕͠ΒΈͰ࣮ࡍʹಈ͔͍ͯ͠ΔεΫγϣ͕ແ͍Ͱ͢

    ޱ಄ͷઆ໌ؤுΓ·͢ʂ
  5. ίϯϓϦέʔγϣϯͱ͸ʁ

  6. ίϯϓϦέʔγϣϯͱ͸ʁ w ΞϓϦʹؔ͢ΔλΠϜϦʔͰؔ࿈ੑͷߴ͍৘ใΛ΢ΥονϑΣΠεʹදࣔ Ҿ༻IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPODMPDLLJU

  7. $PNQMJDBUJPOY4XJGU6* 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 $PNQMJDBUJPO5FNQMBUF ߹ܭݸ௥Ճ
  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 $PNQMJDBUJPO5FNQMBUF͸ɺͦΕͧΕͷXBUDIGBDFͰදࣔ 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 GBDFDPMPS w XBUDIGBDFΛςʔϚΧϥʔΛม͑Δ͜ͱ͕Ͱ͖Δ w ϓϨϏϡʔͰ΋؆୯ʹ֬ೝͰ͖·͢ w QSFWJFX$POUFYU GBDF$PMPSHSFFO

  15. 1SFWJFX $PNQMJDBUJPO3FOEFSJOH.PEF w XBUDIGBDFͷGBDF$PMPSʹΑͬͯίϯϓϦέʔγϣϯͷݟͨ໨Λมߋ͍ͨ͠ ৔߹ʹ͸ҎԼͷΑ͏ʹDPNQMJDBUJPOͷ3FOEFSJOH.PEF͕؀ڥม਺͔ΒऔΕ ·͢ͷͰͦΕΛར༻͢Δ͜ͱͰରԠͰ͖·͢ʂ @Environment(\.complicationRenderingMode) var mode FOVN$PNQMJDBUJPO3FOEFSJOH.PEF

    DBTFGVMM$PMPS DBTFUJOUFE
  16. Τϥʔ ৽͘͠௥Ճ͞ΕͨศརͳΤϥʔ w $PNQMJDBUJPO$POUSPMMFSͷHFU$VSSFOU5JNFMJOF&OUSZʢʣ $PNQMJDBUJPOGBNJMZͱҟͳΔλΠϓͷ5FNQMBUF͕બ୒͞Ε͍ͯͨ৔߹ %BUBIBOEMFSDBMMFEXJUIJODPNQBUJCMFUFNQMBUFGPSDPNQMJDBUJPOGBNJMZ &YQFDUFEUFNQMBUFGPS$-,$PNQMJDBUJPO'BNJMZ(SBQIJD$JSDVMBS CVU SFDFJWFEPOFGPS$-,$PNQMJDBUJPO'BNJMZ(SBQIJD$PSOFS