Rehber MAML Dersleri - Kilit Ekranı, Saat, Müzik Çalar vb. Bileşen Yapımı

kasimtmc

Kıdemli Üye
Kıdemli Üye
MIUI Sever
SMS Onaylı
Adım
kasim
Cihazım
Redmi Note9 Pro
Meslek
Öğretmen
Konum
Çorum
Katılım
14 Kasım 2020
Konular
25
Mesajlar
461
Çözümler
2
Tepkime puanı
323
Puanları
78
Merhabalar yeni başlayanlar için türkçe bir kaynak oluşturmak istedim.
Konuya öncelikli olarak giriş seviyesinden neyin ne olduğundan, neyi ifade ettiğinden başlayarak daha karmaşık konulara doğru ilerleyeceğim.

1. Birleşen başlıkları;
MIUI'da bir bileşeni sisteme tanıtmak için kullanılan giriş cümleleri gibi düşünebilirsiniz. Merhaba, ben kasım gibi...
Bunun ilk adımı kodu yazdığımız belge uzantısının ".xml" olması, ikinci adımı belge içi başlığın "<?xml version="1.0" encoding="utf-8"?>" şeklinde olması. MIUI bu belge türünde yazdığınız kodu bu sayede nasıl "decode" ( çözeceğini ) edeceğini bilecek.
Üçüncü adım oluşturacağanız bileşenin başlığını atmak.
Örneğin bir kilit ekranı oluşturuyorsanız;
başlığı "<Lockscreen version="2" screenWidth="1080">" şeklinde açmalı ve </Lockscreen> şeklinde kapatmalısınız. Aslında bu klasik bir HTML body işlevi. HTML'de bir bileşen açarken "<>" açılış, "</> ise kapanışı gösterir. Özetle ilgili birleşen burada "<>" başladı, burada "</>" bitti demiş olursunuz kodu çalıştıracak sisteme.
Yine örneğin bir saat widgeti oluşturuyorsanız "<Clock version="2" screenWidth="1080" >" şeklinde başlarsınız ve "</Clock>" şeklinde bitirirsiniz.
Yapacağınız tüm işlemler, yazacağınız her satır kod bu iki satırın arasına yazılmak zorundadır.
Örneğin;
<?xml version="1.0" encoding="utf-8"?> // belgemizin nasıl kodlandığı

<Clock version="2" screenWidth="1080" > // bileşenimizin türü, özellikleri vb...
<DateTime size="100" color="#ffffff" formatExp="ifelse(#time_format,&apos;HH:mm&apos;,&apos;hh:mm&apos; )" x="#screen_width/2" y="#screen_height/2" visibility="1"/> // içerik
</Clock> // kapanış komutu.

Burada MIUI'a bir saat oluşturduğumuzu, özelliklerini ve içeriğini belirtmiş olduk. Sistem bu bilgilere göre; 100 punto büyüklüğünde, beyaz renkli, 24'lü zaman formatı kullanıldığında saati 15:15 şeklinde, 12'li zaman formatı tercih ediliyorsa 03:15 şeklinde ve ekranı hem dikey hem yatay olarak ortalayan bir saat oluşturacak.

MIUI'da tema oluştururken bu kalıp genelde 5 farklı bileşen için kullanılıyor; A- Kilit ekranı, B- Saat, C- Fancy ( animasyonlu ) simgeler, D- MiWallpaper ve E- Uygulamaların içeriğini özelleştirirken.

Kilit ekranı için;
<?xml version="1.0" encoding="utf-8"?>
<Lockscreen version="2" frameRate="30" displayDesktop="false" screenWidth="1080">

</Lockscreen>

Saat için;
<?xml version="1.0" encoding="utf-8"?>
<Clock version="2" screenWidth="1080" >

</Clock>

Miwallpaper ( ana ekranda animasyonlu vb. duvar kağıtları oluşturmanızı sağlar.) için;
<?xml version="1.0" encoding="utf-8"?>
<MiWallpaper version="2" screenWidth="1080">

</MiWallpaper>

Fancy (hareketli, animasyonlu) simgeler için;
<?xml version="1.0" encoding="utf-8"?>
<Icon version="1" width="168" height="168" screenWidth="1080" useVariableUpdater="DateTime.Second">

</Icon>

