Dibujar múltiples rectángulos en un xml dibujable

Question

Estoy tratando de averiguar cómo crear una fila de 3x3 rectángulos pequeños en un dibujo xml de Android.
Esto no me está recibiendo cercanos (2 pequeñas rectas, sino que se superponen):

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 

    <item android:left="20dp" android:top="20dp" android:right="25dp" android:bottom="25dp" > 
     <shape android:shape="rectangle"> 
      <stroke android:width="1px" android:color="#fff" /> 
      <solid android:color="#00FF0000" /> 
      <corners android:radius="3dp" /> 
     </shape> 
    </item> 


    <item android:left="30dp" android:top="30dp" android:right="35dp" android:bottom="25dp" > 
    <shape android:shape="rectangle"> 
      <stroke android:width="1px" android:color="#fff" /> 
      <solid android:color="#00FF0000" /> 
      <corners android:radius="3dp" /> 
      <size android:width="10dp" 
        android:height="10dp"/> 
     </shape> 
    </item> 


</layer-list> 

Answer 1

Por favor ver la documentation of Layer Lists.

Será aclarar, que top, left, bottom y right son atributos en dimensión para los desplazamientos de la máquina: hasta qué punto el artículo en sí mismo debe ser colocado desde el borde de su padre (la capa de la lista) .

Si usted sabe que su capa-list es decir 130 dp de ancho y 130 dp alta, y desea rectángulos de 3x3 allí, las compensaciones de la primera debe ser

top: 10 
left: 10 
bottom: 90 
right: 90 

y de la siguiente (primera fila, segunda columna):

top: 10 
left: 50 
bottom: 90 
right: 50 

Answer 2

Parte del problema es que los elementos individuales en una lista de capas se ajustan al tamaño total del dibujante. Como se describe en the docs, puede evitar esto al envolver los cuadrados pequeños en un dibujo bitmap. Algo como esto podría funcionar. En primer lugar, definir la forma básica como dibujable separada:

estirable/square.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <stroke android:width="1px" android:color="#fff" /> 
    <solid android:color="#00FF0000" /> 
    <corners android:radius="3dp" /> 
    <size android:width="10dp" android:height="10dp"/> 
</shape> 

(EDIT: Sería bueno si pudiera hacer lo anterior, pero Desafortunadamente, como @Someone Somewhere señaló en un comentario, no se puede hacer referencia a los formularios dibujables dentro de una etiqueta <bitmap>. Tendrás que crear el cuadrado como un gráfico de mapa de bits real para que el resto funcione).

A continuación, puede definir una capa-lista que no escalará los cuadrados individuales:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- first row --> 
    <item android:left="20dp" android:top="20dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
    <item android:left="35dp" android:top="20dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
    <item android:left="50dp" android:top="20dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 

    <!-- second row --> 
    <item android:left="20dp" android:top="35dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
    <item android:left="35dp" android:top="35dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
    <item android:left="50dp" android:top="35dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 

    <!-- third row --> 
    <item android:left="20dp" android:top="50dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
    <item android:left="35dp" android:top="50dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
    <item android:left="50dp" android:top="50dp"> 
     <bitmap android:src="@drawable/square" android:gravity="top|left" /> 
    </item> 
</layer-list> 

no he probado esto, por lo que puede ser un poco apagado, pero usted debería ser capaz de modificarlo para obtener lo que quieres Lo importante es deshacerse de la escala.

Answer 3

Como la discusión ya ha revelado, el uso de mapa de bits está restringido a mapas de bits reales; otros tipos (XML) no se pueden usar aquí.

ScaleDrawables debería ser una solución adecuada para usted. Deben ofrecer los atributos que necesita para ajustar su posición dentro del cuadro delimitador resultante.

Sin embargo, ScaleDrawables sufren por el hecho de que están destinados para animaciones. Parecen comenzar con un nivel de 0, lo que los hace invisiblemente pequeños. Además, no parece posible establecer el nivel en XML.

Si puede vivir estableciendo un nivel en sus ScaleDrawables en su código, pruébelo.

También, vea this question.