Not: Bu makale Material Components sürümüne dayalıdır 1.2.0-beta01 itibariyle 1 Haziran 2020 .



HASHTAGS'ta küçük bir Android ekibi üzerinde çalıştığım üç buçuk yıldır, beni her gün işe girmeye motive eden ana şeylerden biri, şirketimizin bir sorunu en iyi bulduğumuz şekilde çözme özgürlüğü ve güveni.



Gerekli gördüğümüz bir soruna birçok farklı çözümü araştırma ve keşfetme özgürlüğü, ürün güncellemelerini sunmanın zaman dilimini hesaplarken, hem müşterilerimiz hem de yazılımımız için en iyi çözümü bulmamızı sağlar.

Böyle bir zorluk, yeni Mobil Raporlama özelliğimiz için bir UI bileşeni oluşturmayı içeriyordu. Bu yeni bileşen, kullanıcılarımızın bir analiz raporu için bir tarih aralığı belirlemesine olanak tanıyan bir ay seçiciydi.

Seçtiğimiz başlangıç ​​yeri mevcut Malzeme Bileşenleri Kitaplığı . Sıfırdan başlamak yerine, bu kitaplık aktif olarak korunur ve Malzeme belirtimleriyle uyumludur. Temel olarak bu kitaplıkla, kendimiz yazmak zorunda kalacağımız mantık miktarını muhtemelen azaltabiliriz.

Bu makalede, bu sürece nasıl yaklaştığımızı, Sprout Android uygulaması için geliştirmede bazı benzersiz faktörleri, bu sırada ortaya çıkan (ve düzeltilen) birkaç 'sorun' ve eğer benzer bir proje üzerinde çalışmak.

Giriş

Android Materyal Bileşenleri 1.1.0 Sürüm yeni bir Tarih Seçici UI Bileşeni tanıttı. Bu yeni MaterialDatePicker AppCompat üzerinden CalendarView Takvim Görünümü veya Metin Giriş Alanı kullanarak bir tarih aralığı seçme yeteneğidir.



Eski AppCompat CalendarView çok esnek değildi. Çözmesi gereken sınırlı kullanım durumu için iyi bir bileşendi; diğer bir deyişle, izin verilen bir tarih aralığı sınırını belirtmek için tek bir tarih ve isteğe bağlı minimum ve maksimum tarihler seçmek.

Yeni MaterialDatePicker, genişletilmiş davranış işlevselliğinin kullanımına izin vermek için daha fazla esneklikle oluşturuldu. Seçicinin davranışını ince ayarlamak ve değiştirmek için uygulanabilecek bir dizi arayüz üzerinden çalışır.

Bu davranış değişikliği, MaterialDatePicker.Builder üzerindeki bir dizi oluşturucu model işlevi aracılığıyla çalışma zamanında yapılır. sınıf.



Bu, bu MaterialDatePicker temel davranışını genişletebileceğimiz anlamına gelir. düzenlenebilir arayüz bileşenleri aracılığıyla.

Not: Bir dizi farklı bileşen varken MaterialDatePicker kullanır, bu makalede sadece Tarih Seçimi Bileşenini ele alacağız.

47'nin anlamı

Tarih aralığı seçici

HASHTAGS Android ekibi, Analytics Raporları Bölümümüzü oluşturma sürecindeydi.

Bu yeni bölüm, kullanıcılarımızın raporun kapsayacağı bir dizi filtre ve bir dizi tarih aralığı seçmesine olanak tanıyacaktı.

MaterialDatePicker kullanım senaryomuzu gerçekleştirmek için yararlanabileceğimiz bazı önceden oluşturulmuş bileşenlerle geldi.

En yaygın durumumuz için, kullanıcının bir tarih aralığı seçmesine izin vermek, önceden oluşturulmuş MaterialDatePicker yeterli olur:

Bu kod bloğuyla, kullanıcıların bir tarih aralığı seçmesine izin veren bir Tarih Seçici elde ederiz.

Aylık tarih seçici

Daha benzersiz tarih seçimine sahip olan HASHTAGS raporlarından biri de Twitter Eğilimleri Raporudur.

Bu rapor, herhangi bir tarih aralığına izin vermek yerine, tek bir aylık seçimi zorunlu kılması, yani bir kullanıcının yalnızca Mart 2020 ile 3 Mart - 16 Mart 2020 arasında seçim yapabileceği anlamına gelmesi bakımından diğerlerinden farklıdır.

Web uygulamamız bunu bir açılır form alanı kullanarak halleder:

MaterialDatePicker önceki bölümde ele alınan önceden oluşturulmuş Malzeme Tarih Aralığı Seçici ile böyle bir kısıtlamayı uygulayabilecek bir yol yoktur. Neyse ki, MaterialDatePicker, özel kullanım durumumuz için varsayılan davranışı genişletmemize izin veren birleştirilebilir parçalarla oluşturuldu.

Tarih seçim davranışı

MaterialDatePicker bir DateSelector seçicinin seçim mantığı için kullanılan arayüz olarak.

Javadoc'tan:

