Jetpack Glance ile gerçekçi widget’lar oluşturun

Jetpack Glance ile gerçekçi widget'lar oluşturun

Açık kaynak projem için bir özellik oluşturmak için Glance Widget’ı Work Manager API ile eşleştirdim SlimeKT, Orta klon (GitHub). Sonuç ilginçti. Öğrendiklerimi ve deneyimlerimi bu makale aracılığıyla paylaşmak istiyorum.

Soru: İnşa etmeye çalıştığım özellik neydi?

Medium’larla alay etmeye çalıştım Günlük Okuma Hatırlatma özellik. Kullanıcıya, abone olduğu kategori/konudan bir makaleyi okuması için günlük olarak belirli bir zamanda hatırlatılır.

⚒️Bu özelliği uygulamanın karmaşıklık düzeyi

Orta düzey: Jetpack’in WorkManager, DataStore, Jetpack Compose ve Hilt Worker hakkında temel bilgileri gerektirir.

Aşağıdaki alanlarda deneyimlerimi paylaşmak isterim,

  1. Pek de şık olmayan kullanıcı arabirimimizi oluşturarak Bakış widget’ının nasıl çalıştığını anlamak.
  2. Widget’ı kaydetme.
  3. Widget’ı Work Manager ile eşleştirme.
  4. Hakkında öğrenmek BakışDurumuTanım ve Bakış widget’ının tüm örneklerini güncelleme.
  5. Özel oluşturmak için ihtiyaçlar ve adımlar GlanceStateDefinition.
  6. Çalışanı periyodik olarak çalıştırmaya zorlama.
  7. Bonus 🎁: Glance widget’ı için desteklediğiniz Materyal Ekleme.

Bu özelliğin nasıl uygulanacağını derinlemesine inceleyelim.

1. Gerekli bağımlılıkları ekleme ve basit bir kullanıcı arayüzü oluşturarak Bakış widget’ının nasıl çalıştığını anlama.

Not: Bakış, Composable’ları gerçek RemoteView’lara çevirebilirve o gereklilikler Olmak için oluştur etkinleştirilmiş olarak Runtime, Graphics ve Unit UI Compose katmanlarına bağlıdır. Yine de, doğrudan birlikte çalışamaz diğer mevcut Jetpack Compose UI öğeleriyle. Daha fazla bilgi edin.

Kısacası, Glance API, Jetpack Compose API’ye benzeyen bir dizi UI öğesi içerir. Bu noktayı anlamadıysanız, aşağıdaki örneğe bakın.

  1. Bir Kotlin sınıfı oluşturun, yani “MyWidget” uzatması gereken GlanceAppWidget’ı ve geçersiz kılmak onun İçerik işlev. Yeni bir Sütun ekle birleştirilebilir ve içe aktarın, ancak aşağıdaki içe aktarma bloğunu gördüğünüzden emin olun.

olduğunu görebilirsiniz sütun birleştirilebilir den ithal edilmektedir Bakış atmak kütüphane. Ayrıca, biz normal kullanmamak değiştirici Oluştur kitaplığından; bunun yerine, kullanıyoruz Bakış Değiştirici Bakış kitaplığından.

Bir Metin ekleyelim birleştirilebilir (yine, bunu Glance kitaplığından aldığınızdan emin olun) ve değiştirici ve stil gibi tüm parametreleri de Glance kitaplığından içe aktarılmalıdır.

AndroidX Glance API ile yapılan Günlük Okuma widget’ımızın ilk görünümü

UI Feel çok süslü değil mi? Sorun değil🙋‍♀️. İlerleyelim.

2. Widget alıcınızı kaydedin.

Bir Kotlin sınıfı oluşturun, yani “MyWidgetAlıcı” uzatması gereken GlanceAppWidgetAlıcı ve uygulamak isteğe bağlı olmayan tek üyesidir ve GlanceWidget’ınızı başlatır.

Bu alıcıyı cihazınıza kaydetmeniz gerekecek. AndroidManifest.xml. Bu öz gerekli tüm kodu içerir. (Ayrıca Android Manifest dosyasına da başvurabilirsiniz. SlimeKT daha sağlam bir örnek için).

3. Widget’ı Work Manager ile eşleştirme.

Gerçek projede zaten ele aldığım, bir kez gösterilmişse aynı makalenin tekrarlanmaması gibi doğrulanması gereken bazı uç durumlar var. kontrol edebilirsiniz GünlükOkumaGörevi sağlam bir örnek için SlimeKT projesinden dosya.

Aşağıdaki kod parçası kendini açıklayıcıdır. API’mizin kullanıcının aboneliğinden bir makale almasını istedik ve sonucu alır almaz Bakış widget’ımızı güncellememiz gerekiyor. Basit değil mi?

Ama bekleyin, bir yakalama var! Widget içeriğinizi işçiden nasıl güncellersiniz? Merak etme; bir sonraki bölümde ele aldık.

4. Öğrenmek GlanceStateDefinition ve widget’ın güncellenmesi.

Glance API, durum sağlayıcısı olarak adlandırılır. BakışDurumuTanım, hangi Jetpack Datastore kullanır.

Jetpack DataStore, anahtar/değer çiftlerini veya yazılan nesneleri aşağıdakilerle saklamanıza izin veren bir veri depolama çözümüdür. protokol arabellekleri. DataStore, verileri eşzamansız, tutarlı ve işlemsel olarak depolamak için Kotlin eşyordamlarını ve Flow’u kullanır. Ldaha fazla kazan.

