10

Nel nuovo Material Design (utilizzando AppCompat), sto cercando di allineare alcune icone di azione con l'icona del cassetto della nuova barra degli strumenti. Qualcosa di simile:Allineare un'icona con l'icona della barra degli strumenti - Android Material Design

enter image description here

Credo che sto cercando in tutti i parametri correttamente ...

Touch Target Size

enter image description here

Il problema è che non riesco perfettamente allinearlo , perché dopo quel padding sinistro di 16px, le icone dovrebbero iniziare, ma l'icona stessa ha anche un po 'di "padding" (icona dal github materiale), come:

enter image description here

Forse è sciocco ma non so cosa mi manca. Come posso tenere conto del padding all'interno dell'immagine per allinearlo correttamente? Ho lo stesso problema con l'allineamento dei pulsanti di opzione o la casella di controllo con l'icona della barra delle azioni.

Ho provato questo pezzo di codice:

<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> 

Ma non sembra allineare a me (come nel primo screenshot che ho postato). Qui sembra anche perfettamente align:

enter image description here

e guarda calibro sta prendendo in considerazione qualcosa di più 72px 16px e di imbottitura.


UPDATE

Ok, ti ​​faccio vedere ragazzi più esempi e un po 'di codice. Immaginando che la mia voce di elenco abbia un pulsante di opzione con un testo di etichetta.

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

Risultato:

enter image description here

enter image description here

io in realtà non vedo una regola per impostare marginLeft e paddingLeft ai giusti valori senza l'utilizzo di un pulsante personalizzato come un pulsante di scelta (e conoscendo le dimensioni di quel pulsante) ... < - Che è una cattiva opzione perché il pulsante colore è preso dal mio accentColor (materiale nuovo di materiale).

Sembra anche nuova app Gmail si trova ad affrontare alcuni problemi di allineamento (vedi quando seleziono una e-mail, il 1 non è allineato più con il titolo di posta):

enter image description here

enter image description here

+0

Forse pubblicare il tuo versione come uno screenshot e il codice in modo che possiamo vedere quello che in realtà è venuto su con? –

+0

Ho fatto un esempio con il pulsante di scelta. Allineare solo un testo con la barra delle azioni è ok (non l'etichetta del pulsante radio). Inoltre, come ho detto, ci sono anche problemi nell'allineare le icone (che non si conosce il padding interno). –

+0

Nell'adattatore, in newView/bindView perché non basta regolare manualmente il margine dell'icona? – Codeversed

risposta

2

Il problema è che non riesco perfettamente ad allinearlo, perché dopo quello padding sinistro di 16px, le icone dovrebbero iniziare, ma l'icona stessa ha anche qualche "padding" (icona dal github materiale)

Sì, l'icona deve avere un riempimento e varia a seconda della risoluzione dello schermo che verrà visualizzata sull'icona. L'imbottitura di differente densità degli schermi:
mdpi             4px * 1.0 = 4px
hdpi               4px * 1.5 = 6px
xhdpi           4px * 2.0 = 8px
xxhd PI       4px * 3.0 = 12px
xxxhdpi   4px * 4.0 = 16px
Questo è l'imbottitura inclusa nel dell'icona drawable e non si deve rimuoverlo. icon live area

enter image description here

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

+0

Grazie! Lo stavo cercando. Quindi ... avrebbe senso creare uno stile (nelle cartelle di ricerca) che a seconda del dpi il padding sarebbe diverso? E il mio esempio di pulsante radio? Sta seguendo anche queste regole? –

+0

Non posso rispondervi in ​​questo momento perché non l'ho provato. I prossimi giorni dovrò anche allineare alcuni pulsanti radio, quindi ti farò sapere. Tieni presente che le app di Google con design dei materiali presentano ancora problemi con l'allineamento e i widget AppCompat possono presentare alcuni problemi. – vovahost

Problemi correlati