UISplitViewController(?) with master/detail

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

UISplitViewController(?) with master/detail

Brian Matsik

We’re starting our first iPad app and I’m trying to wrap my head around all of the new UI elements moving from web applications to iOS.  I am trying to implement a table result to detail view similar to what is seen in the Resco CRM application (http://www.resco.net/mobilecrm/app.aspx) where the left column is the menu and the right is the detail view which could either be a full width table or a narrow table with a detail view. 

 

Example 1 (full table): https://www.dropbox.com/s/cxwqpudhxchm4m1/2013-04-05%2012.00.11.png

Example 2 (resized table/detail): https://www.dropbox.com/s/593kce49osnb4xd/2013-04-05%2012.00.24.png

 

What I want to do is have the table display the full width of the iPad window and then slide to a smaller table to display the detail view.  This is obviously doable but trying to find a sample of this is eluding me mostly because I am missing some key search terms to locate a similar example on github or one of the many monotouch blogs.

 

If anyone could point me in the general direction of what I am looking for I would greatly appreciate it.


_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|

Re: UISplitViewController(?) with master/detail

Nic Wise
What I suspect Resco are doing is this:

Main View or window (just a normal UIView / UIViewController)
  A UITableView(Controller) (or use MonoTouch.Dialog, but be careful
of the autoresizing) which has a specific width/height. This is your
left side menu
  A UISplitview(Controller) which contains
    a UITableViewContoller (the middle bit)
    whatever the detail view is (UITabController with
UINavigationControllers I suspect)

Thats how I'd do it, I think. If you use a splitview, you are stuck
with the default splitview size I think (otherwise, look at
MGSplitViewController), but you also get a portrate mode view for
free. I ended up writing my own (minimal code) for a recent project,
and I put a UICollectionViewController in each side.
(https://gist.github.com/nicwise/5325253)

In a demo for Evolve, I'm doing something _similar_ on the iPhone
using James Clancey's FlyoutNavigationView (on github and the Xamarin
component store). The view that's under the flyout (the black bit) is
just a UITableView (via Monotouch.Dialog) and the main bit is a
UINavigationController with a MonoTouch.Dialog view, but it could be
any view.

Because almost any view can contain other views, you are not limited
to the ordering. (except possibly tab bars, which like being at the
bottom of the tree, in most cases)

https://www.dropbox.com/s/4qrsxhlqry5o09u/mtd-flyout.png

However, you said you wanted a fullscreen detail with a slide in
master? There are a few ways you could do that

Main View
  Detail view (full screen)

No surprise there

Then, to show the master, you could use a UIPopoverViewController to
show it off a button or other event, or you could just make the master
view, set it frame so it's offscreen (relative to the Main View/Window
above), bring it to the front, then animate it sliding in

UIView.Animate(0.5f, delegate {
                MasterView.Frame = FINAL_FRAME_LOCATION;
            });


Main View
  Detail view (full screen)
  MasterView (200x768, but with a X position of -200 taking it out of sight)

So if your MasterView started at a frame of:

new RectangleF(-200,0,200,768);

