Code Monkey home page Code Monkey logo

playgroundviewmodifier's Introduction

PlaygroundViewModifier

PlaygroundModifier

You can import PlaygroundSupport and SwiftUI to your Xcode playgrounds and then create a SwiftUIView like this

Step 1. Import PlayGroundSupport and SwiftUI

import UIKit
import PlaygroundSupport
import SwiftUI


struct ContentView: View {
  var body: some View {
      VStack {
          Text("SwiftUI in a Playground")
          Button(action: {print("tapped")}, label: {
              Label("Tap Me", systemImage: "hand.point.up.left.fill")
                  .font(.title2)
          })
      }
  }
}

Step 2. Set the current playground page live view to the ContentView()

Note: in an earlier version of this, I used a UIHostingViewController. This is not necessary, You can now just use setLiveView()

If you want to see the view presented, you need to add the following code after your ContentView struct

PlaygroundPage.current.setLiveView(ContentView())

Now when you run your playground, you will see the content view displayed to the right.

image-20210104155653728

The problem is that the frame does not represent any particular iPhone as you see on the canvas when you are running a full XCode project.

Option 1

You could embed your view (in this case the VStack) inside a NavigationView and optionally provide a title.

NavigationView {
    // The previous body content
    }
    .navigationTitle("Test")
}

The problem is that you don't know what the size is and you cannot compare how your views might look on different sized iPhones.

Option 2

As an alternative, I have created this View Modifier that can be applied to body view that allows you to specifiy an iPhone type.

And it will adjust the frame to be that device size.

Step 3. Add PlaygroundViewModifier.swift to the Sources folder of any playground

Just download and and drag the PlaygroundViewModifier.swift file to the Sources folder of your playground . This file contains a single ViewModifier called PlaygroundPhone plus a extension for VIew containing a function called playgroundPhone that has one parameter which is an PlaygroundPhone enum with some computed properties that contain the width and height of the cases representing the different iphones.

Step 4. Apply the playgroundPhone(_ phoneType) modifier

Now you can apply this modifier as the last modifier of your body content, passing in one of the iPhone enum cases as the argument.

.playgroundPhone(.iPhone12ProMax)

image-20210104165850205

ko-fi

playgroundviewmodifier's People

Contributors

stewartlynch avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.