[ios] Refactor search bars #7236

kirylkaveryn · 2024-01-24T10:06:38Z

kirylkaveryn commented

2024-01-24 10:06:38 +00:00

Closes organicmaps/organicmaps#6758

Issue:

There are 3 search bars in ios app now:

search screen
download maps
bookmarks

And there are no 2 equal search bars.
Moreover, they are used not conventional for ios systems ways.

Screen	Search	Bookmarks	Download Maps

Wat's wrong	totally custom design not matching with rest of the other searchbars. Very small elements and fonts 914 pt vs native 17pt) - hard to use (for me)	native searchbar but used in very hardcoded way with unneeded custom animations	native searchbar but implemented in place where it should not be used (as title view) and because of that totally unadjustable (looks really bad

If you look at the most popular apps in ios (except google's) you will see totally native (in UI) searchbars:
GitHub

Safari

Telegram

Photos

Jira

And they are using native animation which is looks like:

Solution:

So for me, it is a good point to remove all hardcoded non-native elements and behavior to make it more consistent with the system UI/UX so users can feel comfortable when working with the app.

Custom elements that "replace native" in such components as the searchbar are really hard to debug, support, and update in the future.

Apple HIG:
https://developer.apple.com/design/human-interface-guidelines/search-fields

This PR:

refactors all serchbars in the application with native elements and behaviour by replacing UISearchBar with UISearchController which integrated inside navigation bar properly (not hardcoded)
searchbar is Search screen is not replaced with UISearchController but redesigned to match its style (because it have complicated behaviour in Search screen)
some UI bugs fixed - see below

Result:

iPhone:

Screen	Bookmarks	Download	Search

iPhoneSE:

iPad:

iPad on macOS:

Dark Theme:

Animations:

There are several ways to work wit searchbar animation:

it can be hide but shows on drag
it can slides up on tap (begin searching) and navbar hides to open more free space (I disabled this for iPad - user always see navbar)
animation of cancel button

So now it looks like:

iPhone:

iPad:

Additional UI Bugs are fixed during this PR

bug during animation on download maps page (black row at the top)
bug with layout that causes linens at bottom of Download and Bookmark pages
before:

after:

Closes https://git.omaps.dev/organicmaps/organicmaps/issues/6758 ### Issue: There are 3 search bars in ios app now: 1. search screen 2. download maps 3. bookmarks And there are no 2 equal search bars. Moreover, they are used not conventional for ios systems ways. | Screen | Search | Bookmarks | Download Maps | | --- | --- | --- | --- | | | <img width="329" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/aba9371e-3769-4cb2-a6d0-06686365925d"> | <img width="336" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/4358047a-f514-45c3-963a-70ba99020e90"> | <img width="357" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/e2e74d86-6225-4acb-a35f-6218c6a4ec8a"> | | Wat's wrong | totally custom design not matching with rest of the other searchbars. Very small elements and fonts 914 pt vs native 17pt) - hard to use (for me) | native searchbar but used in very hardcoded way with unneeded custom animations | native searchbar but implemented in place where it should not be used (as title view) and because of that totally unadjustable (looks really bad | ___ If you look at the most popular apps in ios (except google's) you will see totally native (in UI) searchbars: GitHub ![IMG_4025](https://github.com/organicmaps/organicmaps/assets/79797627/c1374487-7a31-419b-8644-fd9c8fd55509) Safari ![IMG_4024](https://github.com/organicmaps/organicmaps/assets/79797627/25954fe0-ee35-40f4-a766-df53ea19c72b) Telegram ![IMG_4022](https://github.com/organicmaps/organicmaps/assets/79797627/34b6381d-32a6-402c-a2e8-210eb45824f0) Photos ![IMG_4023](https://github.com/organicmaps/organicmaps/assets/79797627/dfb88160-42e4-4a08-82b4-db5487971f10) Jira ![IMG_4026](https://github.com/organicmaps/organicmaps/assets/79797627/d845c113-e5f0-4cd8-b578-4b072ade72b5) And they are using native animation which is looks like: ![Simulator Screen Recording - iPhone 11 Pro - 2024-01-24 at 13 58 47](https://github.com/organicmaps/organicmaps/assets/79797627/38818647-d0bc-4561-816b-ab3d309243ea) ___ ### Solution: So for me, it is a good point to remove all hardcoded non-native elements and behavior to make it more consistent with the system UI/UX so users can feel comfortable when working with the app. Custom elements that "replace native" in such components as the searchbar are really hard to debug, support, and update in the future. Apple HIG: https://developer.apple.com/design/human-interface-guidelines/search-fields ___ ### This PR: 1. refactors all serchbars in the application with native elements and behaviour by replacing `UISearchBar` with `UISearchController` which integrated inside navigation bar properly (not hardcoded) 2. searchbar is Search screen is not replaced with UISearchController but redesigned to match its style (because it have complicated behaviour in Search screen) 3. some UI bugs fixed - see below ___ ### Result: iPhone: | Screen | Bookmarks | Download | Search | | --- | --- | --- | --- | | | <img width="360" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/aa22647e-52f7-4c65-8aac-ff00c55c6ee2"> | <img width="358" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/b8765a93-52fb-40a0-b5e7-0c179eee81c0"> | <img width="366" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/00d8db42-0842-4819-93f3-cbaa49ccac60"> | iPhoneSE: <img width="351" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/9990a5bc-be80-48cf-90a8-04a4c0bde56c"> iPad: <img width="739" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/8cce4c7b-8dc7-4166-9e66-e649cb5c1004"> iPad on macOS: <img width="739" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/8cce4c7b-8dc7-4166-9e66-e649cb5c1004"> Dark Theme: <img width="363" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/a5f22b9a-d7ee-47f6-899a-183cb72645ed"> <img width="360" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/4ab2d7bd-b5b0-4765-b516-da86ce0324e6"> ___ ### Animations: There are several ways to work wit searchbar animation: 1. it can be hide but shows on drag 2. it can slides up on tap (begin searching) and navbar hides to open more free space (I disabled this for iPad - user always see navbar) 3. animation of cancel button So now it looks like: iPhone: ![Simulator Screen Recording - iPhone 15 Pro - 2024-01-18 at 22 26 58](https://github.com/organicmaps/organicmaps/assets/79797627/099dc095-cdc7-4b43-a5e9-fbea91a92f27) ![Simulator Screen Recording - iPhone 15 Pro - 2024-01-22 at 19 15 09](https://github.com/organicmaps/organicmaps/assets/79797627/fedc2d62-de45-4b85-8833-11f2c7823659) ![Simulator Screen Recording - iPhone 15 Pro - 2024-01-22 at 19 15 26](https://github.com/organicmaps/organicmaps/assets/79797627/4431f942-53d6-4de7-a344-cab9a85ddcdc) iPad: ![Simulator Screen Recording - iPad Air (5th generation) - 2024-01-22 at 19 09 22](https://github.com/organicmaps/organicmaps/assets/79797627/e4596f65-1efc-4a68-912e-b7504cca937e) ![Simulator Screen Recording - iPad Air (5th generation) - 2024-01-22 at 19 11 33](https://github.com/organicmaps/organicmaps/assets/79797627/1ee16dd6-343e-4725-9287-7f99c439dad5) ___ ### Additional UI Bugs are fixed during this PR 1. bug during animation on download maps page (black row at the top) ![Simulator Screen Recording - iPhone 11 Pro - 2024-01-24 at 13 32 44](https://github.com/organicmaps/organicmaps/assets/79797627/9dec4fb7-847c-4a76-9bb4-2cebd081a405) 5. bug with layout that causes linens at bottom of Download and Bookmark pages before: <img width="357" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/279419f2-8ae5-4769-96d9-c92e004151f4"> <img width="346" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/ab941681-8400-4784-82f9-a2cdaafe4e23"> after: <img width="350" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/8e85482b-e324-4b63-b0cb-0f44e21acb92"> <img width="346" alt="image" src="https://github.com/organicmaps/organicmaps/assets/79797627/a98a8955-dfe7-49b7-af12-4a2a30d4db9b">

🚀 2

biodranik (Migrated from github.com) approved these changes 2024-01-26 09:44:52 +00:00

biodranik (Migrated from github.com) left a comment

Closes #2593?

No, these bugs are different.

Perhaps it because button tap was misseed. When we remove tabbar we decrease the effective size of tab buttons. I can increase it in future.

This is a good hypothesis! Maybe taps are passing down to the map. But I observed that only the bottom buttons were hidden, while the zoom buttons were still visible on the map. Maybe it hints you where to look or how to reproduce the bug.

Let's merge it as is and make any improvements (if necessary) separately.

> `Closes #2593`? No, these bugs are different. > Perhaps it because button tap was misseed. When we remove tabbar we decrease the effective size of tab buttons. I can increase it in future. This is a good hypothesis! Maybe taps are passing down to the map. But I observed that only the bottom buttons were hidden, while the zoom buttons were still visible on the map. Maybe it hints you where to look or how to reproduce the bug. Let's merge it as is and make any improvements (if necessary) separately.

iphone/Maps/Core/Theme/Renderers/UISearchBarRenderer.swift

					
				@ -30,1 +30,4 @@

				      control.searchTextField.layer.cornerCurve = .continuous

				    }

				    // Default search bar implementation adds the grey transparent image for background. This code removes it and updates the corner radius. This is not working on iPad designed for mac.