şeklinde oluşturduğumuz body içerisine bileşenimizi yazarız.
Tabi burada başlık içerisinde görülen bazı terimleri de açıklamamız gerekli. bu terim -screenWidth="1080"- yatay ekran boyutunu, bu terim -frameRate="30"- ekran yenileme hızını, bu terim -displayDesktop="false"- kilit ekranında veya ekrana girişte ana ekranın gösterilip gösterilmeyeceğini, bu terim -useVariableUpdater="DateTime.Second"- bileşenimizi güncelleyecek sistem bileşenini tanımlamamızı sağlar. Oluşturacağımız her bileşende ( eğer düzgün çalışmasını istiyorsak) bu tür tanımlamalara yer vereceğiz.

// 1. konu sonu

// 2. konu

-Değişkenler-

Değişkenler önceden tanımladığınız veya yine sizin tanımladığınız durumlara göre değer alabilen bileşenlerdir.
Değişkenleri genel olarak içeriğin duruma göre değişmesi gerektiği alanlarda ya da birden çok değeri bir araya getirmek için kullanırız.
Temel olarak iki değişken türü bulunmakta.
1. Tetikleyicisiz çalışan değişkenler.
2. Tetikleyiciyle çalışan değişkenler.
//
1. Tetikleyicisiz değişkenler:

Tetikleyicisiz değişkenler : içerdiği değerler veya veriler değiştikçe yeni bir sonuç verir.
Bu değişkenler " <Var name="" expression="" type="" const="" /> " şeklindedir.

2. Tetikleyiciyle çalışan değişkenler:
Bir değişkenin bir koşula ya da eyleme göre değer almasını sağlamanın üç yolu var.
Değişkeni bir butona, bir eşiğe veya önkoşula bağlamak.
A- buton;
<Image alpha="255" align="center" alignV="center" haptic="true" touchable="true" src="bg.png" x="#screen_width/2" y="400" visibility="1">
<Triggers>
<Trigger action="up,cancel">
<VariableCommand expression="0" name="mod" persist="true"/>
</Trigger>
</Triggers>
</Image>

Bu buton örneğinde değişkenimiz <Var/> yerine <VariableCommand/> halini aldı. Bir butonda değişken tanımlayabilmemiz için bu hale getirmemiz gerekli.
Bu buton içindeki değişken butona basmadığımız zaman kendine atanan değeri vermeyecek.
Örnek olarak bir buton daha yapalım.
<Image alpha="255" align="center" alignV="center" haptic="true" touchable="true" src="bg.png" x="#screen_width/2" y="400" visibility="1">
<Triggers>
<Trigger action="up,cancel">
<VariableCommand expression="1" name="mod" persist="true"/>
</Trigger>
</Triggers>
</Image>

İki buton arasındaki fark ilk butonda "mod" isimli değişkenin değerinin 0, ikincisinde 1 olması ancak aynı anda bir sonuç verebileceğinden biz ilk butona bastığımızda 0, ikinci butona bastığımızda 1 değerini verecek.

B- Eşiğe bağlı değişkenler;
<Var expression="#second" threshold="10">
<Trigger>
<VariableCommand expression="1" name="mod" persist="true"/>
</Trigger>
</Var>
Bu değişken türü bir eşik tarafından herekete geçirilir. Butonlara atadıklarımızla benzerlerdir ancak farkları siz bir aksiyonda bulunmasanız da koşulları sağlandığında otomatik olarak güncel değeri vermeye devam etmeleridir.
Örneğin buradaki değişkenimiz saniye cinsinden bir koşula bağlı ve eşik olarak belirlediğimiz değere veya katlarına her ulaştığında değişkenimiz harekete geçecek.

C- Ön koşula/şarta bağlı değişkenler;
Bu değişkenler de ilk maddedeki ve ikinci maddeki değişkenlerin birleşimi gibi ancak ikisinden de farkları; değerler değiştikçe veya eşik atlandıkça yeni sonuç vermemesi bunun yerine belirli ön koşullara bağlı olması ve bu koşullar gerçekleşmedikçe yeni sonuç vermemeleri.
Yani bir şarta bağlıdırlar ve hem butonlarda hem eşikle tetiklenen değişkenlerde kullanılabilirler. Aslında farklı bir tür değişken değillerdir, yalnızca diğer değişkenlerin bir ön koşula bağlanmış halleridir.
Örneğin;
<Rectangle alpha="255" fillColor="#ffffff" cornerRadius="15" w="200" h="300" touchable="true" x="#screen_width/2" y="#screen_height-500" visibility="1" >
<Triggers>
<Trigger action="up">
<VariableCommand condition="#__darkmode == 0" expression="0" name="normal" persist="true"/>
<VariableCommand condition="#__darkmode == 1" expression="1" name="normal" persist="true"/>
</Trigger>
</Triggers>
</Rectangle>

