Nasıl Android DP ve CSS px arasında dönüştürme?

Bunun muhtemelen bir noob sorusu olduğunu görüyorum, ama gerçekten beni karıştırıyor.

Google Materyal Tasarımı dokümanlarını ve css'deki bazı uygulamalarını okuyorum. dpCss kodları kullanılırken şartname Android'lerde yazılmıştırpx bir uzunluk birimi olarak .

Beni şaşırtan şey, css uygulamalarının genellikle spesifikasyondaki tam değeri kullanmasıdır, örneğin bir tostun olması gerekir :

Tek satırlı snackbar yüksekliği: 48 dp boyunda

Minimum genişlik: 288 dp

2 dp yuvarlak köşe

karşılık gelen CSS :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

Mevcut anlayışımla, bir Android DPgenellikle 160dpi ekranda bir piksel boyutunda görüntülenirken, CSS pxbir görsel açı olarak tanımlanır. Öyleyse, bir mesafeyi görünce pxbir ile aynı olur dpmu? Eğer öyleyse, ortak bir desen kullanmak olmasıdır pxolarakdp css'deki mi yoksa CSS kodunu tamamen yanlış mı anladım?

Daha önce Android geliştirme hakkında bir şey bilmiyorum, bir tasarımcı değil. Herhangi bir yardım için teşekkürler.

Bence kabul edilen yanlış. Css px aslında Aygıttan Bağımsız Piksel (daldır) ve px'i css'de dp olarak kullanmak yaygın bir kalıptır.

Sorunuzun tam cevabının burada bulunabileceğine inanıyorum:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Dp'yi px'e dönüştürmek için, adreslediğiniz ekran boyutlarını dikkate almanız gerekir. DPI ne kadar büyük olursa, iyi görünmesi ve pikselleşmeden kaçınmak için aynı alanda daha fazla piksel sıkıştırmanız gerekir. :

ldpi: 1 dp = 0,75 piksel
mdpi: 1 dp = 1 piksel
hdpi: 1 dp = 1,5 piksel
xhdpi: 1 dp = 2 piksel
xxhdpi: 1 dp = 3 piksel
xxxhdpi: 1 dp = 4 piksel

Örneğin:

CSS veya Photoshop'ta 3x3 dp kare olması gerekir:

2.25x2.25 piksel - ldpi
3x3 piksel - mdpi (Samsung ACE, Xperia X8)
6x6 piksel - xhdpi (Xperia S, Google Nexus 4)
9x9 piksel - xxhdpi (Samsung S4 - S5, HTC One)
12x12 piksel - xxxhdpi (bu çözüm) gelecek nesil cihazlarda kullanılacak)

Yukarıdakilere dayanarak, hesaplamalarınız XXHDPI ekranlar için 3x dp çarpanı kullanarak şöyle görünmelidir:

min-height: 144px;
min-width: 864px;
...
border-radius: 6px;

Android, kullanılan cihaz çözünürlüğünün daha düşük olduğunu tespit ederse görüntüleri otomatik olarak ölçeklendirir.

İşte sizin için işi yapmak için basit bir dönüştürücü: http://androidpixels.net/

W3C diyor ki :

Böylece piksel ünitesi sizi cihazın çözünürlüğünü bilmek zorunda bırakmaz. Çıktı 96 dpi, 100 dpi, 220 dpi veya 1800 dpi olsun, tam piksel sayısı olarak ifade edilen bir uzunluk tüm cihazlarda her zaman iyi ve çok benzer görünür (...)

Ve her ne kadar diyor ki:

Bir pikselin görünümü hakkında fikir edinmek için, 1990'lı yıllardan itibaren bir CRT bilgisayar monitörü hayal edin: gösterebileceği en küçük nokta, bir inçin 1 / 100'ü (0,25 mm) veya biraz daha fazlasını ölçer. Piksel birimi adını bu ekran piksellerinden aldı.

Ayrıca şunu söylüyor:

Aslında, CSS, tüm basılı çıktılarda 1 pikselin 1/96 inç olması gerektiğini gerektirir (...)

Varsayılan olarak ekran cihazlarının 96 dpi olarak yapılandırıldığını göz önünde bulundurarak, tarayıcıların bir CSS pikseli nasıl yorumladığı konusunda en iyi varsayımdır:

96 css-px = ~ 1 inch

Ve Android'de bunu biliyoruz:

160 dp = ~ 1 inch

Yani:

96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

Ve buna göre:

min-height: 29px;
min-width: 173px;
...
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Google Polymer'ın Tost boyutlarını kontrol edene kadar bunun doğru olduğunu düşündüm :

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

Yani 1'e 1 dönüşüm ve bundan itibaren Android tarayıcılarının kullandığı:

1 css-px = 1 dp

Masaüstü ve dizüstü bilgisayarlar gibi diğer cihazlarda inç başına 96 css-px kullanılır.

