{"id":1234,"date":"2024-07-10T17:00:14","date_gmt":"2024-07-10T16:00:14","guid":{"rendered":"https:\/\/hennig.nu\/?p=1234"},"modified":"2024-07-15T16:49:34","modified_gmt":"2024-07-15T15:49:34","slug":"reusable-gradient-view","status":"publish","type":"post","link":"https:\/\/hennig.nu\/coding\/reusable-gradient-view","title":{"rendered":"Reusable gradient view"},"content":{"rendered":"\n

The first code snippet I’d like to share comes from a simple game I created for my daughter. The origin is a challenge from 100 days of SwiftUI<\/a>, where you are supposed to create an app for training the times tables. Back then I only got the logic working, but when she started with multiplications in school this year, she asked if could finish it for her. <\/p>\n\n\n\n

At first I planned to get it on her phone with Test Flight, but it turns out that you have to be sixteen to install Test Flight. So I realised the only viable option was to go through App Store, and since that meant the app would be available to anyone with an iPhone I’d better put some effort in the interface. <\/p>\n\n\n\n

With some input from my target audience I ended up with a gradient based theme, and now we’ve arrived to the reason for this post, the progress tracking view. <\/p>\n\n\n\n

It’s a pretty simple table layout (or a LazyVgrid to be accurate) that shows how many times you’ve played \u2013 or practiced \u2013 each table, that is represented by different gradients, looking a bit like candy. Maybe that’s why my daughter likes them\u2026<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The code is pretty straightforward. Each table is created by calling a GradientView that takes a few arguments. <\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
struct<\/span> <\/span>GradientView<\/span>: <\/span>View <\/span>{<\/span><\/span>\n\t<\/span>let<\/span> gradient: Gradient<\/span><\/span>\n\t<\/span>let<\/span> width: CGFloat<\/span><\/span>\n\t<\/span>let<\/span> height: CGFloat<\/span><\/span>\n\t<\/span>let<\/span> radius: CGFloat<\/span><\/span>\n\t<\/span>let<\/span> tabell: LocalizedStringResource<\/span><\/span>\n\t<\/span>let<\/span> spel: <\/span>Int<\/span><\/span>\n<\/span>\n    <\/span>var<\/span> body: <\/span>some<\/span> View {<\/span><\/span>\n\t\t<\/span>LinearGradient<\/span>(<\/span>gradient<\/span>: gradient, <\/span>startPoint<\/span>: .topLeading, <\/span>endPoint<\/span>: .bottomTrailing)<\/span><\/span>\n\t\t\t.<\/span>clipShape<\/span>(<\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: radius))<\/span><\/span>\n\t\t\t.<\/span>frame<\/span>(<\/span>width<\/span>: width, <\/span>height<\/span>: height, <\/span>alignment<\/span>: .center)<\/span><\/span>\n\t\t\t.<\/span>overlay<\/span> {<\/span><\/span>\n\t\t\t\t<\/span>RoundedRectangle<\/span>(<\/span>cornerRadius<\/span>: <\/span>5<\/span>)<\/span><\/span>\n\t\t\t\t\t.<\/span>strokeBorder<\/span>(.ultraThinMaterial, <\/span>lineWidth<\/span>: <\/span>0.35<\/span>)<\/span><\/span>\n\t\t\t\t<\/span>VStack<\/span> {<\/span><\/span>\n\t\t\t\t\t<\/span>Text<\/span>(tabell)<\/span><\/span>\n\t\t\t\t\t\t.<\/span>font<\/span>(Font.<\/span>custom<\/span>(Fonts.primary, <\/span>size<\/span>: <\/span>22<\/span>))<\/span><\/span>\n\t\t\t\t\t<\/span>Text<\/span>(<\/span>"<\/span>\\(<\/span>spel<\/span>)<\/span>"<\/span>)<\/span><\/span>\n\t\t\t\t\t\t.<\/span>font<\/span>(Font.<\/span>custom<\/span>(Fonts.primary, <\/span>size<\/span>: <\/span>28<\/span>))<\/span><\/span>\n\t\t\t\t}<\/span><\/span>\n\t\t\t\t.<\/span>shadow<\/span>(<\/span>color<\/span>: .black, <\/span>radius<\/span>: <\/span>1<\/span>)<\/span><\/span>\n\t\t\t}<\/span><\/span>\n\t\t\t.<\/span>shadow<\/span>(<\/span>radius<\/span>: <\/span>1<\/span>, <\/span>x<\/span>: <\/span>1<\/span>, <\/span>y<\/span>: <\/span>2<\/span>)<\/span><\/span>\n\t\t\t.<\/span>foregroundStyle<\/span>(.white)<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
The only important properties to create the View are gradient, width, height and radius. The last two are used to pass in the text that is displayed and can be replaced with whatever fits your needs.<\/p>\n\n\n\n
Then I simply call the view in a ForEach, inside my LazyVGrid.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
LazyVGrid<\/span>(<\/span>columns<\/span>: gridItems, <\/span>spacing<\/span>: width <\/span>\/<\/span> <\/span>32<\/span>) {<\/span><\/span>\n    <\/span>ForEach<\/span>(gameController.player.timesEachTablePlayed.<\/span>indices<\/span>.<\/span>dropFirst<\/span>(), <\/span>id<\/span>: \\.<\/span>self<\/span>) { i <\/span>in<\/span><\/span>\n\t\t<\/span>GradientView<\/span>(<\/span><\/span>\n\t\t\t<\/span>gradient<\/span>: Gradients.gradients[i],<\/span><\/span>\n\t\t\t<\/span>width<\/span>: height <\/span>\/<\/span> <\/span>8<\/span>,<\/span><\/span>\n\t\t\t<\/span>height<\/span>: height <\/span>\/<\/span> <\/span>8<\/span>,<\/span><\/span>\n\t\t\t<\/span>radius<\/span>: <\/span>8<\/span>,<\/span><\/span>\n\t\t\t<\/span>tabell<\/span>: globals.tabellerna[i],<\/span><\/span>\n\t\t\t<\/span>spel<\/span>: gameController.player.timesEachTablePlayed[i]<\/span><\/span>\n\t\t)<\/span><\/span>\n\t}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
There are a few things worth mentioning. First, I’ve created an array with predefined gradients to match the twelve playable times tables.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
struct<\/span> <\/span>Gradients<\/span> {<\/span><\/span>\n\t<\/span>static<\/span> <\/span>let<\/span> gradients: [Gradient] <\/span>=<\/span> [<\/span><\/span>\n\t\t<\/span>Gradient<\/span>(<\/span>colors<\/span>: [<\/span>Color<\/span>(.blue), <\/span>Color<\/span>(.yellow), <\/span>Color<\/span>(.red)]), <\/span><\/span>\n\t\t<\/span>Gradient<\/span>(<\/span>colors<\/span>: [<\/span>Color<\/span>(.white), <\/span>Color<\/span>(.red), <\/span>Color<\/span>(.pink)]),<\/span><\/span>\n\t\t<\/span>Gradient<\/span>(<\/span>colors<\/span>: [<\/span>Color<\/span>(.white), <\/span>Color<\/span>(.pink), <\/span>Color<\/span>(.orange)]),<\/span><\/span>\n    <\/span>...<\/span> and so on <\/span>...<\/span><\/span>\n\t]<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Second, the main view is wrapped in a Geometry Reader to make the layout automatically adjust to the current screen size, hence height\/8<\/code>, being passed to the GradientView. Since I want my buttons to be squares, I don’t bother using height and instead pass width for both properties.<\/p>\n\n\n\n
I admit that this solution has a serious problem. If you can’t be sure that your ForEach will return the same number of indices on each run, using a fixed set of pre defined gradients is probably not good idea, unless you want your app to crash. But an easy fix could be to use the modulo operator and have the gradients repeat when you run out of them.<\/p>\n\n\n\n
I admit that you could probably find a smarter solution, but if want to become a contributor to the swift community, I’ll have to start somewhere. <\/p>\n\n\n\n
This is somewhere.<\/p>\n","protected":false},"excerpt":{"rendered":"
The first code snippet I’d like to share comes from a simple game I created for my daughter. The origin is a challenge from 100 days of SwiftUI, where you are supposed to create an app for training the times tables. Back then I only got the logic working, but when she started with multiplications […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[849,850],"tags":[848],"class_list":["post-1234","post","type-post","status-publish","format-standard","hentry","category-coding","category-swift","tag-swift"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pflyg-jU","_links":{"self":[{"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/posts\/1234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/comments?post=1234"}],"version-history":[{"count":3,"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/posts\/1234\/revisions"}],"predecessor-version":[{"id":1250,"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/posts\/1234\/revisions\/1250"}],"wp:attachment":[{"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/media?parent=1234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/categories?post=1234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hennig.nu\/wp-json\/wp\/v2\/tags?post=1234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}