(so it's just off screen)

and your final frame location would be

new RectangleF(0,0,200,768)

so it's in the top left corner.

You could trigger this off a UISwipeGesture (attached to the Main
View, or the detail, but the Main might be better), or a button, or
whatever you wanted.

Does that make sense?

On 5 April 2013 17:19, Brian Matsik <[hidden email]> wrote:

> We’re starting our first iPad app and I’m trying to wrap my head around all
> of the new UI elements moving from web applications to iOS.  I am trying to
> implement a table result to detail view similar to what is seen in the Resco
> CRM application (http://www.resco.net/mobilecrm/app.aspx) where the left
> column is the menu and the right is the detail view which could either be a
> full width table or a narrow table with a detail view.
>
>
>
> Example 1 (full table):
> https://www.dropbox.com/s/cxwqpudhxchm4m1/2013-04-05%2012.00.11.png
>
> Example 2 (resized table/detail):
> https://www.dropbox.com/s/593kce49osnb4xd/2013-04-05%2012.00.24.png
>
>
>
> What I want to do is have the table display the full width of the iPad
> window and then slide to a smaller table to display the detail view.  This
> is obviously doable but trying to find a sample of this is eluding me mostly
> because I am missing some key search terms to locate a similar example on
> github or one of the many monotouch blogs.
>
>
>
> If anyone could point me in the general direction of what I am looking for I
> would greatly appreciate it.
>
>
> _______________________________________________
> MonoTouch mailing list
> [hidden email]
> http://lists.ximian.com/mailman/listinfo/monotouch
>



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken
b. http://www.fastchicken.co.nz/
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|

Re: UISplitViewController(?) with master/detail

Nic Wise
BTW, personally, I dont like how resco have done it (tho it's most
likely a good demo). The LHS is WAY too big.

I'd do it more like this:

http://www.rememberthemilk.com/services/ipad/

Minimal menu (which can be covered)
small/medium master (based on what you need to show), which MIGHT be
hidden my the detail
HUGE detail

Depends how much switching between major areas (menu) your users are
going to be doing. If it's not much, then get rid of the menu. If it's
a lot... maybe rethink your app structure :)



On 6 April 2013 08:24, Nic Wise <[hidden email]> wrote:

> What I suspect Resco are doing is this:
>
> Main View or window (just a normal UIView / UIViewController)
>   A UITableView(Controller) (or use MonoTouch.Dialog, but be careful
> of the autoresizing) which has a specific width/height. This is your
> left side menu
>   A UISplitview(Controller) which contains
>     a UITableViewContoller (the middle bit)
>     whatever the detail view is (UITabController with
> UINavigationControllers I suspect)
>
> Thats how I'd do it, I think. If you use a splitview, you are stuck
> with the default splitview size I think (otherwise, look at
> MGSplitViewController), but you also get a portrate mode view for
> free. I ended up writing my own (minimal code) for a recent project,
> and I put a UICollectionViewController in each side.
> (https://gist.github.com/nicwise/5325253)
>
> In a demo for Evolve, I'm doing something _similar_ on the iPhone
> using James Clancey's FlyoutNavigationView (on github and the Xamarin
> component store). The view that's under the flyout (the black bit) is
> just a UITableView (via Monotouch.Dialog) and the main bit is a
> UINavigationController with a MonoTouch.Dialog view, but it could be
> any view.
>
> Because almost any view can contain other views, you are not limited
> to the ordering. (except possibly tab bars, which like being at the
> bottom of the tree, in most cases)
>
> https://www.dropbox.com/s/4qrsxhlqry5o09u/mtd-flyout.png
>
> However, you said you wanted a fullscreen detail with a slide in
> master? There are a few ways you could do that
>
> Main View
>   Detail view (full screen)
>
> No surprise there
>
> Then, to show the master, you could use a UIPopoverViewController to
> show it off a button or other event, or you could just make the master
> view, set it frame so it's offscreen (relative to the Main View/Window
> above), bring it to the front, then animate it sliding in
>
> UIView.Animate(0.5f, delegate {
>                 MasterView.Frame = FINAL_FRAME_LOCATION;
>             });
>
>
> Main View
>   Detail view (full screen)
>   MasterView (200x768, but with a X position of -200 taking it out of sight)
>
> So if your MasterView started at a frame of:
>
> new RectangleF(-200,0,200,768);
>
> (so it's just off screen)
>
> and your final frame location would be
>
> new RectangleF(0,0,200,768)
>
> so it's in the top left corner.
>
> You could trigger this off a UISwipeGesture (attached to the Main
> View, or the detail, but the Main might be better), or a button, or
> whatever you wanted.
>
> Does that make sense?
>
> On 5 April 2013 17:19, Brian Matsik <[hidden email]> wrote:
>> We’re starting our first iPad app and I’m trying to wrap my head around all
>> of the new UI elements moving from web applications to iOS.  I am trying to
>> implement a table result to detail view similar to what is seen in the Resco
>> CRM application (http://www.resco.net/mobilecrm/app.aspx) where the left
>> column is the menu and the right is the detail view which could either be a
>> full width table or a narrow table with a detail view.
>>
>>
>>
>> Example 1 (full table):
>> https://www.dropbox.com/s/cxwqpudhxchm4m1/2013-04-05%2012.00.11.png
>>
>> Example 2 (resized table/detail):
>> https://www.dropbox.com/s/593kce49osnb4xd/2013-04-05%2012.00.24.png
>>
>>
>>
>> What I want to do is have the table display the full width of the iPad
>> window and then slide to a smaller table to display the detail view.  This
>> is obviously doable but trying to find a sample of this is eluding me mostly
>> because I am missing some key search terms to locate a similar example on
>> github or one of the many monotouch blogs.
>>
>>
>>
>> If anyone could point me in the general direction of what I am looking for I
>> would greatly appreciate it.
>>
>>
>> _______________________________________________
>> MonoTouch mailing list
>> [hidden email]
>> http://lists.ximian.com/mailman/listinfo/monotouch
>>
>
>
>
> --
> Nic Wise
> t.  +44 7788 592 806 | @fastchicken
> b. http://www.fastchicken.co.nz/



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken
b. http://www.fastchicken.co.nz/
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|

Re: UISplitViewController(?) with master/detail

Brian Matsik
Thanks for the different suggestions everyone.  I think the CLCascade example on GitHub might be a better alternative to this.  I just need to get some code converted over to use it with MonoTouch since the project is an XCode project.  It's a good looking view based on Twitter's UI and uses less space for the list per Nic's suggestion below.

-----Original Message-----
From: Nic Wise [mailto:[hidden email]]
Sent: Saturday, April 06, 2013 3:27 AM
To: Brian Matsik
Cc: [hidden email]
Subject: Re: [MonoTouch] UISplitViewController(?) with master/detail

BTW, personally, I dont like how resco have done it (tho it's most likely a good demo). The LHS is WAY too big.

I'd do it more like this:

http://www.rememberthemilk.com/services/ipad/

Minimal menu (which can be covered)
small/medium master (based on what you need to show), which MIGHT be hidden my the detail HUGE detail

Depends how much switching between major areas (menu) your users are going to be doing. If it's not much, then get rid of the menu. If it's a lot... maybe rethink your app structure :)



On 6 April 2013 08:24, Nic Wise <[hidden email]> wrote:

> What I suspect Resco are doing is this:
>
> Main View or window (just a normal UIView / UIViewController)
>   A UITableView(Controller) (or use MonoTouch.Dialog, but be careful
> of the autoresizing) which has a specific width/height. This is your
> left side menu
>   A UISplitview(Controller) which contains
>     a UITableViewContoller (the middle bit)
>     whatever the detail view is (UITabController with
> UINavigationControllers I suspect)
>
> Thats how I'd do it, I think. If you use a splitview, you are stuck
> with the default splitview size I think (otherwise, look at
> MGSplitViewController), but you also get a portrate mode view for
> free. I ended up writing my own (minimal code) for a recent project,
> and I put a UICollectionViewController in each side.
> (https://gist.github.com/nicwise/5325253)
>
> In a demo for Evolve, I'm doing something _similar_ on the iPhone
> using James Clancey's FlyoutNavigationView (on github and the Xamarin
> component store). The view that's under the flyout (the black bit) is
> just a UITableView (via Monotouch.Dialog) and the main bit is a
> UINavigationController with a MonoTouch.Dialog view, but it could be
> any view.
>
> Because almost any view can contain other views, you are not limited
> to the ordering. (except possibly tab bars, which like being at the
> bottom of the tree, in most cases)
>
> https://www.dropbox.com/s/4qrsxhlqry5o09u/mtd-flyout.png
>
> However, you said you wanted a fullscreen detail with a slide in
> master? There are a few ways you could do that
>
> Main View
>   Detail view (full screen)
>
> No surprise there
>
> Then, to show the master, you could use a UIPopoverViewController to
> show it off a button or other event, or you could just make the master
> view, set it frame so it's offscreen (relative to the Main View/Window
> above), bring it to the front, then animate it sliding in
>
> UIView.Animate(0.5f, delegate {
>                 MasterView.Frame = FINAL_FRAME_LOCATION;
>             });
>
>
> Main View
>   Detail view (full screen)
>   MasterView (200x768, but with a X position of -200 taking it out of
> sight)
>
> So if your MasterView started at a frame of:
>
> new RectangleF(-200,0,200,768);
>
> (so it's just off screen)
>
> and your final frame location would be
>
> new RectangleF(0,0,200,768)
>
> so it's in the top left corner.
>
> You could trigger this off a UISwipeGesture (attached to the Main
> View, or the detail, but the Main might be better), or a button, or
> whatever you wanted.
>
> Does that make sense?
>
> On 5 April 2013 17:19, Brian Matsik <[hidden email]> wrote:
>> We’re starting our first iPad app and I’m trying to wrap my head
>> around all of the new UI elements moving from web applications to
>> iOS.  I am trying to implement a table result to detail view similar
>> to what is seen in the Resco CRM application
>> (http://www.resco.net/mobilecrm/app.aspx) where the left column is
>> the menu and the right is the detail view which could either be a full width table or a narrow table with a detail view.
>>
>>
>>
>> Example 1 (full table):
>> https://www.dropbox.com/s/cxwqpudhxchm4m1/2013-04-05%2012.00.11.png
>>
>> Example 2 (resized table/detail):
>> https://www.dropbox.com/s/593kce49osnb4xd/2013-04-05%2012.00.24.png
>>
>>
>>
>> What I want to do is have the table display the full width of the
>> iPad window and then slide to a smaller table to display the detail
>> view.  This is obviously doable but trying to find a sample of this
>> is eluding me mostly because I am missing some key search terms to
>> locate a similar example on github or one of the many monotouch blogs.
>>
>>
>>
>> If anyone could point me in the general direction of what I am
>> looking for I would greatly appreciate it.
>>
>>
>> _______________________________________________
>> MonoTouch mailing list
>> [hidden email]
>> http://lists.ximian.com/mailman/listinfo/monotouch
>>
>
>
>
> --
> Nic Wise
> t.  +44 7788 592 806 | @fastchicken
> b. http://www.fastchicken.co.nz/



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken
b. http://www.fastchicken.co.nz/
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch
Reply | Threaded
Open this post in threaded view
|

Re: UISplitViewController(?) with master/detail

Nic Wise
Well, you can port it (good if it's not too much code and it's already
quite stable), or bind it (better if there is a LOT of code, or it's
being actively developed). Binding takes a bit to get the bindings
working, but once they are, you're set.



On 9 April 2013 14:52, Brian Matsik <[hidden email]> wrote:

> Thanks for the different suggestions everyone.  I think the CLCascade example on GitHub might be a better alternative to this.  I just need to get some code converted over to use it with MonoTouch since the project is an XCode project.  It's a good looking view based on Twitter's UI and uses less space for the list per Nic's suggestion below.
>
> -----Original Message-----
> From: Nic Wise [mailto:[hidden email]]
> Sent: Saturday, April 06, 2013 3:27 AM
> To: Brian Matsik
> Cc: [hidden email]
> Subject: Re: [MonoTouch] UISplitViewController(?) with master/detail
>
> BTW, personally, I dont like how resco have done it (tho it's most likely a good demo). The LHS is WAY too big.
>
> I'd do it more like this:
>
> http://www.rememberthemilk.com/services/ipad/
>
> Minimal menu (which can be covered)
> small/medium master (based on what you need to show), which MIGHT be hidden my the detail HUGE detail
>
> Depends how much switching between major areas (menu) your users are going to be doing. If it's not much, then get rid of the menu. If it's a lot... maybe rethink your app structure :)
>
>
>
> On 6 April 2013 08:24, Nic Wise <[hidden email]> wrote:
>> What I suspect Resco are doing is this:
>>
>> Main View or window (just a normal UIView / UIViewController)
>>   A UITableView(Controller) (or use MonoTouch.Dialog, but be careful
>> of the autoresizing) which has a specific width/height. This is your
>> left side menu
>>   A UISplitview(Controller) which contains
>>     a UITableViewContoller (the middle bit)
>>     whatever the detail view is (UITabController with
>> UINavigationControllers I suspect)
>>
>> Thats how I'd do it, I think. If you use a splitview, you are stuck
>> with the default splitview size I think (otherwise, look at
>> MGSplitViewController), but you also get a portrate mode view for
>> free. I ended up writing my own (minimal code) for a recent project,
>> and I put a UICollectionViewController in each side.
>> (https://gist.github.com/nicwise/5325253)
>>
>> In a demo for Evolve, I'm doing something _similar_ on the iPhone
>> using James Clancey's FlyoutNavigationView (on github and the Xamarin
>> component store). The view that's under the flyout (the black bit) is
>> just a UITableView (via Monotouch.Dialog) and the main bit is a
>> UINavigationController with a MonoTouch.Dialog view, but it could be
>> any view.
>>
>> Because almost any view can contain other views, you are not limited
>> to the ordering. (except possibly tab bars, which like being at the
>> bottom of the tree, in most cases)
>>
>> https://www.dropbox.com/s/4qrsxhlqry5o09u/mtd-flyout.png
>>
>> However, you said you wanted a fullscreen detail with a slide in
>> master? There are a few ways you could do that
>>
>> Main View
>>   Detail view (full screen)
>>
>> No surprise there
>>
>> Then, to show the master, you could use a UIPopoverViewController to
>> show it off a button or other event, or you could just make the master
>> view, set it frame so it's offscreen (relative to the Main View/Window
>> above), bring it to the front, then animate it sliding in
>>
>> UIView.Animate(0.5f, delegate {
>>                 MasterView.Frame = FINAL_FRAME_LOCATION;
>>             });
>>
>>
>> Main View
>>   Detail view (full screen)
>>   MasterView (200x768, but with a X position of -200 taking it out of
>> sight)
>>
>> So if your MasterView started at a frame of:
>>
>> new RectangleF(-200,0,200,768);
>>
>> (so it's just off screen)
>>
>> and your final frame location would be
>>
>> new RectangleF(0,0,200,768)
>>
>> so it's in the top left corner.
>>
>> You could trigger this off a UISwipeGesture (attached to the Main
>> View, or the detail, but the Main might be better), or a button, or
>> whatever you wanted.
>>
>> Does that make sense?
>>
>> On 5 April 2013 17:19, Brian Matsik <[hidden email]> wrote:
>>> We’re starting our first iPad app and I’m trying to wrap my head
>>> around all of the new UI elements moving from web applications to
>>> iOS.  I am trying to implement a table result to detail view similar
>>> to what is seen in the Resco CRM application
>>> (http://www.resco.net/mobilecrm/app.aspx) where the left column is
>>> the menu and the right is the detail view which could either be a full width table or a narrow table with a detail view.
>>>
>>>
>>>
>>> Example 1 (full table):
>>> https://www.dropbox.com/s/cxwqpudhxchm4m1/2013-04-05%2012.00.11.png
>>>
>>> Example 2 (resized table/detail):
>>> https://www.dropbox.com/s/593kce49osnb4xd/2013-04-05%2012.00.24.png
>>>
>>>
>>>
>>> What I want to do is have the table display the full width of the
>>> iPad window and then slide to a smaller table to display the detail
>>> view.  This is obviously doable but trying to find a sample of this
>>> is eluding me mostly because I am missing some key search terms to
>>> locate a similar example on github or one of the many monotouch blogs.
>>>
>>>
>>>
>>> If anyone could point me in the general direction of what I am
>>> looking for I would greatly appreciate it.
>>>
>>>
>>> _______________________________________________
>>> MonoTouch mailing list
>>> [hidden email]
>>> http://lists.ximian.com/mailman/listinfo/monotouch
>>>
>>
>>
>>
>> --
>> Nic Wise
>> t.  +44 7788 592 806 | @fastchicken
>> b. http://www.fastchicken.co.nz/
>
>
>
> --
> Nic Wise
> t.  +44 7788 592 806 | @fastchicken
> b. http://www.fastchicken.co.nz/



--
Nic Wise
t.  +44 7788 592 806 | @fastchicken
b. http://www.fastchicken.co.nz/
_______________________________________________
MonoTouch mailing list
[hidden email]
http://lists.ximian.com/mailman/listinfo/monotouch