Sonuç olarak: css pikselleri cihaz dpi'sinden bağımsızdır ve Android cihazlarda 1 css-px 1dp'ye eşittir.

Tek bir doğru cevap yok, aslında iki tane var:

1. Google tarafından önerilir (örn. Materyal Tasarımı üzerine Udacity kursunda): Çoğu durumda tıpkı Polimer kütüphanesinde olduğu gibi 1: 1 olan basit bir dönüşüm kullanın. Bu Retina ekran için doğru değil , örneğin bu yüzden ziyade 1: 1, bir yoğunluk resmi Materyal Tasarımı Kılavuzu'nda cihaz tabloda verilen oranını kullanmak ( bazı popüler cihazlar için oranları ve spesifik ölçümler ile tablo ) ve uygun @media sorguları sağlamak mdpi ekran (160dpi / ppi) için 1dp'nin 1px olduğu varsayılarak çözünürlük eşikleri ve varlıkları .

Not: Genel bir fikir: sayfanın altındaki: Görüntü ölçekleme ile bazı resim birden ekran çözünürlüğü eşikleri için oranları (Kırılma noktası resim) görselleştirmek için

2. belirli cihazlar için tasarımınızda ultra tutarlılık istiyorsanız, daha fazla araştırma ve hesaplama yapmanız ve daha da önemlisi, istediğiniz kadar cihazı desteklemek ve yedek (sağlamak için) 1. sırada bahsedilen yöntem) çok önemsemeyenler için.

İşte konuya daha fazla dalmak isteyenler için daha ayrıntılı bilgi, ancak bu bir açıklama ve mantık, yukarıdaki tam bir cevap :

Mesele şu ki, Materyal Tasarımı'nın resmi kılavuzuna (Düzen> Birimler ve ölçümler) göre "piksel yoğunluğu":

inç'e sığacak piksel sayısı.

Yani temelde piksel yoğunluğu bir ppi değeri için veya bir çok insan ayrı bir şey, bir dpi değeri olarak bu tanımaz yana yeni bir isimdir.

Aynı kılavuza göre 1dp'nin tanımı:

Bir dp, 160 yoğunluklu bir ekranda bir fiziksel piksele eşittir . Dp'yi hesaplamak için:

dp = (piksel cinsinden genişlik * 160) / ekran yoğunluğu

CSS yazarken, dp veya sp'nin belirtildiği yerlerde px kullanın. Dp sadece Android için geliştirilmesinde kullanılmalıdır.

Malzeme tasarımının temel ilkesi, masaüstü çözünürlüğü, ppi (/ dpi) ve css pikseli sorununu artıran farklı platformlarda tutarlı fiziksel boyutlar sağlamaktır; bu durumda Android'de olduğu gibi dp'yi hesaplamaya bağlı kalmalısınız ve ekranların çoğunun 96ppi olduğu doğru değil (CSS için önemli bir varsayım), bunların büyük bir kısmının biraz daha yüksek ppi'si var ve sadece geleneksel masaüstünü değil, aynı zamanda normal dizüstü bilgisayarları da dikkate alırsanız veya tabletler veya Surface gibi "dönüştürülebilir" ifadeleri, dönüştürmeye ihtiyaç duyulur: genellikle 100-130ppi arasında değişir, şu anda kullandığımın 127ppi olduğunu söyledi:

% 100 = 160ppi -> fiziksel 1 piksel genişliği = 1dp -> dikdörtgen 100x100px = 100x100dp

79% = 127ppi -> fiziksel 1 piksel genişliği = ca. 0,8dp -> dikdörtgen 100x100px = 80x80dp

Dp sadece Android için saf ve yeni bir birim olsa da, dp'de gelen MD düzenlerini uyarlamak için bazı hesaplamalar yapmalısınız. Sorunun amacı için belirli bir öğenin fiziksel anlamda ne kadar büyük olacağı hakkında daha fazla fikir edinmek istiyorsanız, belirli cihazlar için Malzeme Tasarımı kılavuzlarında ideal dokunma boyutu aralığı değeri ** dp değerinin altında fiziksel olan. ** dp değeri değişir, ancak fiziksel aynı kalır.

Üniteleri neden hesaplamanız gerektiğine dair sorun, Android API kılavuzunda (dp birimlerini piksel birimlerine dönüştürme) daha ayrıntılı olarak açıklanmaktadır ve yine de CSS ile stilize edilmiş öğeler için geçerlidir:

Bazı durumlarda, boyutları dp cinsinden ifade etmeniz ve sonra bunları> piksele dönüştürmeniz gerekir.

