@davidbures@mstdn.social
@davidbures@mstdn.social avatar

davidbures

@davidbures@mstdn.social

Neoficiální korektor pro Ministerstvo zdravotnictví. 🇺🇸🇸🇮🇨🇿

Senior Technical Writer @ USU, open source Mac programmer in my spare time.

Previously translator at 

Author of https://mstdn.social/@CorkApp

#swift #SwiftUI #writing

This profile is from a federated server and may be incomplete. Browse more on the original instance.

davidbures, to random
@davidbures@mstdn.social avatar

Bro fuck off, this isn’t America (with a Prague plate nonetheless, one of the cities with the best public transport and narrowest streets)

Also parked in a spot reserved for parents with small children

davidbures, to SwiftUI
@davidbures@mstdn.social avatar

I need some design help, I’m not good at iOS development 😅

I have this screen. Originally, it was called “Dictionary”. This is where you look up words.

Then, due to SwiftUI being annoying, I had to add another title to that bottom sheet. Because that technically is also a part of the dictionary, I also gave it the title “Dictionary”. See pic no2 for what inside that bottom sheet.

But now I have the same title on the same screen twice, which is bad.

How would you solve it?

davidbures,
@davidbures@mstdn.social avatar

@jonduenas
@ctietze Yes, it will get filled by the found definitions

“Search” seems like a good idea. I’m a it hesitant to be 100% about it because of the “Random word” and “Word of the day” sections of the sheet though, those aren’t really about searching 🤔

davidbures,
@davidbures@mstdn.social avatar

@alpennec Because it’s annoying to reach that far up on the Max iPhones. I know it goes against the established iPhone design principles, bit I still decided to fix the problem myself before Apple does

davidbures,
@davidbures@mstdn.social avatar

@jonduenas @ctietze I used to have tabs in a “Find My”-like bottom layout, but because that layout is not supported by SwiftUI (tab bar + sheet with detents), I had to use a hack that ended up extremely buggy and unusable :/ The tab bar ended up being obscured by the sheet randomly when you switched views, So I had to resort to this design (see pic of how it used to look)

So unfortunately, I can’t really move it anywhere 😅

davidbures,
@davidbures@mstdn.social avatar

@alpennec I wanted to put the search down somehow, but as far as I know, this sheer solution this is the only SwiftUI way.

Unfortunately, using reachability is pretty much out of the question because most users don’t know about it 🥲

davidbures,
@davidbures@mstdn.social avatar

@jonduenas @ctietze The main issue is putting the search at the bottom of the screen, which forces me into this slightly awkward design for my use case. Since I have to use .searchable and SwiftUI, this seems to be the only solution.

I definitely agree there are some differences in use between Maps and my app (in Maps, the background makes sense as you can interact with it completely separately from the sheet).

davidbures,
@davidbures@mstdn.social avatar

@ctietze @jonduenas I originally had the search at the top, because I was trying to follow established iOS design conventions (which is very easy in SwiftUI to be fair 😅). You can see that implementation here: https://mstdn.social/@davidbures/111991614166012784… (1/6)

davidbures,
@davidbures@mstdn.social avatar

So after struggling with it for days, I had to concede that I would have to have something as the title in the sheet, which is how we ended up in this “double title” situation (6/6)

davidbures,
@davidbures@mstdn.social avatar

Unfortunately, I had to move to a .searchable field instead due to a combination of factors. Now, I ran into a SwiftUI problem: in order for the field to show up properly, I had to create a NavigationStack and put the field in the title. (4/6)

davidbures,
@davidbures@mstdn.social avatar

