In part 2 of my Kivy tutorial series we’ll explore much of what we need to know before we start making apps in the next video. We’ll cover creating custom widgets, setting default attributes, and 6 layouts being : Absolute Positioning, Floating Layout, Grid Layout, Box Layout, Stack Layout, and Page Layout.
All of the code from the video follows the video below. We’ll start making apps next time.
If you enjoy videos like this consider donating $1 on Patreon.
[googleplusone]
Code & Transcript from the Video
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 |
# ---------- KIVYTUT.PY ---------- # It is common practice to create your own custom # widgets so base widgets aren't effected import kivy kivy.require('1.9.0') from kivy.app import App from kivy.uix.widget import Widget class CustomWidget(Widget): pass class CustomWidgetApp(App): def build(self): return CustomWidget() customWidget = CustomWidgetApp() customWidget.run() # ---------- CUSTOMWIDGET.KV ---------- # You can set default attributes that are shared by # other widgets # color is RGBA as a percent of 255 and alpha # Color is the text color # background_normal and background_down are either # white with '' or can be set to a png # background_color tints whatever the background is <CustButton@Button>: font_size: 32 color: 0, 0, 0, 1 size: 150, 50 background_normal: '' background_down: 'bkgrd-down-color.png' background_color: .88, .88, .88, 1 # Position is x and y from the bottom left hand corner # You can define the position based on the changing # window sizes with root.x being the left most side # and root.y being the bottom <CustomWidget>: CustButton: text: "Random" pos: root.x, 200 CustButton: text: "Buttons" pos: 200, root.y CustButton: text: "Buttons" pos: 200, 400 # ---------- KIVYTUT2.PY ---------- import kivy kivy.require('1.9.0') from kivy.app import App from kivy.uix.floatlayout import FloatLayout # A Float layout positions and sizes objects as a percentage # of the window size class FloatingApp(App): def build(self): return FloatLayout() flApp = FloatingApp() flApp.run() # ---------- FLOATING.KV ---------- # size_hint defines the widget width (0-1) representing # a percentage of 100% and height of the window <CustButton@Button>: font_size: 32 color: 0, 0, 0, 1 size: 150, 50 background_normal: '' background_down: 'bkgrd-down-color.png' background_color: .88, .88, .88, 1 size_hint: .4, .3 # pos_hint represents the position using either x, y, left, # right, top, bottom, center_x, or center_y <FloatLayout>: CustButton: text: "Top Left" pos_hint: {"x": 0, "top": 1} CustButton: text: "Bottom Right" pos_hint: {"right": 1, "y": 0} CustButton: text: "Top Right" pos_hint: {"right": 1, "top": 1} CustButton: text: "Bottom Left" pos_hint: {"left": 1, "bottom": 0} CustButton: text: "Center" pos_hint: {"center_x": .5, "center_y": .5} # ---------- KIVYTUT3.PY ---------- import kivy kivy.require('1.9.0') from kivy.app import App from kivy.uix.gridlayout import GridLayout # The Grid Layout organizes everything in a grid pattern class GridLayoutApp(App): def build(self): return GridLayout() glApp = GridLayoutApp() glApp.run() # ---------- GRIDLAYOUT.KV ---------- # Define the number of columns and rows # Define the spacing between children in pixels <GridLayout>: cols: 2 rows: 2 spacing: 10 # Set the size by passing None to size_hint_x # and then pass the width Button: text: "1st" size_hint_x: None width: 200 Button: text: "2nd" Button: text: "3rd" size_hint_x: None width: 200 Button: text: "4th" # ---------- KIVYTUT4.PY ---------- import kivy kivy.require('1.9.0') from kivy.app import App from kivy.uix.boxlayout import BoxLayout # With a box layout we arrange widgets in a horizontal # or vertical box class BoxLayoutApp(App): def build(self): return BoxLayout() blApp = BoxLayoutApp() blApp.run() # ---------- BOXLAYOUT.KV ---------- # Orientation defines whether widgets are stacked (vertical) # or are placed side by side (horizontal) # padding is the space between the widgets and the # surrounding window <BoxLayout>: orientation: "vertical" spacing: 10 padding: 10 # size_hint defines the percentage of space taken on the # x access and the percentage of space left over by the # other widgets Button: text: "1st" size_hint: .7, .5 Button: text: "2nd" Button: text: "3rd" # ---------- KIVYTUT5.PY ---------- import kivy kivy.require('1.9.0') from kivy.app import App from kivy.uix.stacklayout import StackLayout # A stack layout arranges widgets vertically or horizontally # as they best fit class StackLayoutApp(App): def build(self): return StackLayout() slApp = StackLayoutApp() slApp.run() # ---------- STACKLAYOUT.KV ---------- # orientation is lr-tb or left to right, top to bottom # Other options are tb-lr, rl-tb, tb-rl, lr-bt, bt-lr, # rl-bt, bt-rl <StackLayout>: orientation: "lr-tb" spacing: 10 padding: 10 # size_hint defines the percentage of space taken on the # x access and the percentage of space left over by the # other widgets Button: text: "Q" size_hint: None, .15 width: 100 Button: text: "W" size_hint: None, .15 width: 120 Button: text: "E" size_hint: None, .15 width: 140 Button: text: "R" size_hint: None, .15 width: 160 Button: text: "T" size_hint: None, .15 width: 180 Button: text: "Y" size_hint: None, .15 width: 200 # ---------- KIVYTUT6.PY ---------- import kivy kivy.require('1.9.0') from kivy.app import App from kivy.uix.pagelayout import PageLayout # A page layout is used to create multi-page layouts # that you can flip through class PageLayoutApp(App): def build(self): return PageLayout() plApp = PageLayoutApp() plApp.run() # ---------- PAGELAYOUT.KV ---------- <PageLayout>: Button: text: "Page 1" Button: text: "Page 2" Button: text: "Page 3" |
Leave a Reply