3. Temel Bilgiler¶
Bu bölümde Kivy’e giriş düzeyinde temel bilgiler verilecektir.
3.1. Merhaba Dünya¶
Hemen her programlma dilinde ilk yazılan program “Merhaba Dünya” cümlesinin yazılmasıdır. Bu belgede de bu geleneği bozmayacağız ve Kivy’i öğrenmeye bununla başlayacağız. IDLE’e kullanarak aşağıdaki program kodunu yazın ve merhabaDunya.py olarak kaydedin.
1 2 3 4 5 6 7 8 9 10 11 | # -*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.label import Label
class ilkUygulama(App):
def build(self):
return Label(text='Merhaba Dünya!')
ilkUygulama().run()
|
Programı çalıştırdığınızda Şekil 3.1‘deki gibi bir pencere açılacaktır.
Biraz bu program üzerinde konuşalım. Buraya kadar geldiğinize göre import
satırlarını
biliyor olmalısınız, bu nedenle burayı geçiyorum. Bütün Kivy programları bir ana sınıf tarafından yönetilir.
Bu ana sınıf Kivy’deki App
sınıfını içerir. Bu programdaki ana
sınıfımız ilkUygulama()
dır. Ana sınıftaki build() işlevi mutlaka bir pencere düzeni döndürür
ve bu düzen program açıldığında kullanıcnın ilk gördüğü penceredir. Ana sınıf tarafından oluşturulan penecereye
Ana Pencere diyoruz. Buradaki program
çok basit olduğundan bir pencere düzeni döndürmek yerine sadece bir etiket (Label) döndürmüştür,
ve bu etiket Ana Pencere olarak karşımıza çıkmaktadır. Uygulamanın çalıştırılması,
ana sınıfın run()
özelliği ile yapılır. Buradaki ilkUygulama().run()
satırı
uygulamamızın çalışmasını sağlar.
Eğer pencere ismi verilmemişse, pencerinin başlığında ana sınıfın ismi görünecektir. Pencere başlığını
değiştirmek için, title özelliğini kullanabiliriz. Sınıf tanımlanır tanımlanmaz hemen altında (def build(self):
ile aynı hizada) aşağıdaki satırı ekleyerek yapabilirsiniz:
title = 'Benim Kivy Programım'
Bir diğer yöntem ise, build()
işlevi altında return
etmeden hemen önce şu satırı eklemektir:
self.title = 'Benim Kivy Programım'
Benzer şekilde pencere için kullanılacak olan simgeyi de icon özelliğini kullanarak yapabilirsiniz. Son durumda build()
işlevini şu şekilde yazabilirsiniz:
def build(self):
self.title = 'Benim Kivy Programım'
self.icon = 'simge.png'
return Label(text='Merhaba Dünya!')
simge.png
dosyası, ya merhaba_dunya.py
dosyasının kaydedildiği yerde olmalı ya da tam patika yazılmalıdır. Örneğin resimler
klasörüne koymuş iseniz:
self.icon = 'resimler/simge.png'
şeklinde yazılmalıdır.
3.2. Pencere Düzenleri¶
Bir pencereye birden fazla Grafik Parçacığı (widget) koyacaksanız, bir pencere düzeni oluşturmalısınız. Kivy programlarındaki pencere düzenleri iki şekilde oluşturulabilir:
- Pencere düzenleri kodlarıya
- Kivy
kv
dili ile
3.2.1. Izgara Pencere Düzeni¶
Bu belge kapsamında kv
dili kullanılacaktır. Ancak bir fikir vermesi açısından kodlayarak nasıl yapıldığını basit bir örnek
ile açıklamaya çalışalım. Şöyle bir pencereye ihtiyacımız olsun:
Bunun için altı adet grafik parçacığına (aslında pencere düzeni ile yedi) ihtiyacımız var. İki tanesi etiket (Label
) iki tanesi Metin Kutusu (TextInput) ve bir
tanesi Düğme (index:Button). Bir tanede boş grafik parçacığı (Widget). Bu programı Liste 3.2 gibi yazabiliriz.
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 | # -*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
class girisFormu(App):
def build(self):
duzen = GridLayout(cols=2)
duzen.add_widget(Label(text='Kullanıcı Adı:'))
kullanici_adi = TextInput()
duzen.add_widget(kullanici_adi)
duzen.add_widget(Label(text='Parola:'))
parola = TextInput()
duzen.add_widget(parola)
duzen.add_widget(Widget())
gir_dugme=Button(text='Gir')
duzen.add_widget(gir_dugme)
self.title = "Giriş Formu"
return duzen
girisFormu().run()
|
Programımız şimdilik bir işe yaramamaktadır. Tek yaptığı bir giriş penceresi
oluşturmak ve bunu kullanıcıya göstermektir. Düğmenin nasıl kullanılacağı, metin kutularındaki değerlerin nasıl alınacağı ileriki
konularda anlatılacaktır. Burada GridLayout ile ızgara pencere düzeni oluşturulmuştur. Bu sınıfa verilen cols=2
parametresi
ızgaranın iki sütundan oluşacağını söylemktedir. Kaç satırdan oluşuacağını belirtmiyoruz. Bir garfik parçacığına (burada ızgara pencere
düzeni) bir başka grafik parçacığını add_widget()
ile ekliyoruz. Buradaki ızgaramız iki sütunlu olduğundan
ızgara düzenine eklenen her iki parçacık bir satırda bulunur ve daha sonra yeni satıra geçilir.
Şimdi size bir soru: Sizce 24. satırı duzen.add_widget(Widget())
neden yazmışızdır?
Programımız çalıştığında Şekil 3.2 ‘deki gibi bir pencere açılacaktır.
3.2.2. Kutu Pencere Düzeni¶
Benzer bir pencereyi kutu pencere düzeni ile oluşturalım. Kutu pencere düzeni BoxLayout parçacığı ile oluşturulur. Liste 3.3 programını inceleyin.
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 | # -*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
class girisFormu(App):
def build(self):
duzen = BoxLayout(orientation='vertical')
duzen.add_widget(Label(text='Kullanıcı Adı:'))
kullanici_adi = TextInput()
duzen.add_widget(kullanici_adi)
duzen.add_widget(Label(text='Parola:'))
parola = TextInput()
duzen.add_widget(parola)
duzen.add_widget(Widget())
gir_dugme=Button(text='Gir')
duzen.add_widget(gir_dugme)
self.title = "Giriş Formu"
return duzen
girisFormu().run()
|
Programımız çalıştığında Şekil 3.3 ‘deki gibi bir pencere açılacaktır.
Bu pencere bizim istediğimiz değil. Kutu pencere düzeninin ön tanımlı yönelimi yataydır. Yani eklenen parçacıklar yan yana görünür.
Dikey olması için kutu pencere düzenini oluşturan BoxLayout()
grafik parçacığına orientation='vertical'
paramteresini
verdik. Dikey yönelimli bir kutu pencere düzeninde tüm parçacıklar alt alta eklenir. Oysaki biz, ilk etiket ile ilk metin kutusunu yan yana,
sonraki ikilileri de yine yan yana istiyoruz. O halde, ana düzeni oluşturan kutu pencere düzeninin ilk satırına bir başka
kutu pencere düzeni yerleştirmeliyiz. İkinci kutu pencere düzeninine eklediğimiz parçacıklar zaten yan yana görünecektir.
Anlatmak istediğimi aşağıdaki şekilde çizdim:
Yukarıdaki çizimde gördüğünüz pencere düzenini oluşturacak program Liste 3.4‘dadır.
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 | # -*- coding: utf-8 -*-
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
class girisFormu(App):
def build(self):
duzen = BoxLayout(orientation='vertical')
duzen_satir_1 = BoxLayout()
duzen_satir_1.add_widget(Label(text='Kullanıcı Adı:'))
kullanici_adi = TextInput()
duzen_satir_1.add_widget(kullanici_adi)
duzen.add_widget(duzen_satir_1)
duzen_satir_2 = BoxLayout()
duzen_satir_2.add_widget(Label(text='Parola:'))
parola = TextInput()
duzen_satir_2.add_widget(parola)
duzen.add_widget(duzen_satir_2)
duzen_satir_3 = BoxLayout()
duzen_satir_3.add_widget(Widget())
gir_dugme=Button(text='Gir')
duzen_satir_3.add_widget(gir_dugme)
duzen.add_widget(duzen_satir_3)
self.title = "Giriş Formu"
return duzen
girisFormu().run()
|
Liste 3.4‘deki programı çalıştırdığımızda bize Şekil 3.2 ‘deki pencerenin aynısını verecektir.
3.2.3. Diğer Pencere Düzenleri¶
Kivy yukarıda anlattığımız, pencere düzenlerinden daha fazlasını sunar. Tüm pencere düzenlerini şöyle özatleyebiliriz.
- AnchorLayout:
- Grafik parçacıkları ‘top’ (üst), ‘bottom’ (alt), ‘left’ (sol), ‘right’ (sağ) veya ‘center’ (orta) konuma yerleştirielbilirler.
- BoxLayout:
- Grafik parçacıkları ‘vertical’ (dikey) veya ‘horizontal’ (yatay) yönelimli olarak yerleştirilebilirler.
- FloatLayout:
- Grafik parçacıkları istenilen herhangi bir konuma yerleştirilebilirler.
- RelativeLayout:
- Çocuk grafik parçacıkları düzene göreceli olarak yerleştirilebilirler.
- GridLayout:
- Grafik parçacıkları ızgara şeklinde yerleştirilebilirler.
- PageLayout:
- Çoklu sayfa düzeni oluşturmak için kullanılabilir.
- ScatterLayout:
- Grafik parçacıkları RelativeLayout’da olduğu gibi yerleştirilebilir ancak bunlar dönrürülebilir ve ölçeklenebilir.
- StackLayout:
- Grafik parçacıkları üst-alt ve sağ-sol’a kaydırılacak şekilde yerleştirilebilir.
İhtiyaç oldukça bu pencere düzenlerini kullanacağız ve oralarda daha ayrıntılı açıklayacağız.
Pencere düzenlerinin kod yazarak oluşturulması, mekanik bir işlemi tekrarlamaktır. Kivy’de bizi bu dertten kurtarack bir diğer yöntem vardır:
kv lang
(veya kv
dili). Bunu Kivy Dili: kv (kv lang) bölümünde anlatacağız.