Design Challenge

So, I’ve been working on translating the UI design created by the external designer into SwiftUI, and have done all of the easy bits:

The rounded rectangles for things like the question display/number input are just ZStacks of roundedrects filled, then stroked:

	ZStack {
	RoundedRectangle(cornerRadius: 10)
	.fill(.white)
	.padding(.horizontal)
	RoundedRectangle(cornerRadius: 10)
	.stroke(.black, lineWidth: 2)
	.padding(.horizontal)
	HStack {
	Text(questionText)
	.font(.title)
	.fontWeight(.heavy)
	Text(calculatorDisplay)
	.font(.title)
	.fontWeight(.heavy)
	.foregroundColor(.blue)
	}
	}
	.frame(maxWidth: 350)
	.offset(y: 15)

view raw TimesTable RoundRect.swift hosted with ❤ by GitHub

Something I have learned in the process is the .offset modifer. This is what’s used to move a view from where SwiftUI would have placed it, and is what I’ve done to create that overlapped style where the question display/number input is sitting halfway over the bottom of the blue rounded rectangle. This is in the last line of the code above: .offset(y: 15) This is moving the whole ZStack down by 15. A trick to watch with this is that since you’ve messed with SwiftUI’s arrangement, it doesn’t then shuffle everything else around this – you need to manually deal with making some space below it.

The jobs still to do on this view is the customisation of the picker, which I think is going to have to be writing a picker from scratch (or finding the source for the library picker and altering it), and the even more custom combined picker/progress indicator.