Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impl bottom floating material glassed tabbar in iOS #483

Merged

Conversation

shimastripe
Copy link
Contributor

@shimastripe shimastripe commented Aug 15, 2024

Issue

Overview (Required)

  • Replace native tabbar to custom floating tabbar
    • Background is clipped by iOS systemMaterial glass.
  • I'm not sure how far we could go with the design in iOS, so I addressed the UI first.

Links

Screenshot (Optional if screenshot test is present or unrelated to UI)

Android Before After
image 356984404-716d909e-f906-4673-ad1d-7b10ef19c38a Simulator Screenshot - iPhone 15 Pro - 2024-08-15 at 20 37 41

Movie (Optional)

Before After
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-08-15.at.20.39.24.mp4

Copy link
Member

@ry-itto ry-itto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

But, please wait a review from @shin-usu about #483 (comment) 🙏🏼

Copy link
Contributor

@shin-usu shin-usu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shimastripe
Sorry for the late response 🙇🏻
I left some comments. Thanks!

app-ios/Sources/App/RootView.swift Show resolved Hide resolved
app-ios/Sources/StaffFeature/StaffView.swift Outdated Show resolved Hide resolved
Comment on lines +106 to +107
// bottom floating tabbar padding
Color.clear.padding(.bottom, 60)
Copy link
Contributor

@shin-usu shin-usu Aug 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TimetableView has list mode and grid mode, and user can switch each mode. (Grid mode is developing now)
Grid mode also has floating bottom tab, like list mode. Therefore, I think it would be appropriate for this code to be added to the TimetableView, not the TimetableListView,

Copy link
Contributor Author

@shimastripe shimastripe Aug 16, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I understand your suggestion. However TimetableListView and TimetableGridView are ScrollView.

So if the padding is set in TimetableView, the scrollable area is above the floating tab bar.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I understand.
It seems to be fine as it is👌🏻

Copy link
Contributor

@shin-usu shin-usu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉 🍾

@shin-usu shin-usu merged commit 16d2480 into DroidKaigi:main Aug 16, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[iOS] Apply bottom navigation bar design
3 participants