Kullanıcının parmağı en az 16 piksel hareket ettikten sonra kaydırma veya fırlatma hareketinin tanındığı bir uygulama düşünün. Bir taban çizgisi ekranında, bir kullanıcının hareket tanınmadan önce 1/10 inç (veya 2,5 mm) değerine eşit olan 16 piksel / 160 dpi hareket etmesi gerekir. Yüksek yoğunluklu ekrana (240dpi) sahip bir cihazda, kullanıcının 16 inç / 240 dpi boyutunda hareket etmesi gerekir, bu da 1/15 inç (veya 1,7 mm) değerine eşittir. Mesafe çok daha kısadır ve uygulama kullanıcıya daha hassas görünür.

Daha önce bahsedilen Polimer dönüşümü 1: 1 muhtemelen 96dpi yoğunluğunun, hatta verdiğim yoğunluğun düşük yoğunluklu veya hatta (96dpi durumunda olduğu gibi) grubun altında bile olmasından kaynaklanmaktadır. Dp değerinin bir css kabul edilmediğini göz önünde bulundurarak, yoğunluk oranının (düşük, 1,0 orta, vb için 0,75-, basitleştirme ve çoklu boyut için kullanılması gereken) olduğunu varsaymak daha kolaydır. daha önce bahsedilen Malzeme Tasarımı için cihaz tablosunda gösterilen ekran desteği. Android API kılavuzunun yukarıda belirtilen bölümünde en iyi uygulamalardan biri olarak bile bahsedilmektedir. Polimer dönüşümü 1: 1 iyi olabilir, çünkü birçok cihaz seviye 1'de yoğunluk oranına sahiptir.

Son ikileme geri dönme: Farklı cihazların ince nüanslarına dalmaya karar verirseniz css px. Eğer bu kadar sorgulayıcı değilseniz, MD tablosundan Yoğunluk oranına sadık kalın. Ancak bir mükemmeliyetçiyseniz, CSS piksellerinin ve fiziksel boyutlar ilişkisinin bu temel noktası, W3C Adayı Önerisinde mükemmel (ve oldukça basit bir açıklama) vardır :

Mutlak uzunluk birimleri birbirlerine göre sabit olan ve bir fiziksel ölçümle demirlenir. Genellikle çıktı ortamı bilindiğinde kullanışlıdır. Mutlak birimler fiziksel birimlerden ('inç', 'cm', 'mm', 'pt', 'pc', 'q') ve görsel açı biriminden ('px') oluşur :

Kol uzunluğunda okumak için, 1px yaklaşık 0.26 mm'ye (1/96 inç) karşılık gelir.

Not: Piksel birimi ve fiziksel birimlerin bu tanımının CSS'nin önceki sürümlerinden farklı olduğunu unutmayın. Özellikle, CSS'nin önceki versiyonlarında piksel birimi ve fiziksel birimler sabit bir oranla ilişkili değildi: fiziksel birimler her zaman fiziksel ölçümlerine bağlıyken, piksel birimi referans piksele en yakın şekilde değişecektir. (Bu değişiklik, çok fazla mevcut içeriğin 96 dpi olduğu varsayımına bağlı olduğu ve bu varsayımı kırdığı için içeriği bozduğu için yapılmıştır.)

Pikselin bu yeni tanımı (fiziksel boyutları dikkate alarak) CSS pikselleri ve dps arasındaki boşluğu doldurur ve basit ölçüm hesaplamaları kullanarak çıktı ortamı olarak adlandırılan , bu durumda tutarlı (fiziksel anlamda) ) MD düzeni , farklı cihazlarda ve platformlarda aynı kalır. Dahası, hem W3C hem de MD Yönergeleri piksel / nokta kapsamı ile ilgili temel fikri göstermek için düşük ve yüksek çözünürlüklü cihaz resimlerini kullanır - yüksek çözünürlüklü bir cihazda 1 piksellik 1 piksellik bir alanı kaplamak için daha fazla cihaz pikseli (nokta) gerekir düşük çözünürlüklü bir modelde, yani retina görüntüleme için CSS sorgularında yaygın olarak kullanılan, Malzeme Tasarımı ve tüm mobil cihazlar için sağlamanız gerekenle (ancak daha fazla eşikle) aynıdır.

Sonuç olarak, Google tarafından en iyi önerilen uygulama olan MD Yoğunluk oranını kullanın veya hassasiyete sabitlendiyseniz veya tasarımınızın fiziksel boyutlar hakkında kesinlikle tutarlı olması gerekiyorsa: belirli veya yaygın olan ppi / dpi değerlerini kullanarak doğru dönüşümü kullanın cihazlar (ki bu oldukça çılgınca), Google Resizer çevrimiçi aracında kolayca test edebileceğiniz şeydir, çünkü öncelikle MD Guide'da önerilen ortak eşiklere ve oran ve ilgili görüntüleme türü adları için bölme kurallarına (xlarge, medium vb. ) uygulanmaktadır.

Bu nedenle , referans dp eşit piksel boyutunun mdpi çözünürlüğü (160) olduğunu hatırlatarak tablodaki MD oranlarına sadık kalın ve iyi olacaksınız.