Sıçramada görüntülemek istediğim tam ekran PNG var. Sadece bir tane hata ve ben her çekilebilir klasörde koymak için hiçbir fikri boyutu ne var ( ldpi, mdpi, hdpive xhdpi). Uygulamamın tüm telefonlarda ve tabletlerde iyi ve güzel çalışması gerekiyor. Sıçrama tüm ekranlarda güzel görünmesi için hangi boyutları (piksel cinsinden) oluşturmalıyım?

feragat

Bu cevap 2013'ten geliyor ve ciddi bir şekilde modası geçmiş. Android 3.2'den itibaren 6 grup ekran yoğunluğu var. Bu cevap mümkün olan en kısa sürede güncellenecek, ancak ETA olmadan güncellenecektir. Şu anda tüm yoğunluklar için resmi belgelere bakın (belirli piksel boyutları hakkında bilgi bulmak her zaman zor olsa da).

İşte tl / dr sürümü

• Her ekran yoğunluğu için bir tane olmak üzere 4 görüntü oluşturun:

  • xlarge (xhdpi): 640x960
  • büyük (hdpi): 480x800
  • orta (mdpi): 320x480
  • küçük (ldpi): 240x320

• Android Geliştirici Kılavuzu'ndaki 9 yamalı resim tanıtımını okuyun

• Sonuçtan ödün vermeden güvenle gerilebilen alanlara sahip görüntüler tasarlayın

Bununla, Android cihazın görüntü yoğunluğu için uygun dosyayı seçecek, ardından görüntüyü 9 yama standardına göre uzatacaktır.

tl sonu; dr. Tam gönderi önde

Sorunun tasarımla ilgili yönüyle ilgili cevap veriyorum. Ben bir geliştirici değilim, bu yüzden sağlanan çözümlerin çoğunu uygulamak için kod sağlamak mümkün olmayacaktır. Ne yazık ki, ilk Android Uygulamamı geliştirmemde yardımcı olduğum zamanki gibi kaybolan tasarımcılara yardımcı olmak.

Tüm ölçülere uygun

Android ile şirketler cep telefonlarını ve masalarını neredeyse her boyutta, istedikleri çözünürlükle geliştirebilirler. Bu nedenle, sabit ekran çözünürlükleri olmadığından, açılış ekranı için "doğru görüntü boyutu" yoktur. Bu, bir açılış ekranı uygulamak isteyen insanlar için bir sorun oluşturur.

Kullanıcılarınız gerçekten bir açılış ekranı görmek istiyor mu?

(Bir yan notta, kullanılabilirlik adamları arasında açılış ekranları biraz cesaretini kırmıştır. Kullanıcının hangi uygulamaya dokunduğunu zaten bildiği ve görüntünüzü bir açılış ekranı ile markalamanın gerekli olmadığı, yalnızca kullanıcı deneyimini kesintiye uğrattığı iddia edilmektedir. Bununla birlikte, oyunlar ve benzerleri de dahil olmak üzere, başlatıldığında (5s +) önemli miktarda yükleme gerektiren uygulamalarda kullanılmalıdır, böylece kullanıcı uygulamanın çöküp çökmediğini merak etmeyecektir)

Ekran yoğunluğu; 4 sınıf

Bu nedenle, piyasadaki telefonlarda çok farklı ekran çözünürlükleri verildiğinde Google, yardımcı olabilecek bazı alternatifler ve şık çözümler uyguladı. Bilmeniz gereken ilk şey, Android'in TÜM ekranları 4 farklı ekran yoğunluğuna ayırmasıdır :

1. Düşük Yoğunluk (ldpi ~ 120dpi)
2. Orta Yoğunluk (mdpi ~ 160dpi)
3. Yüksek Yoğunluklu (hdpi ~ 240dpi)
4. Ekstra Yüksek Yoğunluk (xhdpi ~ 320dpi) (Özel olarak oluşturulmuş cihazların değişen dpi değerleri olacağı için bu dpi değerleri yaklaşıktır)

(Eğer bir tasarımcıysanız) bundan bilmeniz gereken şey, Android'in cihaza bağlı olarak görüntülemek için temel olarak 4 görüntüden birini seçmesidir. Bu nedenle temel olarak 4 farklı görüntü tasarlamak zorundasınız (geniş ekran, portre / manzara modu gibi farklı formatlar için daha fazlası geliştirilebilir).

