CODEWITHSUNDEEP
xamarin.formsxamarin.iosxamarin.android
icpero
icpero

Reputation: 1

Xamarin.Forms - Informative app layout suggestions / directions

I am totally fresh to mobile developments and I would appreciate any guideline here. I am doing a simple informative application (texts, images, web links) for Android and iOS, that would look like presented on this image: Preferred app layout example

Explanation: Top bar with 4 buttons is always there. Buttons 1-3 are switching between 3 standalone pages, where 2 and 3 are simple (maybe with vertical scrolling), but page 1 has fixed header and a few horizontal sliding pages underneath. Button 4 implements a calling function to predefined number, no content.

What I did: After researching for a while I tried to do this the most simple and straightforward way possible. My main page (ContentPage) has buttons in Grid and <ContentView x:Name="PageHolder">) under them. On clicking buttons 1-3 I set PageHolder.Content to desired page (PageHolder.Content = new B2Page().Content), all 3 of them are also ContentPages. In page B1 I use to combine fixead header elements with CarouselView (Xamarin.Forms.CarouselView 2.3.0-pre2), that enables horizontal sliding.

What I don't like: I created sliding pages in CarouselView using <CarouselView.ItemTemplate><DataTemplate> but I would like to have 5 pages with different layout here. I don't know how to achieve that. I also noticed too big heap usage when clicking buttons (I added pictures to each content page for testing), resulting in OOM exception, probably because new BxPage() is called many times. I tried to initialize all 3 pages once under main page but got same results so I'm not sure where this comes from.

I know this is quite long and maybe even a bit messy question but any answer or maybe just pointing into right direction (design-wise) would be greatly appreciated.

Upvotes: 0

Views: 42

Answers (1)

York Shen
York Shen

Reputation: 9084

page 1 has fixed header and a few horizontal sliding pages underneath. I would like to have 5 pages with different layout here.

You could try using Xamarin.Forms TabbedPage, it consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.

where 2 and 3 are simple (maybe with vertical scrolling), button 4 implements a calling function to predefined number, no content.

You could use Button 2,Button3 and Button 4 as ToolbarItem. When you click the ToolbarItem, you can open page or execute the some function. Here is an example about how to use ToolbarItem.

Upvotes: 0

Related Questions