geri dönelim MyWidget dosyala ve kullan BakışDurumuTanım Widget içeriğimizi güncellemek için.

  • İlk adım: Geçersiz kıl stateDefinition ve onunla somutlaştır TercihlerGlanceStateTanım. (Uygulayan bir sınıf Bakışta TanımDurum DataStore Preferences türündedir ve kutudan AndroidX Glance kitaplığından çıkar) (Satır numarası 3)
  • İkinci adım: Akımı alın Bakışta TanımDurum İçerik içinde (DataStore Tercihleri ​​türünden) birleştirilebilir kullanarak işlev currentState<Preferences>() (Hat numarası 7)
  • Üçüncü adım: Benzersiz anahtarını ileterek DataStore Tercihlerimizin içinde depolanan dizeyi alın ve yardımıyla varsayılan olarak boş bir dizeye getirin. Elvis operatörü. (Satır numarası 8)

Artık Datastore Preferences’daki string değerini güncelleyerek widget’ımızı güncelleyebiliriz. Bunun için Datastore örneğine erişmemiz gerekiyor. Bakış kütüphanesi bize genel bir işlev sağlar updateAppWidgetState hangi Bakış Kimliği alır (bir GlanceAppWidget örneği) parametre olarak.

Mevcut tüm Bakış Kimliklerini aldıktan sonra widget’ımızı güncelleyen küçük bir yardımcı program işlevi oluşturalım.

Ve Viola! Bu işlevi çalışanımızın içinde çağırabilir ve parçacığın içeriğini güncelleyebiliriz.

Ama bekleyin, yeni bir sorun keşfettim 😲

Aynı widget’ın yeni bir örneğini oluşturduğumuzda içerik kayboluyor! Merak etme; onu da bir sonraki bölümde ele aldık.

5. Özel oluşturmak için ihtiyaçlar ve adımlar GlanceStateDefinition.

Diye sordum Marcel (Google’da Geliştirici İlişkileri Mühendisi) aynı pencere bileşeninin yeni bir örneğini oluşturulduğunda içeriğin neden kaybolduğu ve esas olarak Datastore’un verileri sürdürdüğü biliniyor? Widget’ın her yeni örneğinde yepyeni bir tercih (Datastore) dosyası oluşturulduğunu ve bu nedenle içeriğin başlangıçta boş olduğunu açıkladı. Ayrıca, uygulamamı yapmam gerektiği konusunda bana rehberlik etti. BakışDurumuTanım ve aynı tercih dosyasını paylaşın. (sorunu önlemek için)

hadi bir bakış atmak de TercihlerGlanceStateTanım (punto amaçlanmamıştır). BT uygulayan bir sınıftır Bakışta TanımDurum DataStore Tercihleri ​​türündedir ve kutudan AndroidX Glance kitaplığından çıkar.

Sonek ile yeni bir dosya oluşturulduğunu görebilirsiniz. .preferences_pbve önek fileKey muhtemelen her yeni widget örneğinde değişir.

Yine bir özel oluşturma Bakışta TanımDurum aynı tercihler dosyasını paylaşan oldukça basittir.

  • Adım 1: CustomState nesne sınıfınızı aşağıdakilerle genişletin: Bakışta TanımDurum DataStore Tercihleri ​​türünde.
  • Adım 2: getDataStore yöntemi, yeni bir tercih dosyası oluşturmaktan kaçının, yani bir dosya oluşturun. değişmez/sabit isim.
  • Adım 3: Son olarak, tercih dosyasının konumunu döndürün.

Artık, kitaplık tarafından sağlananın yerine Özel GlanceStateDefinition’ınızı kullanabilirsiniz.

Not: Birden fazla Bakış widget’ınız varsa, sorunları önlemek için ayrı tercih dosyalarına sahip olmak için (özel durum tanımınızın) yapıcısına tercih dosyası adını geçirmeyi düşünmelisiniz. Yine de birden çok Bakış widget’ında tek bir tercih dosyası kullanmak istiyorsanız, tercihlerin anahtarının aynı olmamasına dikkat edin.

6. DailyReadWorker’ı periyodik olarak çalışacak şekilde kuyruğa alma.

Work Manager kitaplığını kullandıysanız, belirli bir işi bir kez veya periyodik olarak yapabileceğimizi biliyor olabilirsiniz. Bu kullanım durumunda, 24 saat sonra tekrar eden periyodik bir çalışanı kuyruğa almamız gerekir.

kontrol edebilirsiniz DailyReadYöneticisi sağlam bir örnek için SlimeKT projesinden dosya.

7. Desteklediğiniz Malzemeyi Ekleme (Android 12+)

Widget arka planınız ve metin renginiz şunlara uyarlanabilir: Dinamik renkler Glance c’ye bir arka plan değiştirici ekleyereküst üste bindirilebilir bu bir renk kaynağını kabul eder. res/colors içinde bir renk kaynak dosyası oluşturabilirsiniz.

Ödeme: https://issuetracker.google.com/issues/213737775

Not: Glance widget’larınızı Jetpack Compose MaterialTheme oluşturulabilir içine sarmanız herhangi bir etkiye sahip olmaz ve önerilmez. Marcel Pintó, makalesinde daha yaygın şüphelere açıklık getirdi: Uygulama widget’ları için Gizemli Jetpack Bakışı. Kontrol ettiğinizden emin olun.

Bu kadar. 🙋‍♂️ Herhangi bir sorunuz olursa bana ulaşmaktan çekinmeyin. heyecan. Size yardımcı olmaktan çok mutlu olurum!

Özellikle ….. ‘ya teşekkür Marcel Pinto ve Gabor Varad Bu makalenin rehberliği ve düzeltmesi için. Onları Twitter’da takip ettiğinizden emin olun.

Daha fazla bilgi için bu çekme isteğine başvurabilirsiniz: https://github.com/kasem-sm/SlimeKT/pull/148

👍 Bu yazı için bir alkış bakışlı, ayy! Zarif. Teşekkürler!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.