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.

Liste 3.1 merhabaDunya.py
 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.

_images/ilkUygulama.png

Şekil 3.1 Merhaba Dünya

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:

_images/kullaniciGirisMockups.png

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.

Liste 3.2 girisFormu.py
 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.

_images/girisFormu.png

Şekil 3.2 Giriş Formu

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.

Liste 3.3 girisFormu.py
 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.

_images/girisFormuKutu1.png

Şekil 3.3 Giriş Formu (Dikey Yönelimli)

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:

_images/kutuPencereMockup.png

Yukarıdaki çizimde gördüğünüz pencere düzenini oluşturacak program Liste 3.4‘dadır.

Liste 3.4 girisFormu.py
 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.