'{@link MaterialCalendar} Kullanıcıları için arayüz Takvim'in seçimleri nasıl görüntülediğini ve döndürdüğünü kontrol etmek için… ”

MaterialDatePicker.Builder.dateRangePicker() yukarıdaki örnekte kullandığımız RangeDateSelector oluşturucu örneğini döndürür.

Bu sınıf, DateSelector uygulayan önceden oluşturulmuş bir seçicidir.

Aylık tarih seçimi davranışı için beyin fırtınası yapmak

Kullanım örneğimiz için, kullanıcılarımızın seçilen tarih aralığı olarak tüm bir ayı seçmesini sağlamanın bir yolunu istedik; Örneğin. Mayıs 2020, Nisan 2020 vb.

Önceden oluşturulmuş RangeDateSelector yukarıda referans verilen yolun çoğunu oraya götürdü. Bileşen, bir kullanıcının bir tarih aralığı seçmesine ve bir ciltli .

Eksik olan tek şey, tüm ayı otomatik olarak seçmeye zorlamanın bir yoluydu. RangeDateSelector Varsayılan davranışı kullanıcının bir başlangıç ​​tarihi ve bir bitiş tarihi seçmesini sağlar.

Bir kullanıcı ayda bir gün seçtiğinde, seçicinin tarih aralığı olarak tüm ayı otomatik olarak seçmesini sağlayacak bir davranış istedik.

Karar verdiğimiz çözüm RangeDateSelector ve ardından bunun yerine tüm ayı otomatik olarak seçmek için gün seçimi davranışını geçersiz kılın.

Neyse ki, arayüzden geçersiz kılabileceğimiz bir fonksiyon var DateSelector aranan: select(selection: Long).

Bu işlev, bir kullanıcı seçicide bir gün seçtiğinde, seçilen gün, dönemden UTC milisaniye olarak geçtiğinde çağrılacaktır.

Aylık bir tarih seçimi davranışı uygulama

Uygulamanın en basit kısım olduğu ortaya çıktı, çünkü istediğimiz davranışı elde etmek için geçersiz kılabileceğimiz net bir işleve sahibiz.

Temel mantık şu olacaktır:

  1. Kullanıcı bir gün seçer.
  2. select() işlevi, bir gün içinde seçilen gün ile çağrılır. Uzun Dönemden itibaren UTC milisaniyeleri.
  3. Bize geçen günden itibaren ayın ilk ve son gününü bulun.
  4. super.select(1st of month) Numaralı telefonu arayın & super.select(last day of month)
  5. RangeDateSelector Öğesinden ana davranış beklendiği gibi çalışmalı ve tarih aralığı olarak ayı seçmelidir.

Hepsini bir araya koy

Artık Özel MonthRangeDateSelector'imize sahip olduğumuza göre, MaterialDatePicker ayarlayabiliriz.

Örneği daha ileriye götürmek için, seçimin sonucunu şu şekilde işleyebiliriz:

Sonuç şöyle görünecek:

Gotchas

Bu çözüme ulaşmayı zorlaştıran tek bir büyük sorun vardı.

MonthRangeDateSelector Ürünümüzü oluşturmak için kullanılan birincil bileşenler sınıf RangeDateSelector ve arayüz DateSelector. Bu makalede kullanılan kitaplığın sürümü (1.2.0-beta01), genişletme veya uygulama konusunda cesaretlerini kırmak için bu iki dosyanın görünürlüğünü kısıtladı.

Sonuç olarak, yeni MonthRangeDateSelector 'i başarılı bir şekilde derleyebilseydik, derleyici bizi bundan vazgeçirmek için çok korkutucu bir uyarı gösterdi:

Bu derleyici uyarısını gizlemenin bir yolu, @Suppress('RestrictedApi') eklemektir. böyle:

Bu deneyim, Materyal Bileşenleri Kitaplığı, Android Geliştirici Topluluğu'na bazı harika yeni bileşenler sağlamış olsa da, hala devam eden bir çalışma olduğunu göstermektedir.

Bu kitaplığın harika bir parçası, Android Topluluğu'ndan gelen geri bildirimlere açıklıktır! Bu bileşen görünürlük kısıtlamasını keşfettikten sonra, bir sorun Github Projesi'nde ve hatta bir PR hemen ele almak için.

Materyal Bileşenler Ekibi ve Android Topluluğu arasındaki bu açık geri bildirim döngüsü, herkes için harika bir işbirliği ve sonuçlar sağlar.

Sonuç

Yeni MaterialDatePicker tarih seçiminin çoğu kullanım durumunu muhtemelen kapsayacak bazı harika işlevselliğe sahiptir.

Bununla birlikte, AppCompat CalendarView gibi bir şeyin en iyi yanı, bir araya getirilebilir bir şekilde oluşturulmuş olmasıdır. Bu nedenle, belirli kullanım durumları için kolayca genişletilebilir ve değiştirilebilir, oysa CalendarView içinde bu tür şeyleri başarmak çok daha zor olacaktır.

Özel teşekkür

Bu makalenin hakem incelemesine yardımcı olan bazı kişileri vurgulamak istiyorum:

Arkadaşlarınla ​​Paylaş: