├── .DS_Store
├── docs
└── screenshot.png
├── styles
└── widget.tss
├── views
└── widget.xml
├── widget.json
├── controllers
└── widget.js
└── README.md
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coredigital/br.com.coredigital.GridLayout/HEAD/.DS_Store
--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coredigital/br.com.coredigital.GridLayout/HEAD/docs/screenshot.png
--------------------------------------------------------------------------------
/styles/widget.tss:
--------------------------------------------------------------------------------
1 | "Label": {
2 | color: '#000',
3 | font: {
4 | fontSize: 18,
5 | fontWeight: 'bold'
6 | },
7 | height: Ti.UI.SIZE,
8 | width: Ti.UI.SIZE
9 | }
--------------------------------------------------------------------------------
/views/widget.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/widget.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "br.com.coredigital.GridLayout",
3 | "name": "br.com.coredigital.GridLayout",
4 | "description" : "",
5 | "author": "",
6 | "version": "1.2",
7 | "copyright":"Copyright (c) 2015",
8 | "license":"Public Domain",
9 | "min-alloy-version": "1.0",
10 | "min-titanium-version":"2.1",
11 | "tags":"",
12 | "platforms":"android,ios"
13 | }
14 |
--------------------------------------------------------------------------------
/controllers/widget.js:
--------------------------------------------------------------------------------
1 | (function constructor(args) {
2 | $.gridLayout.applyProperties(_.pick(args, ["visible", "height", "top", "bottom", "left", "right", "width", "backgroundColor"]));
3 |
4 | var totalColumns = parseInt(args.columns) || 2;
5 | var gap = parseInt(args.gap) || 3;
6 | var totalItens = 0;
7 |
8 | var widthScreen = OS_ANDROID ? px2dpi(Ti.Platform.displayCaps.platformWidth) : Ti.Platform.displayCaps.platformWidth;
9 |
10 | if (typeof args.width === 'string' && args.width.indexOf('%') > -1){
11 | widthScreen = parseInt((widthScreen / 100) * parseInt(args.width));
12 | } else if (args.hasOwnProperty('width')) {
13 | widthScreen = args.width;
14 | }
15 |
16 | var widthView = (widthScreen - gap * (totalColumns + 1)) / totalColumns;
17 | var heightView = (widthScreen - gap * (totalColumns + 1)) / totalColumns;
18 | var horizontalView ;
19 |
20 | $.footer.height = gap;
21 | _.each(args.children, function(view, index) {
22 | addItem(view);
23 | });
24 |
25 | function addItem(view) {
26 | view.height = heightView;
27 | view.width = widthView;
28 | view.left = gap;
29 | view.top = gap;
30 | if (totalItens % totalColumns == 0) {
31 | horizontalView = Ti.UI.createView({
32 | layout: 'horizontal',
33 | height: heightView
34 | });
35 | $.wrapperGridLayout.add(horizontalView);
36 | }
37 | horizontalView.add(view);
38 | totalItens ++ ;
39 | }
40 |
41 | function removeAllItems() {
42 | $.wrapperGridLayout.removeAllChildren();
43 | totalItens = 0;
44 | }
45 |
46 | function px2dpi(px) {
47 | return Math.ceil(px / (Titanium.Platform.displayCaps.dpi / 160));
48 | };
49 |
50 | function dpi2px(dpi) {
51 | return Math.ceil(dpi * (Titanium.Platform.displayCaps.dpi / 160));
52 | };
53 |
54 | exports.removeAllItems = removeAllItems;
55 | exports.addItem = addItem;
56 | })(arguments[0] || {});
57 |
58 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # br.com.coredigital.GridLayout
2 | GridLayout widget for Appcelerator Titanium
3 |
4 |
5 | ## Overview
6 | This widget helps you to organize your views in grid format.
7 |
8 | 
9 |
10 | ## Use it
11 |
12 | * Add the widget to your *Alloy Code*:
13 |
14 | ```xml
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | ```
23 | You can set 'columns' attribute to determine how many grid's columns.
24 | You can set 'gap' attribute to define the distance between views
25 |
26 | ```xml
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | ```
35 |
36 |
37 | * Add the widget to your *Controller Code*:
38 | ```javascript
39 |
40 | var gridDeals = Alloy.createController('br.com.coredigital.GridLayout');
41 | gridDeals.addItem(Ti.UI.createView({backgroundColor: 'blue'}));
42 | gridDeals.addItem(Ti.UI.createView({backgroundColor: 'yellow'}));
43 | gridDeals.addItem(Ti.UI.createView({backgroundColor: 'green'}));
44 | gridDeals.addItem(Ti.UI.createView({backgroundColor: 'black'}));
45 | gridDeals.addItem(Ti.UI.createView({backgroundColor: 'orange'}));
46 |
47 | ```
48 | ## License
49 |
50 |
51 | Copyright 2015 Ítalo Matos
52 |
53 | Licensed under the Apache License, Version 2.0 (the "License");
54 | you may not use this file except in compliance with the License.
55 | You may obtain a copy of the License at
56 |
57 | http://www.apache.org/licenses/LICENSE-2.0
58 |
59 | Unless required by applicable law or agreed to in writing, software
60 | distributed under the License is distributed on an "AS IS" BASIS,
61 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
62 | See the License for the specific language governing permissions and
63 | limitations under the License.
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------