Kotlin kullanarak Müthiş Mimari Bileşenleri - uyarlanabilir App simgeleri

Android Studio'da uyarlanabilir simge yapılandırma penceresi

Hepiniz Kotlin, Hançer 2, Android Mimarisi Bileşenleri, Retrofit 2, Uyarlanabilir simgeler ve Android'de gerçekleşen birçok harika özellik ve gelişmelerden haberdar olmalısınız. Son zamanlarda, Google Android P Geliştirici önizlemesini de başlattı. Uzun zamandır bu sıcak konular hakkında çok şey okudum ve uygulamalarımda da kullanmaya çalıştım. İşte yeni bir şeyler öğrenmeye ve bilgimi topluluğa geri paylaşmaya ilk girişim.
Öncelikle yukarıda bahsettiğim bu teknoloji yığınlarının faydalarına odaklanıp sergilemediğim bir dizi yazacağım ve GitHub’ın Arama API’sını kullanarak GitHub kullanıcılarını arayabiliriz.

Heyecanlı hissetmek? Sadece atla. Eğlenceli bir yolculuk olacak.

içerik

  1. Uyarlanabilir uygulama simgeleri
  2. Hançer 2 kullanarak bağımlılıkları enjekte etme
  3. Biraz oda yapmak
  4. Bu serinin gelecekteki bloglarına daha fazla puan eklemeye devam edecek

Uyarlanabilir uygulama simgeleri

Geçen yılın Google I / O17'sinde Google, Android Oreo (API seviye 26) işletim sisteminde uyarlanabilir başlatıcı simgeleri kullandı. Herhangi bir uygulamanın logosunu tasarlamanın yeni, şık ve zarif bir yolu. Bu yeni formatı kullanarak, uygulamamızın başlatıcısı simgesi farklı OEM'lerde çeşitli şekillerde görüntülenebilir; uyarlanabilir bir simgenin bir aygıtta dairesel şekilli bir simge ve başka bir aygıtta kare şeklinde bir simge görüntüleyebileceği anlamına gelir.

Dolayısıyla, uygulamamızın başlatıcısı simgesinin şekli aşağıdakilerden farklı olabilir:

Daire şeklinde adaptif simgesiKare şeklindeki uyarlamalı simgeYuvarlak kare şekilli adaptif simgesiKare şeklindeki uyarlamalı simgesi

Tüm adaptif simgeleri cihazınızda bulunan aynı şekilde yapmak için sistem tarafından kullanılan akıllı telefonda desteklenen OEM tarafından sağlanan varsayılan maskeye bağlı olarak.

temeller

Uyarlanabilir ikondaki en önemli bileşenler ön ve arka plan katmanlarıdır. Uyarlanabilir bir simge oluşturmak için başlatıcı simgesini yukarıda belirtilen iki bölüme ayırmamız gerekir (ön plan katmanı ve arka plan katmanı).

Başlatıcı simgelerinin boyutları, android 7.1 ve daha önceki sürümlerde 48 x 48 dp boyutundaydı. Ancak Google’ın Uyarlanabilir simgesi üzerindeki resmi belgelere göre, uygulamalar uyarlanabilir simgenin her iki katmanını oluşturmak için belirli bir kurallar dizisini izlemelidir, yani:

  • Hem ön plan hem de arka plan katmanları 108 x 108 dp boyutunda olmalıdır (burada arka plan katmanı opak olmalı ve ön plan katmanı saydamlığa sahip olabilir).
Başlatıcı simge boyutu (Kaynak)
  • Başlatıcı simgesi maskeleme içinde olmalıdır, yani 72 x 72 dp.
OEM maskeleme animasyonu (Kaynak)
  • OEM'lerin paralaks, darbe veya başka birçok efekt gibi farklı türde görsel efektler yapması için saklanan her bir taraftan fazladan 18 dp'lik fazladan bir boşluk var.
Görsel efektler (Kaynak)

Ah! Söylemem gereken bir şey daha var, ön plan ve arka plan katmanları .svg veya .png biçiminde olabilir. Bu blogun referanslar bölümünde, başlatıcı simgesinin ön plan katmanını nasıl oluşturacağımı öğrendiğim bir bağlantıyı paylaşacağım.

Yaklaşmak, yanaşmak, yaklaşım

Adaptive simgesi oluşturmak için iki yaklaşım vardır, yani.

  1. Android Studio'da Resim Varlığı özelliğini kullanma (kolay ve oldukça basit olan).
  2. Bir tipi XML dosyası oluşturmak kendi kendinize.

Bu blogdaki ilk yaklaşıma bakacağız. Fakat başlamadan önce, uyarlanabilir ikonu oluşturmak için dikkat edilmesi gereken bir önkoşul var.

Uygulamanızın, 26 ve üzeri olarak targetdkversion'a sahip olması gerekir.

İlk yaklaşım

Yalnızca aşağıdaki adımları izleyerek daha kolay bir yaklaşımdır:

  1. Res klasörüne sağ tıklayın ve Yeni> Görüntü Varlığı seçeneğini seçin. Bunun gibi görünecek:

2. Adım 1'den sonra, şöyle bir Resim Varlık Yapılandırma penceresi görebileceğiz:

Bu yapılandırma penceresinde hepimizin görebileceği birkaç seçenek var. Bir sonraki adımda Adaptif bir simge oluşturmak için gereken seçeneklere göz atacağız.

