UICollectionView custom layouts - layout

Hi I am beginning iOS development, and was playing around with UICollectionView. I was just wondering how you could achieve this type of layout. As shown below:
The idea is to have like a main news article in the big cell. Just confused how I am suppose to get two cells in the 2nd column. Much appreciated!

Create custom class which will act as layout for your collection view. This class will child class for UICollectionViewFlowLayout.
Then you can override below two methods and can create your own custom layout as you want.
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path
UICollectionViewLayoutAttributes is class which will deal with cell position, frame, Zindex etc
You can also use below properties.
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
collectionView:layout:minimumLineSpacingForSectionAtIndex:

Related

How can I properly load a different Activity layouts based on screen size with Mvx?

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.

reuse and extend PresenterWidget GWTP?

i am new to GWT and GWTP and the question sounds stupid.. Can I make an abstract PresenterWidget or similiar?
Like in normal Java extending the "class" and reuse / extend the logic. But not only the class, the whole thing of View and Presenter. I try to explain my initial situation and maybe you have another idea.
The image hopefully helps to explain it. The "Main-Tab" and every other tab consists of a collection of views which have the same base structure and the same logic.
the base structure consists of
border around EVERYTHING
an image (the wwitch)
a title
a textarea
a PresenterWidget which is added to a contentSlot of the parent (the menu left)
and below the base are view specific components like buttons, text or any other widget. So a main part of the view with logic is repeading. If the switch is "toggled" the view is hidden (the textarea and any childs / view specific components) like the lowest view in the picture. Furthermore the PresenterWidget left changes the color.
The logic is working, but now I am searching a proper way to solve this without repeading code and the possibility to add child elements which are hidden as well by toggling the switch. Can I add to a PresenterWidget child widgets and define where there should be added? like: Even if this is possible, it feels a bit inconvenient.
Thanks in advance.
I just want to post the solution:
I have now a simple Composite (KPICommonView) for the switch, title and the description. It got another FlowPanel below the description, where the specific components will be added later. For this the Composite implements "HasWidgets" and overrides the "add(Widget w)"-method which is called by UiBinder if the Widget is added and has child elements.
<own:KPICommonView title="First Header" description="I am a happy description :)" anchorToken="{nameAnchors.getFirst}">
<g:Label>child component</g:Label>
</own:KPICommonView>
I am not sure if I do a PresenterWidget for every segment and every PresenterWidget has one of the KPICommonView added, or if I do one normal Presenter which adds more than one of the CommonViews.
The CommonView furhter creates the PresenterWidget for the menu item on the side. It gets the attributes from the constructor (anchorToken, title) and adds it to the slot (which happens ugly, because the View has hard coded the parent saved to call "addInSlot()". The repeading code for the switch is handled by the KPICommonView.

Android tabs inside activity

I have a really nice design that I want to implement.
This design has tabs inside the activity, lets say in a LinearLayout under an image.
I could only find tabs on tabactivity or that contain whole activity.
Is this doable or should I change my design ?
Yes, for this you can create a class which can extends ActivityGroup.
Here is the beautiful link for TabActivity with the example.
http://ericharlow.blogspot.in/2010/09/experience-multiple-android-activities.html

drawing grids in a UITableViewCell using Monotouch

Hi I am just a week old with Monotouch, the task that I have in hand is to display a table on an ipad with multiple rows and multiple columns i.e. a grid like structure with many cells and each cell containing some data which can later be edited too.
My application should look somewhat like the figure below, except that it has to be working on an ipad.
The only useful link I've found is this, but this article discusses how to do so using Objective C(now since I am using Monotouch & c# so I am not comfortable with Objective C so I cannot understand this solution).
So my question how to achieve the same (i.e. a table with many columns and rows - a grid) using Monotouch.
Please help! Thanks in Advance.
Ajit,
If you want to use the UITableView'to render your data, you should effectively make it so that each "row" can render the columns in the way that you need.
What you need to do is to create a UIView subclass that can render the elements in your columns. There are various ways of doing that, you can:
Create your own UIView that implements a draw method and draws on demand.
Create a UIView that is a composite and merely has some children views
Once you have the view, you can add this to your UITableViewCell
You can follow some of my recommendations for creating those UITableViewCells here:
http://tirania.org/monomac/archive/2011/Jan-18.html
But 2-D browsing using a 1-D design is not optimal. Chances are that all that you want is to render your various items in a grid, so you might as well just use the UIScrollView directly and add all of your child UIViews there.
The only difference is that UITableView is designed to recycle/reuse some expensive objects (each row) while a basic design that stashes everything on the view will not have any of those benefits.
A more advanced option would be for you to create/destroys the views that are shown/hidden as the user scrolls.

Create Custom view in Android

I need to create a Custom view in android which will have dynamic text like price, address etc. and also an ImageView inside it as shown in the image below. I tried to find google some tutorial for custom view but didn't find something satisfactory to do all these things. I also need to use onClick event on this view. Please guys, some code would be of great help. I'm a novice to android. I read google tutorial to create custom view but couldn't implement this.
https://lh4.ggpht.com/HmwmRTx3g9ddkHbgvZXpZOB3Am-O9OQARQ2qpxJ16zTDZbG57CmvgxUC75sGFzC3cqrH
Thanks for attention.
This is called Custom Overlay for MapView.
You can check example and implement as per your requirement - Android MapView Balloons
You can use FrameLayouts. It is very simple to use. FrameLayout can add several views on top of each other. It creates a stack of the views. Just add whatever views you want to inside FrameLayout and use the property setVisibility() to control when to show which view.

Resources