Buradaki butona atadığımız "normal" isimli değişken butona bastığımızda eğer darkmode (karanlık mod) açıksa 1 değerini, değilse 0 değerini alacak.
Bunu yapmanın bir diğer yolu "ifelse" kullanmaktır.
Örneğin;
<Var name="normal" expression="ifelse(#__darkmode == 0,0,1)" const="true" type="int" />
Burada kısaca değişkene eğer "darkmode" 0 yani kapalıysa benim için 0 değerini, "darkmode" 0 değilse 1 değerini al komutu vermiş olduk.

Konuyla ilgili kavramlar:
name - isim
expression - ifade (değişkenin sonuç olarak ifade edeceği değer)
condition - koşul/şart
treshold - eşik
action - dokunma hareketi tipi ( up>elinizi çektiğinizde, down>ekrana dokunduğunuzda, move> parmağınızı ekranda hareket ettirdiğinizde ....)
type - değişkenin türü (int> tam sayı sonuçlar, number> sayı sonucu, string>yazı vb. sonuçlar)
const - değişken kalıcılığı ( true olduğunda değişkenin sonucu bileşen yeniden başlatılsa dahi yeniden hesaplanmaz ancak komutlarla yeni bir değer atanabilir.)
persist - değişken kalıcılığı ( true olduğunda değişkenin sonucu bileşenin yeniden başlatılması, temanın tekrar uygulanması dahil hiçbir aksiyon sonucu yeniden hesaplanmaz ancak komutlarla yeni bir değer atanabilir.)

//2. bölüm sonu

//3. bölüm
-ExternalCommands ve VariableBinders-

A- ExternalCommands:
<ExternalCommands>

</ExternalCommands>

Kilit ekranı, MiWallpaper ya da fancy ikonlarda bu bölüm bileşen her yeniden başlatıldığında çalıştırılması gereken kodları/işlevleri barındırır.
Örneğin bir animasyona kilit ekranı her açıldığında oyna/dur/devam et veya şu kareleri oynat gibi komutlar ile şu içerik sağlayıcıyının içerikleri yenilensin gibi emirleri genel olarak burada oluştururuz.
Resimleri görmek için giriş yapmanız gerekmektedir.


Burada verdiğimiz komutlar sayesinde time_ani_1,2,3 ve 4 animasyonları bileşenimiz her açıldığında 1500 ms'deki kareyi oynatacaklar.
Move1 ve Move2 değişkenlerinin değerleri bileşenimiz her açıldığında 0 olacak.
Ve Movego animasyonu bileşenimiz her açıldığında oynatılacak.

B- VariableBinders:
<VariableBinders>

</VariableBinders>

Diğer adıyla bağlayıcı değişkenleri.
İçerik, sunucu veya sağlayıcı gibi değişkenleri sisteme tanıtmanızı sağlar.
Bir uygulamadan veri almak istiyorsanız, internetten veri almak istiyorsanız veya bir sensör verisine ulaşmak istiyorsanız bu kısımda sağlayıcınızı ve alacağınız veri türlerini tanıtmak zorundasınız.
Resimleri görmek için giriş yapmanız gerekmektedir.

ContentProviderBinder bizim yüklü uygulamalar ya da sistem bileşenlerinden veri almamızı sağlar.
Hava durumu, bildirimler, yapılacaklar, notlar gibi veri sağlayıcılarını burada tanımlarız.

Resimleri görmek için giriş yapmanız gerekmektedir.

SensorBinder sistemde olan sensörlerin verilerine erişmemizi sağlar.
Kullanacağımız sensör tipini ve hangi verileri alacağımızı buraya tanımlarız.

Resimleri görmek için giriş yapmanız gerekmektedir.

WebServiceBinder web (internet) sağlayıcısından veri almamıza olnak sağlar.
Buraya tanımladığımız web sağlayıcısından alacağımız verileri ve türlerini de yine burada tanımlı tutmamız gerekli.

Kullanılabilir ( kullandığınız sistemde bu sensör mevcutsa ) bazı sensörler:

