I'm developing an app for PC, tab and mobile, which consists in a list of items. Each item has a detail page. The idea is to display each item's detail page when the user clicks on that specific item, but with different behaviour depending on the device. In PC/tablet, the detail view will be displayed on the right side of the list, and in mobile the detail page will be opened in a new page. You can see the idea in this image:
The image was made by Martin Pritchard, who wrote this Medium post some years ago about how to solve the same problem I'm facing now. He used IonSplitPane in Ionic 3 with Angular. I'm afraid I can't use this approach, or at least I'm not able to replicate it with Vue.
I've tried IonSplitPane alongside with IonMenu, but the behaviour is not the expected, because I don't need a 'hamburguer' menu that collapses in mobile view. Besides, I've tried with IonSplitPane only and I'm not able to put the collapsible side at the end (as it should be the detail view which hides in mobile, and not the left (master) pane). I'm not even sure this could be a solution, as I need that in mobile the detail page displays in a new view.
Has anyone faced this problem and could help me?
Thank you very much in advance.
Related
In my flutter app, I'm implementing a full page view using -
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
Now, It works just fine until I reach a page in the app that uses PinCodeTextField. In that page, a user can input the received OTP.
Now, the issue is that as soon as the page is opened, "Auto-fill code from Messages" appears and it brings back the notification bar as well as the bottom menu bar.
I have not implemented this feature and looks like somehow It has come on its own. Though, it is a nice feature to have, I really don't want it to mess up my app's full page view. Not until I restart the app, it goes back to full page view but again whenever I reach to a page with PinCodeTextField, that popup appears and messes things up.
Now, how do I force my app to go back to full page view ? If that is not possible, how do I stop Auto-fill code to keep coming on my screen on such pages ?? Kindly help.
I have built a functioning flutter app using Navigator 2.0 API and RouterDelegate. All the navigation works fine but the problem is on the back event. On pressing back either from the app bar or from the device button, the top page does pop but the page that is 2 layers deep in the stack is displayed for a fraction of second before the desired page is displayed.
Like in the attached image, when going back from ArchivedChatThread, Bots is displayed for few milliseconds and then another page is shown. Here, the stack is also not proper as there should be one page between Bots and ArchivedChatThread i.e ArchivedChats.
I tried a lot of different things but am unable to find a solution as this is my first flutter app and Navigator 2.0 being a relatively new and complex concept.
image
Any kind of help is appreciated. Thanks!
The splitApp loads master and detail pages on initial load on desktop and on tab as normal but when i try to emulate it on any phone like iphone 4,5,6 or nexus in chrome split app shows only master page on initial load instead of detail page.I tried all three modes of splitApp but does not work well with phone.
And also when i make my detail page to show nav button the default navigation button that comes with splitApp to switch to master from detail does not appear.
Regards,
Ajaay Krishna
That is the way a 'SplitApp' behaves on a mobile device.
As there isn't enough screen space on a mobile device to display both the 'Master' and the 'Detail', as you can, say, on a desktop or a tablet, the expected behaviour on a mobile device is to first display the 'Master' list and then on navigation, display the 'Detail'. So there isn't anything wrong there.
As for the issue with the back navigation button, please post a code snippet to further elaborate..
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Android facebook style slide
Recently Facebook released a new version of its Android application that features an improved navigation. One main new feature is the new menu (that already existed on the iOS version):
By clicking on the home button of the Action Bar, this menu slides from left to right, hiding the main activity that is no longer accessible.
How do you think this menu has been made? Do you think they have just played with the SlidingDrawer or is it something else like a ViewPager?
Thanks!
EDIT
There is no way that it could be one of the two (ViewPager or SlidingDrawer). It's not the menu that slides in, it's the main screen that moves away leaving only a tiny part of it on the screen. It's like if the menu was already behind that main screen and that it just got uncovered. And second thing, we can actually still interact with that main screen (otherwise I would have assumed that they took a screenshot in order to cut a tiny part of it to compose that view).
Almost everything except the photo taking parts is inside a WebView in the new FB app. I could not find any native Android UI controls in the stream or the lists.
Making the same effect using Javascript/HTML/CSS should be quite easy I feel.
Decompiling the apk would give a better idea.
I was looking for implementing the same thing and I came up with a solution that is good enough (or maybe is really near what they have done).
So what I did was a single FrameLayout with both of the Layouts stacked together and then I just animate the top layout to slide to the right of the screen (just need to call the slideTo or scrollBy. And basically it's that! Quite simple and effective!
EDIT:
I've answered to a similar question here with some code samples, enjoy =): Click here
You can build this application style using javascript, HTML5 and CSS3 like it shows this little library "jbackbone-mobile", https://github.com/mjromper/jbackbone-mobile
and see this demo from any browser (device or desktop) http://lab.ochio.com.es/jbackbone/index.html
Ok I'm making an iPhone app that (only on the first time the user opens the app) loads a tableview with a list of, for example, sports teams. The user checks the sports teams he wants and taps the done button. Then the tab bar loads with the teams the user selected in the tab bar. Any way how to do this as far as a tutorial/ code? Thanks!
I think this link may help you: How to set iPhone tab bar icon in code?. For more help on how to use TabBarControllers, there are tons of sample code AND sample projects found here: UITabBarController Class Reference. Hope that helps!