UI Layout, fragments and different content - android-fragments

I'm studying fragments and "Multiple devices support". Depending on device type, orientation and dimension, it's possible to define multiple layout using fragments and re-using written code. During the develop of an app, I wrote down my desired UI for tablet devices, as described in the following screenshot:
The activity contains two fragments and displays TAB menu navigation. Every TAB menu navigation contains different menu entry (listview).
When clicking on a menu's item on fragment 1, I need to refresh the fragment number 2.
Fragment 2 is composed by a presentation and, below, a listview or another presentation.
Every menu's item could have different layout:
1-Presentation, image, another presentation
2-No presentation, listview
3-Presentation, listview
4-etc.
Studying examples (samples) provided with google-sdk, fragment 2 have always the same layout. How it's possible to tell fragment 2 to load different layout depending on menu's item clicked?
My answer is: I need a fragment class for every different layout. When the user click on an item of fragment 1, the fragment manager should replace and commit the correct fragment. Is this answer correct?
All fragment logic will be on my activity, replacing the correct fragment depending on item selected (position and category); simple ex:
#Override
public void onItemSelected(int category, int position) {
if (position==0){
final FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.content_frag, new FirstActionFragment(), "FirstMenuClicked");
ft.commit();
}
else {
final FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replace(R.id.content_frag, new SecondActionFragment(), "secondMenuClicked");
ft.commit();
}
}
Is my layout idea improvable? Should I change something on my design to correctly implement fragmentation?

Here is the solution of your problem
https://github.com/theomega/ActivatedStateDemo

Related

SwiftUI Buttons and their tappable areas shifted away and doesn't cover anymore

I have the problems with views and especially buttons as they can be tapped (but it applies to all views) that they tappable (focus area) shifted a bit from rendered views.
Layout stays ok but if you want to tap at the button its tappable area is shifted downward and to the right. So instead of clicking at the button you click a bit downa and right to it. Otherwise there is no action executed.
The best it can be seen on this view from Debug view hierarchy. It happend after returning from modal presentation. But I cannot see any clue in code way that can happen. We on which it happens seems to be no different from other views that work absolutly right.
I can see that wrapping VStack inside ScrollView breaks this view, but it doesn't happan on other similar views.
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
Group {
contentView
contentView
contentView
contentView
contentView
contentView
contentView
contentView
}
contentView
contentView
contentView
contentView
}
.padding(.horizontal)
}
.navigationViewStyle(.stack)
}
Ok I found it. The problem was that content of this view depends on #Published property like shoulDisplayView1Or2. And depending whether it was true or false it displayed view1 or view2.
Moreover this property was set in the same time when presented modal view (sheet) was dismissing. Like after some action do to things 1. dismiss modal and set new value of shouldDisplayView1Or2. And this sheet dismissal and adjuting view1 or view2 based on shouldDisplayView1Or2 flag caused that this buttons rendered areas and their tappable areas become shifted away.
What fixed this issue was addition of DispatchQueue.main in Combine subscription or DispatchQueue.main.async { } in regular code in place where this flag shouldDisplayView1Or2 was setting. This way I suppose dismissing comes first and adjusting view1 or views with its rendering second, and overall layout wast rendered correctly with tappable areas on its place.

CoordinatorLayout with different Toolbar behaviour

I'm having difficulty in implementing CoordinatorLayout as how to implement the Toolbar if some of my Fragments have a different Toolbar behaviour. Say, that I have 5 fragments that would be shown in just one Activity (one fragment at a time). 2 of them would have a auto-hide Toolbar when scrolled, 1 with a simple Toolbar that's always showing even when scrolled, and 2 having Toolbar with ImageView inside AppBarLayout for parallax effect.
This link only cover the auto-hide part, but not the parallax with image.
Some solutions that I could think of :
Have one AppBarLayout with Toolbar and ImageView in Activity. So if it displays a fragment that doesn't need the parallax effect, just set the ImageView's visibility to GONE. But is it okay to do this? Because I got the feeling that it's not an appropiate solution.
Define CoordinatorLayout and Toolbar in each fragments' layout. But then I have to call setSupportActionBar everytime I'm displaying my fragment, when some of them actually have the same Toolbar.
Which is the best approach? Or maybe there is a better one than those two?
UPDATE
So, I ended up with number 2. I just add toolbars to each fragments' xml just like usual, nothing special. And in my BaseActivity I create a method to set the toolbar as action bar with some default configuration, so I won't have to duplicate the syntax to each of my fragments. Here's the method:
public void setToolbar(Toolbar toolbar, String title){
if(toolbar != null) {
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(title != null);
if (title != null) setActionBarTitle(title);
}
}

