loading... Loading...

Using Custom Layouts

1149

Custom Layouts allow developers to easily create customized Layouts which have not been provided by designers. As part of our ongoing tutorials on using Cracker9, today we will cover generating code using Custom Layouts.

 

 

Lets first look at when we would need to use Custom Layouts.
Custom_01

An example would be lists. Designs containing lists often require areas which wrap around individual list items, which are sometimes omitted by designers. Developers would then need to either request for this from the designers, or create the areas themselves. There are other instances where areas are omitted, requiring developers extra effort in back-and-forth communication with designers. Cracker9 allows developers to easily add additional areas without additional designer input, with Custom Layouts.

So, lets give it a go! There are 2 ways to create areas using Custom Layouts: create using the size of the selected Views; and create without selecting any Views.

 

 

1. Custom Layout using the size of the selected Views

 

STEP 01 >

Drag the View from the View Panel to the Design Panel.
Custom_01

 

 

STEP 02 >

Select the Views to be wrapped by the Custom Layout.
Custom_02

 

 

STEP 03 >

Select the Custom Layout buttom from the Toolbar.
Custom_03

 

 

STEP 04 >

The new area is created wrapping the selected Views, with the original screen displayed underneath, which can be used as a reference for any further adjustments to the size.
Custom_04

 

 

STEP 05 >

Select Save.

 

 

STEP 06 >

The new area is now created.
Custom_05

 

 

STEP 07 >

Select Generate Code, and check it in the Code Result Panel. If you’ve used the samples provided by Cracker9, the generated Custom Layout would look like the image below.
Custom_06

 

 

2. Custom Layout without selecting any Views

 

STEP 01 >

After dragging the View into the Design Panel, select the Custom Layout button without selecting any Views.
Custom_07

 

 

STEP 02 >

When the mouse cursor changes to the + icon, drag the area to the desired size, using the original screen displayed underneath for reference.
Custom_08

 

 

STEP 03 >

Select Save.

 

 

STEP 04 >

Generate and check the code. Creating Custom Layouts without selecting Views has the advantage of giving you more freedom in adjusting the newly created area to your liking.

Using Custom Layouts

Cracker9 aims to continue helping designers and developers concentrate on being creative.
For further information on Cracker9, please feel free to contact us directly: hello@cracker9.io

 

Back to list
Login
Register
Send message