3. Bu adımda, olduğu gibi bırakacağımız bazı seçenekler var:

  • Varsayılan Başlatıcı simgeleri (Uyarlanabilir ve Eski) tarafından seçildiği gibi Simge Türü seçeneğini bırakacağız.
  • Başlatıcı simgesinin adı ic_launcher olarak yazılmıştır, adı istediğiniz gibi değiştirebilirsiniz.
  • Bu yapılandırma penceresinde, Güvenli Bölge Göster (Başlatıcı simgesi önizleme penceresinde güvenli bölgenin görünürlüğünü değiştirmek için) ve Izgarayı Göster (simgenin oranının tutarlılığını belirlemede yardımcı olan ana çizgi şekillerinin görünürlüğünü değiştirmek için) olan iki geçiş düğmesi vardır. .
  • Yapılandırma penceresinde Foreground layer, Background layer ve Legacy adında üç sekme vardır. Aşağıdaki adımları takip ederek onlara bakacağız.

4. Adım 3'ü takip ettikten sonra, background.svg veya background.png dosyamızı eklemek için ileri gideceğiz. GIMP v2.8 kullanarak 432 x 432 piksel boyutundaki background.png dosyamı yaptım, şöyle görünüyor:

background.png (432 x 432 piksel)

Sadece arkaplan katmanının kısa bir bölümünü veriyoruz: Bunun gibi alanlar var:

  • Ad: Arka plan katmanınızın adını gereksiniminize göre ayarlayın.
  • Varlık Türü: Arka plan katmanı için .svg veya .png dosyasını kullandığımız gibi görüntü türünü seçin.
  • Yol: Arka plan dosyanızın uygun yolunu seçin.

Görüntü yapılandırma penceresindeki arka plan katmanına arka plan dosyasını ekledikten sonra, aşağıdaki gibi değişiklikleri göreceğiz:

Arka plan resmi seçtikten sonra başlatıcısı simgesi

5. 4. Adımdan sonra, Ön Plan Katmanı sekmesini seçeceğiz ve yine arka plan dosyamızla aynı boyutlarda olan foreground.svg veya foreground.png dosyamızı ekleyeceğiz. Bu makalede yukarıda belirtilen yönergeleri izleyerek ön plan dosyamı GIMP v2.8'i kullanarak yaptım. Ayrıca, aşağıdaki kaynak bölümünde, uzun gölgeli basit bir metin türü logosu oluşturmaya ilişkin bir bağlantı paylaşacağım, bu arada logo şöyle görünür:

foreground.png (432 x 432 piksel)

Arkaplan katmanında Ad ve Varlık Türünü seçtiğimiz gibi, ön plan katmanı için de aynısını yapacağız. Bu nedenle, görüntü yapılandırma penceresinde ön plan dosyasının ön plan katmanına olan yolunu seçtikten sonra, aşağıdaki gibi değişiklikleri göreceğiz:

Ön plan görüntüsünü seçtikten sonra başlatıcı simgesi

6. Bu adım, son ikinci adımımız olacak, eski sekmeyi seçeceğiz ve orada üç seçeneğimiz var:

Eski simge ve diğer simge seçenekleri

Bu sekme, üç tür ek simge oluşturur; yani, Eski Simge, Yuvarlak Simge ve Google Play Store Simgesi. Her tür simge için evet veya hayır seçeneklerimiz vardır. Bu yüzden uygulamamız için her simgeyi oluşturacağız ve İleri'ye basacağız.

7. Tüm adımları uyguladıktan sonra, Android Studio tüm çıktı dosyalarını mipmap klasöründe oluşturacak ve tüm dosyaları dpi bilgisine göre ayıracaktır. Bu çıktı penceresine bir göz atalım:

Çıktı dosyasına genel bakış penceresi

Gördüğümüz gibi, biri etiketlerine sahip olan ve ön plan ile arka plan çekmecelerini ayrı ayrı belirten bir mipmap- içinde iki normal başlatıcı ikon XML dosyası var. anydpi-v26 klasörü. Bu yüzden tüm klasörleri ve dosyaları doğruladıktan sonra sonunda Finish ve Voila! Uyarlanabilir ikonumuz hazır.

Sadece uyarlanabilir ikonumuzun büyüsünü görelim:

GSearch App Adaptive simgesi

Hepsi uyarlanabilir ikonla ilgili. Kaynak kodunu burada bulabilirsiniz:

Bu serinin ikinci bölümünde, Bağımlılık Enjeksiyonunun Hançer kullanarak nasıl çalıştığını ve bu uygulamaya nasıl entegre edileceğini açıklayacağım. Bizi izlemeye devam edin…

kaynaklar

Bunlar uyarlanabilir ikonu uygulamak için takip ettiğim kaynaklar. Hepiniz bu kaynaklara da bir göz atabilirsiniz.

  1. Nick Butcher'dan Uyarlanabilir Simge Tasarlamak
  2. Uyarlanabilir Simgeler ve daha fazlası - StylingAndroid tarafından
  3. Adaptive Icon test etmek için
  4. GIMP'de Uzun Düz Gölge Nasıl Yapılır

Umarım, bu blog uygulamanız için harika ve harika uyarlanabilir simgeler oluşturmanıza yardımcı olacaktır. Uyarlanabilir simgeler uygulamak için bazı önerileriniz varsa, lütfen yorum bölümünde bize bildirin.

Okuduğunuz için teşekkürler. Ayrıca, Bu makaleyi okumaktan hoşlanıyor ve hoşlanıyorsanız, ardından then.

Twitter'da beni takip et: