10

Yeni Materyal Tasarımında (AppCompat kullanarak), bazı eylem simgelerini yeni araç çubuğunun çekmece simgesiyle hizalamaya çalışıyorum. Bir şey gibi:Araç Çubuğu simgesiyle bir simgeyi hizalayın - Android Materyal Tasarımı

enter image description here

Ben doğru tüm metriklerindeki arıyorum düşünüyorum ...

enter image description here

Touch Target Size

Sorun mükemmel şekilde hizaya edemezler 16px'in soldaki dolgusundan sonra, simgeler başlamalıdır, ancak ikonun kendisi de bazı "dolgu" (malzeme github simgesinden) içerir, örneğin:

enter image description here

Belki aptalca ama ne eksik olduğumu bilmiyorum. Düzgün hizalamak için resmin içindeki dolguyu nasıl dikkate alabilirim? Radyo düğmeleri ya da bu eylem çubuğu simgesiyle onay kutusunu hizalamada da aynı sorun var.

Ben bu kod parçası çalıştı:

<RelativeLayout 
    android:id="@+id/image_button" 
    android:layout_width="72dp" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="32dp" 
     android:layout_height="48dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginStart="16dp" 
     android:src="@drawable/ic_label_grey600_48dp" /> 
</RelativeLayout> 

Ama (ben yayınlanmıştır ilk ekran görüntüsünde olduğu gibi) bana hizaya bak etmez.

enter image description here

Ve seviyor o 72px ve dolgu 16px fazla hesap şeye alıyor görünür: Burada da mükemmel hizalama görünüyor.


Tamam GÜNCELLEME, sana adamlar daha fazla örnek ve bazı kod göstereyim. Liste öğemin etiket metni içeren bir radyo düğmesine sahip olduğunu görüntüleme.

<RadioButton 
    style="?android:textAppearanceMedium" 
    android:layout_width="wrap_content" 
    android:layout_height="48dp" 
    android:layout_marginLeft="16dp" 
    android:paddingLeft="32dp" 
    android:singleLine="true"/> 

Sonuç: Ben aslında (bir radyo düğmesi gibi özel bir düğme kullanmadan bir kural doğru değerlere marginLeft ve paddingLeft ayarlamak görmüyorum

enter image description here

enter image description here

ve bu düğmenin boyutlarını bilerek) ... < - Kötü bir seçenektir çünkü renk butonu accentColor'dan (Malzeme'nin yeni malzemeleri) alınmıştır.Ayrıca bazı hizalama sorunları ile karşı karşıyadır Gmail uygulamasına benziyor

(ben bir mail seçtiğinizde bkz 1 posta başlığı ile artık aynı hizada değildir):

enter image description here

enter image description here

+0

Belki bu yüzden aslında ile geldi görebilirsiniz bir ekran ve kod olarak versiyonunu yayınlamak? –

+0

Radyo düğmesiyle bir örnek yaptım. Sadece bir eylem çubuğu ile bir metni hizalama tamam (radyo düğmesi etiketinde değil). Ayrıca dediğim gibi, simgeleri hizalamada da sorunlar var (iç dolguyu bilmiyorsunuz). –

+0

Bağdaştırıcınızda, newView/bindView'da neden sadece simgenin kenar boşluğunu elle ayarlamak değil? – Codeversed

cevap

2

Sorun şu ki, mükemmel bir şekilde hizalayamıyorum, çünkü bu 16px soldaki dolgudan sonra simgeler başlamalı, ancak ikonun kendisi de bazı "dolgu" (malzeme github simgesinden)

Evet, simgenin bazı dolguları olmalı ve simgesinin görüntüleneceği ekran çözünürlüğüne bağlı olarak değişir. farklı ekran yoğunluğu için dolgu:
MDPI             4 piksel * 1.0 = 4 piksel
hdpi               4 piksel * 1.5 = 6 piksel
xhdpi           4 piksel * 2,0 = 8px
xxhd pi       4 piksel * 3,0 = 12px
xxxhdpi   4 piksel * 4,0 = 16px
Bu dolgu simgesi çekilebilir dahil ve bunu kaldırmak olmamalıdır olduğunu. icon live area

enter image description here

http://www.google.com/design/spec/style/icons.html#icons-system-icons

+0

Teşekkürler! Onu arıyordum. Öyleyse ... dpi'ye bağlı olarak pedin farklı olacağı bir stil (res klasörlerinde) oluşturmak mantıklı olur mu? Radyo düğmem örneğim ne olacak? Bu kuralları da takip ediyor mu? –

+0

Şu an size cevap veremiyorum çünkü test etmedim. Gelecek günlerde bazı radyo düğmelerini de hizalamak zorundayım, böylece size bildireceğim. Google'ın, malzeme tasarımına sahip uygulamalarının hâlâ hizalamada bazı sorunları olduğu ve AppCompat widget'larının bazı sorunlarının olabileceğini unutmayın. – vovahost

İlgili konular