I'm developing an Xamarin Android Mvx5-beta application. When running on a small-screen device, I want to show a drawer navigation using the Toolbar and the hamburger-icon. On larger devices, e.g. tablets, I want a different layout conaining three columns. No drawer navigation but a static panel with navigation options and two other panels for content.
I started with the examples XPlatformMenus and Fragments to get a drawer navigation layout combined with the use of activities (with fragments) in different layouts qualifiers, like:
Question:
Using this approach, Android automaticly looks for an activity with the same name (e.g. main_activity.axml) in the appropriate layout-qualifier folders. But on the larger screens I don't need a drawer layout and I do need an extra column. The Mvx-viewmodel does not yet know what layout to render, so it just calls:
ShowViewModel<HomeViewModel>();
ShowViewModel<MenuViewModel>();
These ViewModels, for example MenuViewModel, are registered for fragments that require a navigation_frame, as shown in here:
[MvxFragment(typeof(MainViewModel), Resource.Id.navigation_frame)]
[Register("mydemoapp.droid.views.fragments.MenuFragment")]
public class MenuFragment : MvxFragment<MenuViewModel>, NavigationView.IOnNavigationItemSelectedListener
{
<..>
}
So, rendering this same Activity in layout-sw600dp requires a navigation_frame. Which I don't want on these larger displays.
What would be the preferred design choise in this situation? I can think of two:
Show/hide elements in the Activity programmatically by querying the screen info
Don't make use of layout qualifiers, but design complete seperate Activities for larger screens and based on screen size let MVX Show ViewModel-A or ViewModel-B.
Any advice would be appreciated, many thanks in advance.
I think it depends how different your layout need to be between large screen and small screen form factors.
Few UI differences
In addition to using different layouts, you can define a bool property in your XML values resources that is different between standard and sw-600dp
values
<bool name="is_large_screen">false</bool>
values-sw600dp
<bool name="is_large_screen">true</bool>
You can then read this value in your Android views and prevent methods like ShowViewModel<MenuViewModel>(); firing when on large screens by altering the method calls from the view.
Many differences/Structural differences
If they share the same business logic but have very different UI requirements and you want to keep large screen code separate. Then I would suggest sharing the ViewModels but creating two separate Activites and layouts to handle the UI presentation. Using this method requires a bit more setup as you have to override some default MvvmCross behaviors as by default you can not register multiple Activities/Fragments to the same ViewModel. Overriding the MvxViewModelViewTypeFinder view lookup FindTypeOrNull you can intercept the lookup and filter types base on naming conventions. For example all large screen views end with "Tablet". Using the is_large_screen bool you can flag which views to register.
Related
I'm developing a custom table component for very large and very custom content. Therefore I decided not to go with TableView, but start from scratch (i.e. Control). I adopted the idea of the VirtualFlow to create and manage only the visible part of the table and reuse cells that have become invisible. However I needed virtual rows and columns.
My CustomVirtualFlow implements layoutChildren(). From the component's size and scrollbar positions I know which cells are visible. If necessary, I add cells to the VirtualFlow. I then update the content and css pseudo class states (selected, focused, ...).
This works almost fine ... currently, my only problem is that the css styles are sometimes lagging: newly created cells are shown with e.g. wrong backgrounds for a moment and then get correcteted with the next pulse.
My explanation for this is that JavaFX performs layout in two passes:
first a css pass and secondly the layout pass that calls layoutChildren().
The css of newly added children (during layoutChildren) is therefore not processes correctly.
I tried to call applyCss() directly, which helps, but seems to do too much because it takes a lot of time.
My question is:
How is the correct way to add nodes during layout, i.e. if the size of the component makes it neccessary to use further nodes?
If it is not during layoutChildren(), where else should I do it?
Swing had LayoutManager's separate from the containers. So far as I can tell, JavaFX doesn't do that.
I have a complex structure of nodes that I want the user to be able to toggle between several different layout approaches. Something equivalent to the user specifying flow and all containers are converted to the equivalent of FlowPanes. Then they could choose vertical and everything is laid out vertically.
Is there a way to do this other than swapping out the nodes/recreating the whole structure?
I should note: the hierarchy changes at runtime and it is deeply nested.
I mention Swing because this is straightforward to do in Swing by maintaining a list of all containers in the entire hierarchy, and with a simple loop (or tree traversal without the list) setting a new LayoutManager on them. JavaFX doesn't seem to have this possibility because the layout behavior appears to be internal to the nodes.
Isn't something like this working ?
AnchorPane main=new AnchorPane();
AnchorPane sub1=new AnchorPane();
sub1.getChildren().add(btn);
main.getChildren().add(sub1);
When you want to switch the layout
AnchorPane sub2=new AnchorPane();
main.getChildren().remove(sub1);
main.getChildren().add(sub2);
Edit
I guess I missed how you are doing layouts. This is how I envisioned it.
Definitions to Various Components
MainLayout
-> CustomLayout 1
-> References to various components. ( Essentially you are not creating all the components for every layout, rather you are referring to them in each layout )
-> CustomLayout 2
-> References to various components. ( More or less a different arrangement of the same components, adds some component references and removes some )
-> CustomLayout 3
-> References to various components.
Making a bold statement, but if there were a tool in JavaFX, how would it do this automatically ? Each template needs to know where it should render a particular component and arguably the easiest way to do this is just create a new template that arranges the components in a different layout and swap the template when user wants to see a different layout.
This is not easy to do in Swing. You would still need to set all the layout constraints on the individual components again, unless your layout is very straightforward.
I don't see how there is much difference in this between swing and javaFX. In JavaFX you would need to add the same controls to a different container (VBox, HBox etc.) but you still don't need to recreate the controls every time. It is a little awkward to find the containers in the middle of the node hierarchy but I'm sure there is some kind of elegant recursive solution :)
I have an app that has a screen like this (on a 10" tablet) :
Now I need to amend the app to also work on a phone. As the screens will be smaller, I want to take the "split view" UI and change it so that the left hand side list view is shown on its own, then on selecting a row the appropriate right hand side list view is then shown.
How do I handle this in the app, as one activity currently handles both listviews, and I guess the phone will need two one for each listview.
How do I detect which one to do?
thanks
See Supporting Different Screen Sizes.
Typically this is done using Fragments, but the basic idea is the same whether you use fragments or not. You create two different layouts for your Activity depending on the screen size.
Save the default layout single-pane for phones at res/layout/activity_main.xml
Save the dual-pane tablet layout at res/layout/activity_main_twopane.xml
Then you use layout alias files with the screen size qualifiers described in the link to determine when the tablet layout should be used. For example to show the dual-pane layout on large screens and on screens with at least 600dp in the widest direction (includes large screen phones such as the Galaxy S3), you could do this:
res/values-large/layout.xml contains:
<resources>
<item name="activity_main" type="layout">#layout/activity_main_twopane</item>
<bool name="twopane">true</bool>
</resources>
res/values-sw600dp/layout.xml contains:
<resources>
<item name="activity_main" type="layout">#layout/activity_main_twopane</item>
<bool name="twopane">true</bool>
</resources>
The Android system will take care of loading the proper layout file (either res/layout/activity_main.xml or res/layout/activity_main_twopane.xml) when your Activity loads the layout:
setContentView(R.layout.activity_main);
Just remember that the views that don't exist in the single-pane layout will be null when you try to access them (e.g., there won't be two ListViews anymore). Checking whether a certain View exists is one way to detect which layout you are using.
Also note the use of optional Boolean resources in XML files. This is a handy way to pass the "is it a large screen or small screen" variable to your Java code. You can access Boolean resources in your Activity like this:
boolean isTwoPane = getResources().getBoolean(R.bool.twopane);
You should have a look at the MasterDetailedFlow Navigation template. Eclipse:NewProject>check create Activity>select "MasterDetailedFlow" Navigatoin type. Have a look at Data Binding on Android
this is not a technical question, but one for advice regarding the best practices in designing an Android tablet UI.
I've got my concept of an Android Phone app pinned down.
The first activity (master view) launched contains a tab bar with three fragments from which the user can launch detail view activities of different sorts.
Both the master-view activity and the detail-view activities have actions in their action bars. Different detail views have different action items.
My question is: How should I organize and display the action items on a tablet, where an activity combines both views side by side?
The problem is the unified action bar for both the master-view fragment and whatever kind of detail fragment is shown. I do not think it is a good idea to start messing with the contents of the action bar whenever a different kind of detail view is opened.
The Android Design Guide does not tell you much on that front. There is a sample of a Contacts app in the "Multi-pane Layouts" section, but it does not actually deal with the problem. It evades it, by putting the single relevant action as an icon inside the detail view fragment.
Any advice with regards to best practices and references are appreciated.
I would suggest leaving your master details icons in the action bar, whilst putting your details view icons in another view/area within the details fragment.
My reasoning would be that icons in the action bar affect / are associated with the whole app / view on screen. Whilst your details icons only affect the details view and therefor should not be in the action menu when showing multiple fragments.
I guess you will have to see how the designs look..
I am not a fan of the action bar icons being changed from within the same activity (even if it contains multiple fragments), however when you load a new activity (like in your phone design) then I say yeah throw them in the action bar.
If I understand your question correctly, which I think is basically a question of how multiple Fragments (i.e. when on a multi-pane layout such as on a tablet) should contribute to the single ActionBar, it's quite straightforward and it is actually briefly discussed in the documentation here. Essentially, you can have the multiple Fragments all contributing their own menu items / action items to the single action bar, via some simple API calls.
I do have a custom layout with some controls written in an XML layout file.
a class is attached to this layout like
<com.project.layout ...>
<Checkbox...1
<TextView...2
<Button ...3
<ImageView..4 ...
../>
depending on the user interaction i would like to display only 3 of the defined controls like 1,2,3. With a click from the user i'd like to have 1,2,4
To do so, i developed some state classes that handle the removeView and addView.
I have some issues about this as:
1/ When can i be sure everything is created and i can interact with the UI (onLayout() & onMeasure() seem to happen everytime a control is processed)
2/ it seems that since i defined the layout with the 4 controls, even thought i write removeView, the space used by the removed control is not used by the other controls... is there a way i can ask the layout to reorder it display?
I found out , it turns out it was easy actually, there is a method i have to override called onFinishInflate().