UITabBarController in UISplitViewController with Storyboard

I have UISplitViewController with UITabBarController as its master. UITabBarController contains one UINavigationController with UITableViewController as its root (it is main menu of my app).
After tapping on any cell in main menu, in UISplitViewController's detail part another UITableViewController should be presented (let's call it detail view).
In landscape mode everything works OK.
But in portrait, whet I tap on cell in main menu, the detail view is presented modally, and not pushed, like it supposed to. Also, when rotating from landscape to portrait, the main menu is presented instead of detail view, and after I click on main menu's position to show detail view, it is presented modally with no possibility to rotate or to go back.
Removing UITabBarController and setting UINavigationController as UISplitViewController's master works as I want (in landscape mode we have menu|detail views side by side and in portrait mode controllers behave like they were on regular UINavigationController). But then the UITabBarController is gone.
What I've tried:
every possible segue type - none of them works the way I want
subclassing UIStoryboardSegue to implement custom behavior depending on UISplitViewController's viewControllers param (in portrait mode it has only one view controller - master) - but I couldn't recognise classes (thank you Swift!)
What I want is to do it entirely in Storyboard (OK, custom segues doesn't count) - I want an elegant solution and I refuse to believe it's impossible.
Working on iOS 8 SDK, Xcode 6.2, iPhone 6 Plus
Unfortunately there is no absolutely elegant solution to this one (as far as I've managed to accomplish). Hoping that Apple will eventually sort it out, but in the meantime, this is the nicest way possible:
Place one custom segue instead of Show Detail
In perform method of your custom segue have something like:
- (void)perform
{
MasterViewController *source = self.sourceViewController;
AppDelegate *appDelegate = [UIApplication sharedApplication].delegate;
UISplitViewController *splitViewController = appDelegate.splitViewController;
if ([splitViewController.viewControllers count] > 1) {
[source performSegueWithIdentifier:#"showDetail" sender:source];
if (appDelegate.masterPopoverController) {
[appDelegate.masterPopoverController dismissPopoverAnimated:YES];
}
} else {
[source performSegueWithIdentifier:#"showDetailSmallDevice" sender:source];
}
}
[splitViewController.viewControllers count] is here just to separate large devices (iPads & iPhone 6 Plus) and the other, smaller ones
In your Storyboard, wire up one segue named showDetail which is actually a showDetail, to the detail navigation controller, and directly to the contents view controller another showDetailSmallDevice which is actually Show
(Push)
See the example:
http://i.stack.imgur.com/GQpg3.png
EDIT: SplitViewController needs two Navigation Controllers. The solution is that you need to insert another Navigation Controller between the SplitViewController and the DatailViewController. Then, from the TableView, preform a Segue directly to the second Navigation Controller. The SplitViewControllers wants two Navigation Controllers...
Maybe a good way could be to start a new SplitViewController project on IB. There are various default methods and properties to manage a SplitViewController. You can find something in appDelegate class, it could be a good starting point.
OLD: I like Mateusz's answer, just a point that is possible to use self.splitViewController.isCollapsed for testing if DetailViewController is or it could be shown on screen. With this property there is no need to count viewControllers.
#property(nonatomic, readonly, getter=isCollapsed) BOOL collapsed
From documentation: A Boolean value indicating whether only one of the child view controllers is displayed. This property is set to YES when the split view controller content is semantically collapsed into a single container. Collapsing happens when the split view controller transitions from a horizontally regular to a horizontally compact environment. After it has been collapsed, the split view controller reports having only one child view controller in its viewControllers property.

replace fragments inside fragment displayed by the viewpager

Please see the wireframe image http://i.imgur.com/dPAMA.png first.
I am using a ViewPager to display fragments inside a FragmentActivity. ViewPager gets fragments from the attached FragmentPagerAdapter
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mAdapter = new HomePagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mAdapter);
Suppose viewpager has 3 fragments to display say Fragment1, Fragment2, Fragment3.
In the above image 'displaying fragment1' is the title for the first fragment, "Fragment1". This fragment is a list fragment and displays a list. Fragment2 and Fragment3 have their own content to display. when the user swipes on the screen, ViewPager will display the next fragment, "Fragment2".
What i want is that, when an item from the list(displayed by Fragment1) is clicked, Fragment1 should be completely replaced with some other Fragment, say Fragment4 (this is different fragment and is not returned by the attached adapter). when Fragment4 is displayed, the actionbar should change its content. whenever user works on Fragment4 and onBackPress or an action from the ActionBar, Fragment1 with the list should be displayed again. Meanwhile ViewPager should behave the same i.e on swipe, and the next fragment(in our case Fragment2) will be displayed.
basically, i want to get the same behavior as in example at :
http://developer.android.com/training/basics/fragments/fragment-ui.html#Replace
In this example the ListFragment is displayed directly inside a FragmentActivity. I am displaying the ListFragment with a ViewPager. I want the same functionality from the above example but inside fragments displayed with ViewPager. This was very difficult to achieve before the release of Android 4.2. this version of android supports nested fragments using getChildFragmentManager() so, i see some hope.
I am trying this on my side for many days and also scanned entire stackoverflow for Q & A related to nested fragments but didn't get what i want.
So, is this possible to achieve? if yes, then how to?
This was a big problem before Android 4.2 but it seems to easier now with nested fragments, apart from ensuring the back button works. I posted my solution to your question over here: https://stackoverflow.com/a/13925130/467509
My solution answers everything you asked apart from changing the ActionBar.

Substitution of detail view controller does not cause viewWillAppear to be called

I'm porting my iPhone app to iPad. On iPhone I select row in the table, and after that the next view controller is pushed to the top of navigationController (now navigation is performed on the left part of split view controller). For iPad i modified the code this way:
if (deviceIsIPad())
{
UISplitViewController *svc = (UISplitViewController *)[self findNearestParentOfClass:[UISplitViewController class]];
svc.viewControllers = [NSArray arrayWithObjects:[svc.viewControllers objectAtIndex:0],
nextViewController,
nil];
}
else
[self.navigationController pushViewController:nextViewController animated:YES];
There are no problem at iPhone code (when controller is pushed to navigation controller), but on iPad viewWillAppear: is not called (viewDidLoad is called however), while I have a reason to perform some customization right in viewWillAppear:. Why is it not called, and what should I do to force it to be called?
Much thanks in advance!
Not exactly sure what you're trying to do here but simply initializing a splitview controller and adding controllers to it does not force views to appear. You have to add the splitview controller's views to the window.
Here is the code from the Xcode Splitview template's app delegate's applicationDidFinishLaunching:
splitViewController = [[UISplitViewController alloc] init];
splitViewController.viewControllers = [NSArray arrayWithObjects:navigationController, detailViewController, nil];
splitViewController.delegate = detailViewController;
NSLog(#"master=%#",splitViewController.viewControllers);
// Add the split view controller's view to the window and display.
[window addSubview:splitViewController.view];
[window makeKeyAndVisible];
The views in the navigation controller appear because it is already attached to the window and displaying the view of one of its controlled controllers.
Edit:
From Comments:
All initialization code you are quoted
here is already performed. Now, let's
assume one have a table on the left
controller, then he select another row
there, and want to replace right
controller with another one.
splitViewController.view is added on
the window фдкуфвн, because some GUI
elements initialized in viewDidLoad,
are properly presented on view
It sounds like your problem arises because the detail (right-side) view of a splitview controller is always visible i.e. it only appears i.e calls viewWillAppear, once immediately after first being loaded. There is no point at which the detail side has no view present. I'm not sure what entirely swapping out viewControllers of the splitview will do.
If you want to change the detail view on the fly. You need to put a navigation controller in the right side and then push and pop view-controllers in that nav in response to events in the right side controller.
Look at how the iPad iPod app works. You have a leftside view of playlist and on the right side, a list of all the songs in the playlist. Selecting a song pushes a song detail view on top the list of songs.

Resources