This brings another problem: there’s no way to remove the reserved space for the title, so I either had to live with a huge useless space above the field (https://mstdn.social/@davidbures/112383747464089134) or try to hack together an awkward and jittery animation, which looked like 💩 (https://mstdn.social/@davidbures/112384183239415093) (5/6)

davidbures, (edited )
@davidbures@mstdn.social avatar

So then I wanted to move the field to the bottom, but that’s extremely difficult in SwiftUI. Nevertheless, I managed to do it through a sheet (pic 1 in the first post of this thread). This implementation didn’t have a title in the sheet, which was the intended design. At this point, I was using a normal Text Field… (3/6)

davidbures,
@davidbures@mstdn.social avatar

Then I did some user testing and a lot of people complained that the search field is hard to reach in an app whose main workflow is searching. They had to keep reaching to the top of the screen to do anything, which “made their hands hurt”, which “made them resent using the app” (2/6)

davidbures,
@davidbures@mstdn.social avatar

@jonduenas I’m with you completely 😅 The sad thing is that Apple is using something like searchable without a title in Maps, although it’s 100% UIKit

Unfortunately, I can’t write UIKit and don’t really want to learn it just for this (I’m a macOS dev who just happened to write this one iOS app, and I have no desire at all to develop iOS apps), and the complaints were pretty serious, so it feels like I’m between a rock and a hard place here

davidbures,
@davidbures@mstdn.social avatar

@jonduenas That’s a great point. Originally, I only had a text field. Then I figured that Apple would have an issue with a normal text field being used for searching with no indication of it being used for that, so I set out to create a custom field.

Unfortunately within SwiftUI, that ended up being impossible, as the animations were really bad (https://mstdn.social/@davidbures/112381954766424204).

I tried using the UIKit equivalent, but there were some issues with it, so I had to settle for searchable

davidbures,
@davidbures@mstdn.social avatar

@benbacardi That’s an interesting idea, thank you!

davidbures, to random
@davidbures@mstdn.social avatar

Welp, I designed an elaborate, high-performance sorting mechanism for definitions according to their score and then… ended up forgetting to actually use it.

Speaking of, the next version of Rizzference will finally show the top definitions first 😅

davidbures, to SwiftUI
@davidbures@mstdn.social avatar

In the next version of Rizzference, I had to remove my implementation of the bottom sheet + TabBar combo because the implementation of .searchable in the bottom sheet caused extremely buggy behavior. The TabBar would randomly disappear with no way to recover.

So, as a “next best thing”, I moved the buttons that were in the tab bar into the toolbar and made them navigable screens. Hopefully it won’t hurt usability too much 😕

video/mp4

jonduenas, to swift
@jonduenas@mastodon.world avatar

Alright, might be time to abstract in my app. Who has the best example? Should I use a ModelActor? Would a class holding a ModelContainer be sufficient if I create a new ModelContext inside the CRUD functions?

davidbures,
@davidbures@mstdn.social avatar

@jonduenas I’m doing my best to avoid abstractions whenever possible, and then this mf comes along 💀

davidbures,
@davidbures@mstdn.social avatar

@jonduenas That’s fair 😁 This is actually something I’m interested in myself

davidbures, to SwiftUI
@davidbures@mstdn.social avatar

It’s a shame that there isn’t a standard search field in SwiftUI. I can’t use .searchable for this use case, so I have to build my own search field, and I just can’t get the animation right :/

video/mp4

davidbures,
@davidbures@mstdn.social avatar

@glacials @alpennec That doesn't seem to fix it either 🤔 I tried both .navigationBarTitleDisplayMode(.inline) and .toolbarTitleDisplayMode(.inline) and neither change anything

davidbures,
@davidbures@mstdn.social avatar

@alpennec @glacials What do you mean? I made it so that the search field is always visible using placement: .navigationBarDrawer(displayMode: .always, which works great, but the design is unacceptable with that padding :/

davidbures,
@davidbures@mstdn.social avatar

@alpennec @glacials The expected behavior is to perform a search using the field, then she sheet gets pulled down, and results are displayed behind the sheet. Something like the attached video.

I managed to somewhat hack it using isPresented and .padding(.top, appState.isSearchFieldFocused ? 10 : -20), but it's still janky and jumps around a bit.

video/mp4

davidbures,
@davidbures@mstdn.social avatar

@alpennec @glacials It's much more apparent in this video

video/mp4

davidbures,
@davidbures@mstdn.social avatar

@alpennec @glacials It’s a shame that it’s so constrained… in the end, I ended up having to do a complete redesign of this screen just because of the searchable field causing problems (see video).

Now, I have a problem of the “Dictionary” title being in two places. Do you have any ideas how I could solve this? I can’t think of anything 😅 I suppose the title has to be above the search field so it doesn’t look odd, but I don’t know what to do about the title at the top

video/mp4

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • anitta
  • kavyap
  • Durango
  • hgfsjryuu7
  • magazineikmin
  • mdbf
  • DreamBathrooms
  • thenastyranch
  • Youngstown
  • slotface
  • PowerRangers
  • osvaldo12
  • khanakhh
  • rosin
  • Leos
  • InstantRegret
  • vwfavf
  • ngwrru68w68
  • cubers
  • modclub
  • tacticalgear
  • ethstaker
  • everett
  • tester
  • cisconetworking
  • normalnudes
  • GTA5RPClips
  • provamag3
  • All magazines
    •