Bunu göz önünde bulundurarak şunu bilin: Android'de kullanılan her bir çözünürlük için bir ekran tasarlamadığınız sürece, görüntünüz ekran boyutuna sığacak şekilde uzanır. Ve resminiz temelde bir eğim veya bulanıklık değilse, esnemede istenmeyen bir bozulma elde edersiniz. Temel olarak iki seçeneğiniz vardır: her ekran boyutu / yoğunluk kombinasyonu için bir görüntü oluşturun veya dört adet 9-yama görüntüsü oluşturun.

En zor çözüm, her bir çözünürlük için farklı bir açılış ekranı tasarlamaktır. Bu sayfanın sonundaki tablodaki çözünürlükleri izleyerek başlayabilirsiniz (daha fazlası vardır. Örnek: 960 x 720 burada listelenmemiştir). Ve görüntüde küçük metin gibi bazı küçük ayrıntılara sahip olduğunuzu varsayarsak, her çözünürlük için birden fazla ekran tasarlamanız gerekir. Örneğin, orta bir ekranda görüntülenen 480x800 boyutunda bir görüntü iyi görünebilir, ancak daha küçük bir ekranda (daha yüksek yoğunluk / dpi ile) logo çok küçük olabilir veya bazı metinler okunamayabilir.

9 yama görüntüsü

Diğer çözüm 9 yamalı bir görüntü oluşturmaktır . Temel olarak görüntünüzün çevresinde 1 piksellik şeffaf bir kenarlıktır ve bu kenarlığın üst ve sol alanına siyah pikseller çizerek görüntünüzün hangi bölümlerinin gerilmesine izin verileceğini tanımlayabilirsiniz. 9 yamalı görüntülerin nasıl çalıştığına dair ayrıntılara girmeyeceğim, ancak kısaca, üst ve sol alandaki işaretlere hizalanan pikseller, görüntüyü uzatmak için tekrarlanacak piksellerdir.

Birkaç temel kural

