Unity 8
 All Classes Functions Properties
ResponsiveGridView.qml
1 /*
2  * Copyright (C) 2013 Canonical, Ltd.
3  *
4  * This program is free software; you can redistribute it and/or modify
5  * it under the terms of the GNU General Public License as published by
6  * the Free Software Foundation; version 3.
7  *
8  * This program is distributed in the hope that it will be useful,
9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11  * GNU General Public License for more details.
12  *
13  * You should have received a copy of the GNU General Public License
14  * along with this program. If not, see <http://www.gnu.org/licenses/>.
15  */
16 
17 import QtQuick 2.0
18 import Ubuntu.Components 0.1
19 
20 /*
21  Essentially a GridView where you can specify the maximum number of columns it can have.
22  */
23 Item {
24  property int minimumHorizontalSpacing: units.gu(0.5)
25  // property int minimumNumberOfColumns: 2 // FIXME: not implemented
26  property int maximumNumberOfColumns: 6
27  readonly property int columns: gridView.columns
28  property alias verticalSpacing: gridView.verticalSpacing
29  readonly property alias margins: gridView.margin
30  property int delegateWidth
31  property int delegateHeight
32  property alias model: gridView.model
33  property alias delegate: gridView.delegate
34  readonly property int cellWidth: gridView.cellWidth
35  readonly property int cellHeight: gridView.cellHeight
36  readonly property int totalContentHeight: {
37  return contentHeightForRows(Math.ceil(gridView.model.count / columns))
38  }
39  property alias interactive: gridView.interactive
40  readonly property alias flicking: gridView.flicking
41  readonly property alias moving: gridView.moving
42  readonly property alias pressDelay: gridView.pressDelay
43  readonly property alias originY: gridView.originY
44  property alias delegateCreationBegin: gridView.delegateCreationBegin
45  property alias delegateCreationEnd: gridView.delegateCreationEnd
46  property alias highlightIndex: gridView.highlightIndex
47  readonly property alias currentItem: gridView.currentItem
48 
49  function contentHeightForRows(rows) {
50  return rows * cellHeight + verticalSpacing
51  }
52 
53  GridView {
54  id: gridView
55  objectName: "responsiveGridViewGrid"
56  anchors {
57  fill: parent
58  leftMargin: margin/2
59  rightMargin: margin/2
60  }
61  clip: parent.height != totalContentHeight
62 
63  function pixelToGU(value) {
64  return Math.floor(value / units.gu(1));
65  }
66 
67  function spacingForColumns(columns) {
68  // spacing between columns as an integer number of GU, the remainder goes in the margins
69  var spacingGU = pixelToGU(allocatableHorizontalSpace / columns);
70  return units.gu(spacingGU);
71  }
72 
73  function columnsForSpacing(spacing) {
74  // minimum margin is half of the spacing
75  return Math.max(1, Math.floor(parent.width / (delegateWidth + spacing)));
76  }
77 
78  property real allocatableHorizontalSpace: parent.width - columns * delegateWidth
79  property int columns: Math.min(columnsForSpacing(minimumHorizontalSpacing), maximumNumberOfColumns)
80  property real horizontalSpacing: spacingForColumns(columns)
81  property real verticalSpacing: horizontalSpacing
82  property int margin: allocatableHorizontalSpace - columns * horizontalSpacing
83  property int highlightIndex: -1
84 
85  cellWidth: delegateWidth + horizontalSpacing
86  cellHeight: delegateHeight + verticalSpacing
87 
88  onHighlightIndexChanged: {
89  if (highlightIndex != -1) {
90  currentIndex = highlightIndex
91  }
92  }
93  }
94 }