Hızlanma sensörü; anlık olarak cihazın hareket ettiği yöndeki bilgilerini verir.
Resimleri görmek için giriş yapmanız gerekmektedir.

İndex- 0: yatay, 1 : dikey 2: z ekseni bilgilerini verir.

Lineer hızlanma sensörü;
Resimleri görmek için giriş yapmanız gerekmektedir.

Yer çekiminin etkilediği veriyi ortadan kaldırır.
İndex- 0: yatay, 1: dikey, 2: z ekseni bilgilerini verir.

Yer çekimi sensörü;
Resimleri görmek için giriş yapmanız gerekmektedir.

Cihazın içinde bulunduğu duruma göre yer çekimsel ivme bilgisini verir.
Youtube gibi uygulamalarda cıhazı yana yatırdığınızda ekranının tam ekrana alınmasını sağlayan sensör budur.
Yine bu tür eklentiler yapmak veya animasyonlar için kullanılabilir.

Barometrik basınç sensörü;
Resimleri görmek için giriş yapmanız gerekmektedir.

Cihazınızda bir barometrik basınç sensörü varsa ortamda cıhaza etki eden basınç verisini bu sensör yardımıyla elde edebilirsiniz.

Konum sensörü;
Resimleri görmek için giriş yapmanız gerekmektedir.

Cihazın konum verilerine ulaşmanızı sağlar.
Bu sensörde veri almanın iki yolu var birincisi üstteki şekilde, ikincisi ise "<Variable name="location_str0" type="string" index="0"/>" şeklinde index'leri ayrı ayrı yazarak. Ancak ilk tip bana daha kullanışlı geliyor.
location_str[0] veya index'leyerek kullandığınızı düşünürsek index 0 : Konum duğruluğu,
location_str[1] veya index 1 : Yükseklik,
location_str[2] veya index 2 : Konum,
location_str[3] veya index 3 : Enlem,
location_str[4] veya index 4 : Boylam,
location_str[5] veya index 5: Gerçek zamanlı hız,
location_str[6] veya index 6: Konumlandırma süresi verilerini almanızı sağlar.

Yön sensörü;
Resimleri görmek için giriş yapmanız gerekmektedir.

Cihazınızda bulunan manyetik sensörler yardımıyla cihazınızın manyetik kutba göre yönünü ölçer.
Pusula işlevini gerçekleştiren sensör bu sensördür.
0 : yatay, 1 : dikey, 2 : z ekseni verilerini verir.

//3. bölüm sonu
 
Son düzenleme:

Neptün'ün oğlu

Üye
MIUI Sever
Acemi Üye
Adım
Hüseyin
Cihazım
Xiaomi mi 5s
Yaş
21
Konum
Iğdır
Katılım
2 Haziran 2017
Konular
3
Mesajlar
70
Tepkime puanı
13
Puanları
8
Elinize sağlık hocam, çok yararlı bir içerik olacağı şimdiden belli.
 

Mehmet KARAHANLİ

Üye
MIUI Sever
Acemi Üye
Adım
Mehmet
Cihazım
Mi9
Yaş
41
Konum
Wien
Katılım
19 Temmuz 2019
Konular
9
Mesajlar
91
Tepkime puanı
29
Puanları
18
hocam elinize saglik yararli bi icerik. yeni basladigim icin bana karisik geldi bunu biraz daha anlasilir sekilde yaparsaniz (misal Notepad++ daki gibi) tam olmasada renklendirip örneklerle paylasirsaniz duaciniz olurum.
umarim sizi paylasimdan sogutmamisimdir. devamini bekliyecegim ☺️
 

kasimtmc

Kıdemli Üye
Kıdemli Üye
MIUI Sever
SMS Onaylı
Adım
kasim
Cihazım
Redmi Note9 Pro
Meslek
Öğretmen
Konum
Çorum
Katılım
14 Kasım 2020
Konular
25
Mesajlar
461
Çözümler
2
Tepkime puanı
323
Puanları
78
hocam elinize saglik yararli bi icerik. yeni basladigim icin bana karisik geldi bunu biraz daha anlasilir sekilde yaparsaniz (misal Notepad++ daki gibi) tam olmasada renklendirip örneklerle paylasirsaniz duaciniz olurum.
umarim sizi paylasimdan sogutmamisimdir. devamini bekliyecegim ☺️
Dikkate alırım
 
Üst Alt