1. Bu görüntüleri photoshop'ta (veya şeffaf png'leri doğru bir şekilde oluşturabilen herhangi bir görüntü düzenleme yazılımı) yapabilirsiniz.
2. 1 piksellik kenarlığın TAM ŞEFFAF olması gerekir.
3. 1 piksellik saydam kenarlığın yalnızca üstte ve solda değil, görüntünüzün her yerinde olması gerekir.
4. bu alana yalnızca siyah (# 000000) piksel çizebilirsiniz.
5. Üst ve sol kenarlıklar (görüntü gerdirmeyi tanımlayan) yalnızca bir noktaya (1 piksel x 1 piksel), iki noktaya (her ikisi de 1 piksel x 1 piksel) veya BİR sürekli çizgiye (genişlik x 1 piksel veya 1 piksel x yükseklik) sahip olabilir.
6. 2 nokta kullanmayı seçerseniz, görüntü orantılı olarak genişletilir (böylece her nokta son genişlik / yükseklik elde edilene kadar sırayla genişler).
7. 1 piksellik kenarlığın amaçlanan temel dosya boyutlarına ek olması gerekir. Bu yüzden 100x100 9-yama görüntüsü aslında 102x102 (üst, alt, sol ve sağda 100x100 + 1 piksel) olmalıdır
8. 9 yama görüntüleri * .9.png ile bitmelidir

Böylece logonuzun her iki tarafına (üst kenarda) 1 nokta ve üstüne ve altına (sol kenarda) 1 nokta yerleştirebilirsiniz ve bu işaretli satırlar ve sütunlar uzatılacak tek piksel olacaktır.

Misal

İşte 9 yamalı bir görüntü, 102x102 piksel (uygulama amaçlı olarak 100x100 son boyut):

Aynı görüntünün% 200 yakınlaştırması:

Hangi satırların / sütunların genişleyeceğini söyleyerek üstte ve soldaki 1 piksel işaretlerine dikkat edin.

Uygulamanın içindeki 100x100'de bu resim şöyle görünecektir:

Ve 460x140'a genişletilirse ne istersiniz:

Dikkate alınması gereken son bir şey. Bu görüntüler monitör ekranınızda ve çoğu cep telefonunda iyi görünebilir, ancak cihaz çok yüksek bir görüntü yoğunluğuna (dpi) sahipse, görüntü çok küçük görünecektir. Muhtemelen hala okunabilir, ancak 1920x1200 çözünürlüğe sahip bir tablette, görüntü ortada çok küçük bir kare olarak görünecektir. Peki çözüm nedir? Her biri farklı bir yoğunluk kümesi için 4 farklı 9 yama başlatıcısı görüntüsü tasarlayın. Büzülme olmayacağından emin olmak için, her yoğunluk kategorisi için en düşük ortak çözünürlükte tasarlamanız gerekir. Burada küçülme istenmeyen bir durumdur, çünkü 9-yama sadece gerdirmeyi açıklar, bu nedenle bir küçülme işleminde küçük metinler ve diğer öğeler okunabilirliği kaybedebilir.

Her yoğunluk kategorisi için en küçük, en yaygın çözünürlüklerin bir listesi:

• xlarge (xhdpi): 640x960
• büyük (hdpi): 480x800
• orta (mdpi): 320x480
• küçük (ldpi): 240x320

Bu nedenle, yukarıdaki çözünürlüklerde dört açılış ekranı tasarlayın, tuvalin etrafına 1 piksellik şeffaf bir kenarlık koyarak görüntüleri genişletin ve hangi satırların / sütunların gerilebilir olacağını işaretleyin. Bu görüntülerin yoğunluk kategorisindeki HERHANGİ bir cihaz için kullanılacağını unutmayın , bu nedenle ldpi görüntünüz (240 x 320) küçük görüntü yoğunluğuna (~ 120 dpi) sahip ekstra büyük bir tablette 1024x600 boyutuna kadar uzatılabilir. Bu nedenle, 9 yama, bir açılış ekranı için bir fotoğraf veya karmaşık grafikler istemediğiniz sürece, germe için en iyi çözümdür (tasarımı oluştururken bu sınırlamaları unutmayın).

Yine, bu uzamanın gerçekleşmemesinin tek yolu, her çözünürlüğü bir ekran (veya yüksek / düşük yoğunluklu cihazlarda görüntülerin çok küçük / büyük olmasını önlemek istiyorsanız, her çözünürlük yoğunluğu kombinasyonu için bir ekran) tasarlamak veya anlatmaktır. görüntünün gerilmemesi ve gerilmenin meydana geldiği her yerde arka plan renginin görünmemesi (Android motoru tarafından oluşturulan belirli bir rengin muhtemelen renk profilleri nedeniyle photoshop tarafından oluşturulan aynı renkten farklı görüneceğini unutmayın).

Umarım bu bir anlam ifade eder. İyi şanslar!

PORTRE MODU

MDPI 320x480 dp = 320x480 piksel (1x)

LDPI 0,75 x MDPI = 240x360 piksel

HDPI 1,5 x MDPI = 480x720 piksel

XHDPI 2 x MDPI = 640x960 piksel

XXHDPI 3 x MDPI = 960x1440 piksel

XXXHDPI 4 x MDPI = 1280x1920 piksel

PEYZAJ MODU

MDPI 480x320 dp = 480x320 piksel (1x)

LDPI 0,75 x MDPI = 360x240 piksel

HDPI 1,5 x MDPI = 720x480 piksel

XHDPI 2 x MDPI = 960x640 piksel

XXHDPI 3 x MDPI = 1440x960 piksel

XXXHDPI 4 x MDPI = 1920x1280 piksel

DÜZENLE:

2019'da okuyorsanız, açılış ekranı için Lottie kullanmanızı öneririm

VESİKA

LDPI: 200x320 piksel

MDPI: 320x480 piksel

HDPI: 480x800 piksel

XHDPI: 720px1280 piksel

PEYZAJ

LDPI: 320x200 piksel

MDPI: 480x320 piksel

HDPI: 800x480 piksel

XHDPI: 1280x720 piksel

9 yamalı görüntü oluşturmak için en iyi ve en basit cevabı araştırdım. Şimdi 9 yama görüntüsünü yapmak en kolay görevdir.

Gönderen https://romannurik.github.io/AndroidAssetStudio/index.html sadece tek bir tıklamayla xhdpi, HDPI, MDPI, LDPI - tüm çözünürlükler için 9 yama görüntüsünü yapabilirsiniz.

PNG kullanmak o kadar iyi bir fikir değil. Aslında performans açısından maliyetlidir. Çekilebilir XML dosyaları kullanabilirsiniz, örneğin Facebook'un arka planı .

Bu, performansınızı yumuşatmanıza ve hızlandırmanıza ve logo kullanımı için .9 yama resimleri kullanmanıza yardımcı olacaktır.

Density buckets

LDPI    120dpi    .75x
MDPI    160dpi    1x
HDPI    240dpi    1.5x
XHDPI   320dpi    2x
XXHDPI  480dpi    3x
XXXHDPI 640dpi    4x

px / dp = dpi / 160 dpi

Bir süre önce desteklenen boyutlara sahip bir excel dosyası oluşturdum
Umarım bu biri için yararlı olacaktır

Dürüst olmak gerekirse fikri kaybettim, ancak başka bir ekran özelliğini boyut olarak ifade ediyor (sadece yoğunluk değil)
https://developer.android.com/guide/practices/screens_support.html
Bazı hatalar olursa lütfen bana bildirin

Bağlantı1: boyutlar.xlsx

Bağlantı2: boyutlar.xlsx

Benim durumumda, style.xml içinde çizilebilir liste kullandım. Katman listesi çekilebilir ile, tüm ekran boyutu için sadece bir png ihtiyacınız var.

<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@drawable/flash_screen</item>
    <item name="android:windowTranslucentStatus" tools:ignore="NewApi">true</item>
</style>

ve flash_screen.xml dosyasını çekilebilir klasörde bulabilirsiniz.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"></item>
    <item>
        <bitmap android:src="@drawable/background_noizi" android:gravity="center"></bitmap>
    </item>
</layer-list>

"background_noizi", çekilebilir klasördeki bir png dosyasıdır. Umarım bu yardımcı olur.

** Her türlü büyük cihaz için ekran detayı arıyorsanız **

material.io'ya git

SplashScreen'inizin API21'den API23'e kadar tüm API'larda harika görünmesini sağlayacak düzenlenmiş çözüm

Yalnızca APIs24 + 'yı hedefliyorsanız, çekilebilir vektörünüzü doğrudan xml dosyasında aşağıdaki gibi ölçeklendirebilirsiniz:

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

Yukarıdaki kodda 640x640 tuval üzerine çizilen 240x240 boyutunda bir çekmeceyi yeniden ölçeklendiriyorum. sonra sadece böyle çizilebilir açılış ekranımda koymak ve harika çalışıyor:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

kodum aslında sadece alttaki üçgeni çiziyor ama burada bununla neleri başarabileceğinizi görüyorsunuz. Çözünürlük, nihayet bitmap kullanırken elde ettiğim pikselli kenarların aksine harika. bu yüzden elbette çizilebilir bir vektör kullanın (özel yazılım indirme zahmeti olmadan benim oluşturmak için kullandığım vectr adlı bir site var).

API21-22-23 üzerinde de çalışması için EDIT

Yukarıdaki çözüm, API24 + çalıştıran cihazlar için çalışırken, API22 çalıştıran bir cihazı yükledikten sonra gerçekten hayal kırıklığına uğradım. Açılış ekranının tekrar tüm görünümü doldurmaya çalıştığını ve bok gibi göründüğünü fark ettim. Kaşlarımı yarım gün yırttıktan sonra nihayet sırf irade ile kaba bir zorla zorladım.

tam olarak splashscreen xml gibi adlandırılan ikinci bir dosya oluşturmanız gerekir (splash_screen.xml diyelim) ve res / klasörde oluşturacağınız drawable-v22 ve drawable-v21 adlı 2 klasöre yerleştirmelisiniz (onları görmek için proje görünümünüzü Android'den Proje'ye değiştirmeniz gerekir). Bu, ilgili cihaz çekilebilir klasördeki -vXX sonekine karşılık gelen bir API çalıştırdığında, telefonunuza bu klasörlere yerleştirilen dosyalara yönlendirme yapmasını söyler; bu bağlantıya bakın . aşağıdaki kodu bu klasörlerde oluşturduğunuz splash_screen.xml dosyasının Katman listesine yerleştirin:

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

Bu API'ların bir nedenden dolayı, çalışabilmesi ve nihai sonuç aynı görünmesi için çekilebilir ürününüzü bir bitmap'e sarmanız gerekir. Sorun, splash_screen.xml dosyasının ikinci sürümü, açılış ekranınızın 23'ten yüksek API'ları çalıştıran cihazlarda hiç gösterilmemesine neden olacağı için, ek çekilebilir klasörlerle yaklaşımı kullanmanız gerektiğidir. splash_screen.xml dosyasının ilk sürümü, android varsayılan olarak kaynaklar için bulabileceği en yakın drawable-vXX klasörünü varsayılan olarak drawable-v24'e dönüştürür. Bu yardımcı olur umarım

Lucas Cerro'nun bu cevabına dayanarak boyutları , cevaptaki taban çizgisini kullanarak Android dokümanlarındaki oranları kullanarak hesapladım . Umarım bu yazıya başka birinin gelmesine yardımcı olur!

• xxxlarge (xxxhdpi): 1280x1920 (4,0x)
• xxlarge (xxhdpi): 960x1440 (3.0x)
• xlarge (xhdpi): 640x960 (2,0x)
• büyük (hdpi): 480x800 (1,5x)
• orta (mdpi): 320x480 (1,0x taban çizgisi)
• küçük (ldpi): 240x320 (0.75x)