Overview:
Panels are a great way for your app to achieve this. They allow you to combine multiple views into one compound view when a lot of horizontal screen real estate is available and by splitting them up when less space is available.
Panels are used to combine multiple views in to a one view and screen. Generally on smaller devices your content is typically divided into a master grid or list view and a detail view. Touching an item in the master view opens a different screen showing that item's detail information. So, today i am here to guide you and show you the Multi Panel layout design and implementation. There are lots of examples to implement MultiPanel Layout in android .
Because tablets have more screen real estate than phones, you can use panels to combine the related list and detail views into a single compound view. This uses the additional space more efficiently and makes navigating the app easier. Panel full fills this requirement.
I found single-multipanel blog and also some of examples and statckoverflow questions of multi-pane layouts with limited numbers of different sized panes (generally 2 or 3) and multiple layout with any number of equal sized panels.
However, we needed more flexibility. Not only did we want to add and remove panes dynamically but panes needed to be different sizes. We wanted each pane to contain a Fragment which would be retained properly on orientation changes and we wanted the user to be able to swipe between panes like a ViewPager.
PanesLayout is an Android layout we’ve built that allows you to dynamically add and remove any number of panes of varying sizes!
A PanesLayout can hold any number of panes. Each pane is made up of a PaneScrollView (which allows the pane contents to slide left & right), a PaneView (which provides padding on the left of the content), and some content (i.e. fragment).
It works by placing each pane inside a ScrollView. This dramatically decreases the complexity of moving multiple panes of varying sizes around the screen. It also let us very easily implement horizontal swiping for navigation.
Each pane within the layout has a container with a unique id, allowing Fragments to be added to these layouts and (most importantly) properly restarted and retained during orientation changes!
We tried to keep it simple, but there’s still a decent amount of glue code required to repopulate the PanesLayout when an Activity is restarted and to make adding Fragments simpler.
ExampleActivity demonstrates all the necessary configuration for using PanesActivity.
ExampleFragment uses a layout with two TextViews and a Button. The TextViews hold the index of the fragment and the length of time it’s been alive. This is used to demonstrate that fragments are correctly retained on activity restarts. The Button has a callback which creates a new fragment and adds it to the parent activity.
Note: PanesActivity requires you to use fragments. If you don’t use fragments, you can still use PanesLayout manually.
Panels are a great way for your app to achieve this. They allow you to combine multiple views into one compound view when a lot of horizontal screen real estate is available and by splitting them up when less space is available.
Panels are used to combine multiple views in to a one view and screen. Generally on smaller devices your content is typically divided into a master grid or list view and a detail view. Touching an item in the master view opens a different screen showing that item's detail information. So, today i am here to guide you and show you the Multi Panel layout design and implementation. There are lots of examples to implement MultiPanel Layout in android .
Because tablets have more screen real estate than phones, you can use panels to combine the related list and detail views into a single compound view. This uses the additional space more efficiently and makes navigating the app easier. Panel full fills this requirement.
I found single-multipanel blog and also some of examples and statckoverflow questions of multi-pane layouts with limited numbers of different sized panes (generally 2 or 3) and multiple layout with any number of equal sized panels.
However, we needed more flexibility. Not only did we want to add and remove panes dynamically but panes needed to be different sizes. We wanted each pane to contain a Fragment which would be retained properly on orientation changes and we wanted the user to be able to swipe between panes like a ViewPager.
Solution
How It Works
The hierarchy of a PanesLayout looks like this:
|--------------------------------|
| PanesLayout |
| |----------------------------| |
| | PaneScrollView | |
| | |------------------------| | |
| | | PaneView |-----------| | | |
| | | | (content) | | | |
| | | |-----------| | | |
| | |------------------------| | |
| |----------------------------| |
|--------------------------------|Each pane within the layout has a container with a unique id, allowing Fragments to be added to these layouts and (most importantly) properly restarted and retained during orientation changes!
We tried to keep it simple, but there’s still a decent amount of glue code required to repopulate the PanesLayout when an Activity is restarted and to make adding Fragments simpler.
After surfing so many examples and articles i found one amazing Panel library. Click Here!
ExampleActivity demonstrates all the necessary configuration for using PanesActivity.
ExampleFragment uses a layout with two TextViews and a Button. The TextViews hold the index of the fragment and the length of time it’s been alive. This is used to demonstrate that fragments are correctly retained on activity restarts. The Button has a callback which creates a new fragment and adds it to the parent activity.
How to use Panes Library ?
Make sure you have the most up-to-date support library and ActionBarSherlock libraries.
Have your activity extend PanesActivity. Then, add fragments to the activity using the following functions:
- setMenuFragment(fragment): set the menu
- addFragment(prevFragment, newFragment): adds newFragment after the prevFragment (clobbering any fragments that used to be after prevFragment)
- clearFragments(): removes all the fragments except the menu fragment
- getMenuFragment(): get the menu fragment
- getTopFragment(): get the fragment on the top of the stack
You also need to provide a PaneSizer. This object allows you to programatically set the width of each pane based on the type of Fragment/View you want to place inside the pane.You should also implement updateFragment(…). This is run whenever a fragment is added (even on activity restarts).
Check out the implmented Demo
Thanks.
Enjoy.
No comments:
Post a Comment